
Quick Contact
React Tutorial
- React JS Introduction
- How to install react?
- React Features
- React vs React Native
- React JS VUE Application
- State V/S Props
- React Props
- REACT STATE
- React JSX?
- Conditional Rendering
- React Constructor
- Props Validation
- React Component API
- React Forms
- React Event
- Flux v/s MVC
- React Flux Concept
- React Fragment
- React Lists and Keys
- Error Boundaries
- React Portals
- React Animation
- React Redux
- React CSS
- React Refs
- React Router
Questions & Answers
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> ); }

API makes code completely individual and reusable and includes various methods.
- Creating elements
- Transforming elements
- 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-:

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

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;

Apply now for Advanced React Js Course