”;
React and web components can be mixed in a web application. A react component can have one or more web component and a web component can use react component to create its content. Both options are supported by react.
Using Web components in a react application
Let us create a web component and then try to apply it in a react application. First of all, create a new react application and start it using below command.
create-react-app myapp cd myapp npm start
Next, open App.css (src/App.css) and remove all CSS classes.
// remove all css classes
Next, create a simple web component, HelloMessage (public/WebComponents/HelloMessage.js) and add below code. The purpose of the web component () is to welcome a user (by specifying username in the name attribute of the web component).
// web component
class HelloMessage extends HTMLElement {
constructor() {
super();
this.name = ''Folks'';
}
static get observedAttributes() {
return [''name''];
}
attributeChangedCallback(property, oldValue, newValue) {
if (oldValue === newValue) return;
this[property] = newValue;
}
connectedCallback() {
this.textContent = `Hello ${this.name}!`;
}
}
customElements.define(''hello-message'', HelloMessage);
Here,
-
connectedCallback() is used to create the content of the web component.
-
observedAttributes function access the name attributes.
-
attributeChangedCallback function updates the value of the name attributes, if it gets changed in the application.
-
customElements.define is used to attach the created web component with a tag name into the web document.
Next, open the index.html (public/index.html) file and add the web component as shown below −
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="%PUBLIC_URL%/WebComponents/HelloMessage.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div style="padding: 10px;">
<div id="root"></div>
<div style="padding: 10px;">
<hello-message name="John"></hello-message>
</div>
</div>
</body>
</html>
Here we have,
-
Included the web component in the head section
-
Used the hello-message web component in the page to showcase it”s usage
Next, create a simple component, SimpleWebComponent (src/Components/SimpleWebComponent.js) and render the newly created web component as shown below −
import React from "react";
class SimpleWebComponent extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<hello-message name="Peter"></hello-message>
);
}
}
export default SimpleWebComponent;
Here, the web component hello is used inside the component”s render method.
Next, open App component (src/App.js), and use SimpleWebComponent component as shown below −
import ''./App.css''
import React from ''react'';
import SimpleWebComponent from ''./Components/SimpleWebComponent''
function App() {
return (
<div className="container">
<div style={{ padding: "10px" }}>
<div>
<SimpleWebComponent />
</div>
</div>
</div>
);
}
export default App;
Here we have,
-
Imported SimpleWebComponent component from the react package
-
Used SimpleWebComponent component and rendered hello web component
Finally, open the application in the browser and check the final result.
Summary
React and web component complement each other in a nice way. Each has its own advantages and disadvantages and can be used in a single application by analyzing its pros and cons with respect to the application.
”;