- Learn ReactJS Tutorial
- React Introduction
- Why learn ReactJS?
- React create-react-app
- React Features
- Pros and Cons of ReactJS
- React JSX
- React Components
- React State
- React Props
- React Props Validation
- State Vs. Props
- What is Constructor?
- React Component API
- React Component Life-Cycle
- React Forms
- React Events
- React Conditional Rendering
- React Lists
- React Refs
- React Fragments
- React Router
- React CSS
- React Animation
ReactJS component is a top-level API. It makes the code completely individual and reusable in the application. It includes various methods for:
- Creating elements
- Transforming elements
- Fragments
Here, we are going to explain the three most important methods available in the React component API.
- setState()
- forceUpdate()
- findDOMNode()
setState()
This method is used to update the state of the component. This method does not always replace the state immediately. Instead, it only adds changes to the original state. It is a primary method that is used to update the user interface(UI) in response to event handlers and server responses.
Note: In the ES6 classes, this.method.bind(this) is used to manually bind the setState() method.
Syntax
- this.stateState(object newState[, function callback]);
In the above syntax, there is an optional callback function which is executed once setState() is completed and the component is re-rendered.
forceUpdate()
This method allows us to update the component manually.
Syntax
- Component.forceUpdate(callback);
findDOMNode()
For DOM manipulation, you need to use ReactDOM.findDOMNode() method. This method allows us to find or access the underlying DOM node.
Syntax
- ReactDOM.findDOMNode(component);