Are you a React JS lover? Do you want to know about React JS ? Then you are in the right place now. Here you will learn about the core concepts of React JS. So welcome here and enjoy learning.
What is React?
Let me explain it and clear you:
- If you want to make your UI faster, then you go with react. Because using React you will get a fast user interface without doing much work to correctly optimize for performance.
- React allow us to create reusable UI components that can be used in many web pages.
- React applications are super easy to test.
The Virtual DOM
React use the concept of virtual DOM which helps in the performance. Virtual DOM is basically a JSON representation of the browser DOM.
The Virtual DOM is an abstraction of the HTML DOM. A virtual DOM object has the same properties as a real DOM object. React’s render() method generates a node tree from React components and updates it in reply to changes in the data model, caused by actions. Manipulating the DOM is slow rather than manipulating the virtual DOM which is much faster.
JSX is a technology that was introduced by React. We can write and add HTML to React by the help of JSX which is the most amazing feature. The vital contribution of JSX makes React benefit a lot.
In React, you can say everything is component. Components are the heart and soul of React.
A Component is self-contained reusable building blocks of a web application. Components will allow you to split the UI into independent, reusable pieces. They are two types of component:
- Functional Component
- Class Component
Props & State
React controls the data flow in the components using props and state.
Talking About Props:
- The most powerful feature of props is that they can be passed by a parent component to its child components.
Lets move to State now:
- State is used to store data to the React component.
- It is mostly used to update the component when the user performed some action.
- State is belongs to a single Component.
In React hooks are used to implementing state changes and lifecycles in functional components. To change state you can use useState() hook and implement lifecycle you can use useEffect() hook.
- You can’t call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions.
Element VS Component
An element is a plain object which describes that you want to develop on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. When an element is created, it will never be changed.
A component can be declared in different ways. It can be declared as a class with a render() method. Otherwise, in simple cases, it can be defined as a function. In both cases, it takes props as an input and returns a JSX tree as the output.
In React, each component follows a life cycle that you can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting.
- Lets talking about Mounting first
If you want to put element into the DOM, it’s called Mounting. In mounting, React has four built-in methods : constructor(), getDerivedStateFromProps(), render(), componentDidMount().
We usually use render(). Because it’s required most and will always be called.
2. Now moved to Updating
If there is a change in the component’s state or props then a component is updated. When a component is updated, five built-in methods are called: getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate().
We usually use render(). Because it’s required most and will always be called. Others are optional. If you need any one of them, then you can use it.
3. Let’s finished with Unmounting
When a component is being removed from the DOM, the unmounting method is called.
In unmounted, react has only one built-in method that gets called. And the method is componentWillUnmount().
Here I tried to explain what is React, why we should use this magical solution, the core concept of React like Virtual DOM, JSX , Component, State & props, hooks, the difference between element & component. And finally about the React lifecycle. Hope you enjoyed it.