Quick Contact


    React Component API

    It’s all about fetch API data in react.

    -To use API in code, before using API call function. First make constructor and an empty state, then call API with fetch function and after use map function to make list of data.

    API’s are also available free at internet. Understand the working of API by calling API function in code-:

    So in code first we create constructor and then in that we define state. Then we call API in “DidMount Component”. Then we use a map function and in map function we give fetch the elements. So, this is the simple method to call API and fetch data

    		Import React from ‘react’;
    		Import ‘./App.css’;
    		Class App extends React.Component {
    		Constructor () {
    		  Super ();
    		This.state = {
    		Users: null
    		}
    		}
    		componentDidMount() {
    		 fetch(‘url’).then ((resp) => {
    		resp.json().then((result) => {
    		this.setState({users:result.data})
    		})
    		})
    		}
    		Render(){
    		Return (
    		< div className=”App”>
    		< h1>
    		  Fetch API Data
    		< /h1>
    		  {
    		This.state.users ?
    		This.state.users.map((item,i)=>
    		< div>< p>
    		{i}
    		{item.first_name}
    		{item.last_name}
    		{item.email}
    		< /p>
    		< /div>
    		)
    		:
    		Null
    		}
    		< /div>
    		);
    		}
    	
    React Component API

    API makes code completely individual and reusable and includes various methods.

    1. Creating elements
    2. Transforming elements
    3. Fragments

    Moreover the methods in component API are as below-:

    setState()

    setState() method is used to update the state of component. setState() donot do replacement but it only add changes to state. This method is used to update UI in response to event handlers and server responses.

    For Example-:
    		Import React, {Component} from ‘react’;
    		Import propTypes from ‘prop-types’;
    		Class App extends React.Component {
    		 Constructor(){
    		Super();
    		This.state = {
    		  Msg:””
    		};
    		This.updatesetState = this.updatesetState.bind(this);
    		}
    		updatesetState(){
    		this.setState({
    		msg:”it is best reactJS TUTORIAL”
    		});
    		}
    		Render(){
    		Return(
    		< div>
    		   < h1>{this.state.msg}< /h1>
    		< button onClick = {this.updatesetState}>set state< /button>
    		< /div>
    		);}
    		}
    		Export default App;
    	
    OUTPUT-:
    React Component API

    Another method is forceUpdate()

    It makes updation manually

    Component.forceUpdate(callback)

    Example-
    		Import React, {component} from ‘React’;
    		Class app extends react.component {
    		Constructor() {
    		Super();
    		This.forceUpdateState = this.forceUpdateState.bind(this);
    		}
    		forceUpdateState(){
    		this.forceUpdate();
    		};
    		Render(){
    		Return (
    		< div>
    		 < h1>Example to generate random number< /h1>
    		< h3>Random Number:{math.random()}< /h3>
    		< button onClick = {this.forceUpdateState}>ForceUpdate< /button>
    		< /div>
    		);
    		}}
    		Export default App;
    	
    OUTPUT
    React Component API
    FindDOMNode()

    For DOM manipulation you need to use ReactDOM.findDOMNode() method. It allows finding access underlying DOM node.

    ReactDOM.findDOMNode(component);

    For example-:
    		Import React, {component} from ‘react’;
    		Import ReactDOM from ‘react-dom’;
    		Class App extends React.Component {
    		Constructor() {
    		Super();
    		This.findDomNodeHandler1 = this.findDomNodeHandler1.bind (this);
    		This.findDomNodeHandler2 = this.findDomNodeHandler2.bind (this);
    		};
    		findDomNodeHandler1 () {
    		 var myDiv = document.getElementById(‘myDivOne’);
    		ReactDOM.findDOMNode(myDivOne).style.color= ‘red’;
    		}
    		findDomNodeHandler2() {
    		 var myDiv = document.getElementById(‘myDivTwo’)’;
    		ReactDOM.findDOMNode(myDivTwo).style.color = ‘blue’;
    		}
    		Render() {
    		Return(
    		< div>
    		< h1>ReactJS Find DOM Node Example< /h1>
    		< button onClick = {this.findDomNodeHandler1}>
    		< button onClick = {this.findDomNodeHandler2}>FIND_DOM_NODE2< /button>
    		< h3 id = “myDivOne”>JTP-NODE1< /h3>
    		< h3 id= “myDivTwo”>JTP-NODE2< /h3>
    		< /div>
    		);
    		}}
    		Export default App;
    	
    React Component API

    Copyright 1999- Ducat Creative, All rights reserved.