ReactJS Component API

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

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 –

Table Of Contents−

ReactJS Component API
Set State

Force Update
Find Dom Node

Syntax:-

ES5

var React = require('react')

1	var React = require('react')

ES6

import React from 'react'

1	import React from 'react'

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:-

this.setState(object newState)

1	this.setState(object newState)

Example:-

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

import React from 'react';

class App extends React.Component {
    
    constructor(props){
        super(props);
        this.state = {
            msg: "W3Adda"
        };
        this.updateMsg = this.updateMsg.bind(this);
   }

    updateMsg() {
        this.setState({
            msg: "ReactJS"
        });
    }    

    render() {
        return (
           <div>
             <h1>Hello {this.state.msg}!</h1>
             <button onClick={this.updateMsg}>Click me!</button>
           </div>   
        )
    }
}

export default App;

import React from 'react';

class App extends React.Component {

constructor(props){

super(props);

this.state = {

msg: "W3Adda"

};

this.updateMsg = this.updateMsg.bind(this);

}

updateMsg() {

this.setState({

msg: "ReactJS"

});

}

render() {

return (

<div>

<h1>Hello {this.state.msg}!</h1>

<button onClick={this.updateMsg}>Click me!</button>

</div>

)

}

export default App;

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.

npm start

npm start

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:-

component.forceUpdate(callback)

1	component.forceUpdate(callback)

Example:-

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

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };
   forceUpdateHandler() {
      this.forceUpdate();
   };
   render() {
      return (
         <div>
             <h1>W3Adda - ReactJS Force Update</h1>
            <button onClick = {this.forceUpdateHandler}>UPDATE</button>
            <h4>Random number: {Math.random()}</h4>
         </div>
      );
   }
}
export default App;

import React from 'react';

class App extends React.Component {

constructor() {

super();

this.forceUpdateHandler = this.forceUpdateHandler.bind(this);

};

forceUpdateHandler() {

this.forceUpdate();

};

render() {

return (

<div>

<h1>W3Adda - ReactJS Force Update</h1>

<button onClick = {this.forceUpdateHandler}>UPDATE</button>

<h4>Random number: {Math.random()}</h4>

</div>

);

}

export default App;

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.

npm start

npm start

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 Force Update

Find Dom Node

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

Syntax:-

ReactDOM.findDOMNode(component)

1	ReactDOM.findDOMNode(component)

Example:-

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

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor() {
      super();
      this.findDomNodeHandlerOne = this.findDomNodeHandlerOne.bind(this);
      this.findDomNodeHandlerTwo = this.findDomNodeHandlerTwo.bind(this);
   };
   findDomNodeHandlerOne() {
      var myDiv = document.getElementById('divOne');
      ReactDOM.findDOMNode(myDiv).style.color = 'green';
   }
   findDomNodeHandlerTwo() {
    var myDiv = document.getElementById('divTwo');
    ReactDOM.findDOMNode(myDiv).style.color = 'red';
 }
   render() {
      return (
         <div>
            <h1>W3Adda - ReactJS Find Node</h1> 
            <button onClick = {this.findDomNodeHandlerOne}>FIND NODE 1</button>
            <button onClick = {this.findDomNodeHandlerTwo}>FIND NODE 2</button>
            <h2 id = "divOne">NODE 1</h2>
            <h2 id = "divTwo">NODE 2</h2>
         </div>
      );
   }
}
export default App;

import React from 'react';

import ReactDOM from 'react-dom';

class App extends React.Component {

constructor() {

super();

this.findDomNodeHandlerOne = this.findDomNodeHandlerOne.bind(this);

this.findDomNodeHandlerTwo = this.findDomNodeHandlerTwo.bind(this);

};

findDomNodeHandlerOne() {

var myDiv = document.getElementById('divOne');

ReactDOM.findDOMNode(myDiv).style.color = 'green';

}

findDomNodeHandlerTwo() {

var myDiv = document.getElementById('divTwo');

ReactDOM.findDOMNode(myDiv).style.color = 'red';

}

render() {

return (

<div>

<h1>W3Adda - ReactJS Find Node</h1>

</div>

);

}

export default App;

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.

npm start

npm start

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

More React.js Tutorial

Learn

ABOUT PAGES

ReactJS Component API