Using Web Components in React with Smart HTML Elements
Now with the latest release of Smart HTML Elements ver. 4.1.0, you can integrate these components with React for any web projects. This article focuses on the stepwise integration of Smart HTML Elements along with the React projects.
Installation of React Library:
React is an interactive library that renders the right components while the data changes. To install React, we will first need to install node.js 8.10 or later versions. Check for node.js and npm versions.
Creating the React App:
Using npm, we will create an application for React as given below. This code creates the folder structure, and the directory called my-app. The project opens in http://localhost:3000.
The folder structure is as below:
Let’s dig into the files and their purpose.
- Tsconfig.json: It sets the options for TypeScript. It is the root of the TyeScript project and indicates the compiler settings and files to include in the project.
- Tslint.json: If you plan to use the lints, this file will help you to set up the linter settings.
- Src: This folder will hold our UI design. It will have our CSS and TypeSceipt components. The entry point for the TypeScript project is index.tsx file.
Installation of Smart HTML Elements:
To install the latest version through NPM, or you can download the smart elements to your project folder and unzip your directory.
In the package.json, you should include a dependency on Smart’s npm package. Ex: “@smarthtmlelements/ smart-elements-community”
Adding a Smart Button Component In the React Application
Unlike the other Framework, React works on declarative programming. As it adopts Separation Of Concern, by separating the presentation and the components into separate logic, it allows us to render() the final state of the UI, without knowing the transition of the previous UI to Current UI. This makes programming in React a bit different than other frameworks.
Now we will see how to add the Smart Button Component in React Application. First, we will add the TSX file smart.button.txs in the src folder. We will first implement a TypeScript Interface, called IButton along with Smart. Button properties and property types. Next, we will render at the smart-button tag and its ‘props’ using the render().
Next, we will create the Button component by extending the ‘IButton’. We will set the constructor to create this button using <smart-button> and return the button along with the properties. Once we create this button component, we can use this button in any presentation container.
We will make this component accessible to React, by importing this component in app.tsx file and render it.
Next, we will run the npm command ‘npm start’, in the web browser and type localhost:3000.
We have seen one of the simplest components of Smart HTML added in the React application.
Smart HTML Elements use a pair of CSS file- smart.default.css, smart[theme name].css. The default stylesheet is used to create the layout of the elements like margin, padding, border-width, position. The theme file sets the color, border, size, etc. You will have to include the smart.default.css files before the smart.theme.css file.
There are various styling features for the button in Smart Elements. To implement that, open the app.css file and use the below styling.
Smart Buttons in Light rendering mode
With the latest release of Smart Web Components, you can have a styles look for your application using the Theme Builder tool. Theme Builder enables and creates customized themes. It is Shadow DOM friendly and enables us to render the smart components in light and dark rendering mode. It has 14 different material themes that enhance the looks of the smart components used in the application.
Smart Buttons in Dark rendering mode
Buttons are usually hooked to events that play a significant role in its functionality. Click event is the most common event along with the “mouse enters” and “mouse leave” events. There are other two events which can be used in web applications, “Focus” and “Blur” events. These events can be used to trigger the functions.
With the combination of events and styles, you can have multiple animations and effects on a single button.