Using Custom Elements with React

What is React?

React is a JavaScript library for building user interfaces

React is Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug

How to use Web Components with React?

In this tutorial, we will demonstrate how to create a React Component for our Smart.Button. The project will use Typescript and create-react-app.

To start a new Create React App project with TypeScript, you can run:

npx create-react-app my-app --typescript

.
To add TypeScript to a Create React App project, first install it:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Next, rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx) and restart your development server!


In the next step, install our framework's npm package.


npm i @smarthtmlelements/smart-elements


Within the 'src' folder, create a new folder, called 'react' and add a new smart.button.tsx file. The TSX file implements a Typescript Interface, called IButton and all Smart.Button properties and property types are defined there. The required Javascript and CSS files are imported within that file.The React's 'render' function, renders the smart-button tag with the properties set through 'props'.

 import React from 'react';  
 import '@smarthtmlelements/smart-elements/source/smart.elements.js';  
 import '@smarthtmlelements/smart-elements/source/styles/smart.default.css';  
 export interface IButton {  
      // properties  
      name?: string;  
      value?: string;  
      clickMode?: 'hover' | 'press' | 'release' | 'pressAndRelease';  
      type?: string;  
 }  
 declare global {  
  namespace JSX {  
   interface IntrinsicElements {  
    'smart-button': any;  
   }  
  }  
 }  
 class SmartButton extends React.Component<IButton, {}> {  
       private buttonRef: any;  
      constructor(props: IButton) {  
           super(props);  
        this.buttonRef = React.createRef();            
      }       
      render() {            
           return (       
                <smart-button   
                     name={this.props.name}  
                     value={this.props.value}   
                     click-mode={this.props.clickMode}   
                     type={this.props.type}  
                     ref={this.buttonRef}>{this.props.children}  
                </smart-button>  
           );  
   }  
 }  
 export default SmartButton;  

Then, open App.tsx and edit its contents to add the SmartButton component.
 import React, { Component } from 'react';  
 import logo from './logo.svg';  
 import './App.css';  
 import SmartButton, {IButton} from './react/smart.button'  
 class App extends Component {  
  render() {  
   return (  
    <div className="App">  
           <SmartButton>Click Me</SmartButton>  
    </div>  
   );  
  }  
 }  
 export default App;  


The final step is: Run the 'npm start' command. Then in the web browser, type localhost:3000