Are you working on a React project and would like to know how to add web components?
We will quickly explain how you can add any web component to your React based application.
For this article, we assume that you are already using or building an application using React. You will need to be using the react-cli. To start, you will need to install and import the component.
If you have not already, you can use NPM to install your component.
npm install your-component --save
Once the install is finished, you can then import the components so they will work on your browser. Add the following to the src/app.js file.
import 'your-component';
Once you have imported the component, you can then begin using the web components in your project. You can also update the render method in the src/app.js file as well and add ref attributes so you can reference the components from javascript.
render() {
return (
<div className="Test-data">
<this-is-a-text-field label="email" ref="email-field" />
</div>
);
}
You can then fully use the components in your application.