ReactJS Component API

In this tutorial you will learn about the ReactJS Component API and its application with practical example.

ReactJS Component API

In React, React Component is a top-level API. It is used to create completely individual, reusable UI elements. It is available on the React global and can be included as following –

Syntax:-

ES5

ES6

It includes various methods for-

  • Creating Elements
  • Transforming Elements
  • Fragments

Here we will discuss some of the important methods available in React component API.

Set State

The setState() method is used to update the state of the component.

Syntax:-

Example:-

Step 1:- Let’s open src/App.js, delete the existing code and put the following code in it and save it.

Step 2:- Let’s open the terminal again, change directory to your project folder and type the following command in order to run the server.

Recommended:-  ReactJS State

Step 3:- Now open the following URL in browser to view the output

http://localhost:3000

Step 4:- You will see the following screen.

reactjs-state-1

Step 5:- Now, click on the “Click me!” button, you will see the following screen.

reactjs-state-2 reactjs-state-3

Force Update

The forceUpdate() method is used to manually update the component.

Syntax:-

Example:-

Step 1:- Let’s open src/App.js, delete the existing code and put the following code in it and save it.

Step 2:- Let’s open the terminal again, change directory to your project folder and type the following command in order to run the server.

Step 3:- Now open the following URL in browser to view the output

http://localhost:3000

Step 4:- You will see the following screen.

Recommended:-  ReactJS Hello World Application

ReactJS Force Update

Find Dom Node

The ReactDOM.findDOMNode() method is used to find/access underlying DOM node.

Syntax:-

Example:-

Step 1:- Let’s open src/App.js, delete the existing code and put the following code in it and save it.

Step 2:- Let’s open the terminal again, change directory to your project folder and type the following command in order to run the server.

Recommended:-  ReactJS Refs

Step 3:- Now open the following URL in browser to view the output

http://localhost:3000

Step 4:- You will see the following screen.

Screen 1:-

reactjs-find-update-1

Screen 2:-

reactjs-find-update-2

In this tutorial we have learn about the ReactJS Component API and its application with practical example. I hope you will like this tutorial.