This content originally appeared on DEV Community and was authored by Bryan Lumbantobing
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>;
}
}
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);
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.
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
This content originally appeared on DEV Community and was authored by Bryan Lumbantobing
Bryan Lumbantobing | Sciencx (2021-09-13T15:25:32+00:00) What, and why web components. React example. Retrieved from https://www.scien.cx/2021/09/13/what-and-why-web-components-react-example/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.