Frontend Weekly
Published in

Frontend Weekly

Using Web Components in React with Smart HTML Elements

React is gaining popularity as one of the light-weighted JavaScript libraries, which is widely used for UI/UX designs of the web application. The React framework works with Virtual DOM instead of Real DOM, which increases the performance of applications.

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.

  1. 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.
  2. Tslint.json: If you plan to use the lints, this file will help you to set up the linter settings.
  3. 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.
  4. Declaration Files: These are the interface between JavaScript and TypeScript. These files are prefixed with “@types” and are shipped along with the npm and can be found in the package.json file.

There are a few modifications to do while using React with TypeScript. Use .tsx file, for JSX syntax. To include JSX syntax, you should use the files with ‘.tsx’ extension. A TypeScript compiles JSX directly into JavaScript.

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.

Smart Button

We have seen one of the simplest components of Smart HTML added in the React application.

Styling:

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

Theme Builder:

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

Events:

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.

Summary:

With the companies asking multiple frameworks, it has become necessary to integrate the JavaScript frameworks without affecting the performance of the application. Smart HTML Elements are working towards creating the components for these frameworks and integrating the components in their applications. With the latest release, we can easily integrate the components of Smart elements into the given React applications, along with the TypeScript. We have seen the installation of React and Smart Elements, creating the button component and making it accessible to React application. The styling is an important part of any UI application. We have seen the styling of buttons and the files needed for these styles. Events that are hooked to buttons are important to its functionality.

--

--

--

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Recommended from Medium

JS is not worse than …

A new Web Components wonder

Day 42 Training at Ryaz: DOM in Js completed.

Getting Started With Leetcode — LinkedList

Javascript important core concepts

Design Patterns in NodeJS: Strategy

React vs Angular - Which Is Better And Why?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shanika Wickramasinghe

Shanika Wickramasinghe

Senior Software Engineer and Freelance Technical Writer. I write about any Computer Science related topic. https://www.linkedin.com/in/shanikawickramasinghe

More from Medium

Publish Typescript component to NPM: React Typescript component library — the easy way

React JS / Components , props and state

React: Understand higher-order component with a simple example