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
|
1 |
var React = require('react') |
ES6
|
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:-
|
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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.
|
1 |
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.
Step 5:- Now, click on the “Click me!” button, you will see the following screen.
Force Update
The forceUpdate() method is used to manually update the component.
Syntax:-
|
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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.
|
1 |
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.
Find Dom Node
The ReactDOM.findDOMNode() method is used to find/access underlying DOM node.
Syntax:-
|
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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; |
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.
|
1 |
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:-
Screen 2:-
