What, and why web components. React example

Thumbnail source: itnext

Let's start with the Defenition of Web Component

Based on webcomponents.org

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

From the definition we know that using web component, we basically create a component that can be reuse on every project that use html because web component basically just a set of custom html tag.

So why that's matters and what are the advantages of building a project using web component. Why don't just use popular framework or library.
Well. That's the beauty of web component. Every framework that built and used html will be supported by web component.

Back again and why that's matters
We're not going to talk every advantages of it. In this article we're just focusing on one thing that i found very interesting

Shared Resource & Scoping
By using web component. We will be able to scoped resources that we have in our application and can be shared across every web application

Imagine you're building a library that not specifically targeted for any framework or library.
This will be very useful

For Example in React Application
We can include web component in react because react use html to render component.

if we take a look at this example

class HelloMessage extends React.Component {
  render() {
    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
  }
}

example source

we can just add web component that we built on react applications on its render. one thing to notice that web component using class instead of className.

we can also do the opposite by adding react apps to our web applications that use web component

So how to write a Web Component

class XSearch extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

    const name = this.getAttribute('name');
    const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
    ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
  }
}
customElements.define('x-search', XSearch);

example source

From the example above is an example of creating web component. It's a class that extends HTMLElement. And isolate the scope of the element using shadow. By doing that the scope will be seperated to other component.

connectedCallback is one of the method for web component lifecyle that basically run before the component get render.

Component Lifecycle

There are still configuration that we need to do in order to run web component. Basic webpack understanding will be required to configure the apps.

So that's it.

To explore more about web component
webcomponents.org
web.dev

Next: Start to build a project using web components | Turn react project to web components