What, and why web components. React example
Tags: webpack, webdev, react, component
Published: 2021-09-13 15:25:32

Thumbnail source: [itnext](https://itnext.io/)

Let's start with the **Defenition** of Web Component

Based on [webcomponents.org](https://www.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](https://reactjs.org/docs/web-components.html)

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](https://reactjs.org/docs/web-components.html)

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](https://levelup.gitconnected.com/creating-web-components-lifecycle-callbacks-5b6ffa48a8d5)

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](https://www.webcomponents.org/)
[web.dev](https://web.dev/web-components-io-2019/)

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