ReactJS - Web Components

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.

Web Components React Application

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.

Advertisements