Explore Basic Concepts of React.js

Currently React is the famous and most used javascript library to build UI. If you are a javascript developer, this the right article for you. Let’s explore React.js

Framework or library?

React is a library of javascript. It is not a framework. Usually, a framework is a complete solution and it has everything that you need to build a UI. And you also don’t use everything in a framework. But React doesn’t have that much. It is a small library. You have to use another library or package manager to create a perfect UI.

How React Works?

When React renders a tree of elements in the browser, it creates a virtual DOM. Virtual DOM is a kind of programming concept used in React to store the virtual representation of UI in memory. When DOM operations are performed, React creates a new virtual DOM model and compares it with the stored Model. React doesn’t change the whole DOM. It compares the new DOM with the First Virtual DOM stored in memory and detects the changes. Then React renders those changes only. Not the whole DOM.

JSX

JSX means Javascript XML. It allows a developer to write HTML code inside React and it also places the code in DOM without using any createElement() method. We can write an expression or dynamic value inside HTML code using {} curly braces.

Component

In React.js, components are functions that return HTML. Components are a small part of the react project. In other words, components are reusable UI parts. It can be a repetitive part of the app or a full section of the app. There are 2 types of components in react, class component, and function component.

Components LifeCycle

All the React components have a lifecycle. During the phase of Mounting, Updating, and Unmounting we can monitor and manipulate this lifecycle.

When we insert a component in the DOM it is called mounting. React has 4 built-in methods which we can use during mounting:
1.constructor()
2.getDeriveStateFeomProps()
3.render()
4.componentDidMount()

Updating is the next phase of the lifecycle. When the state of props of a component is changed, updating takes place. React has 5built-in methods which we can use during mounting:
1..getDeriveStateFeomProps()
2.shouldComponentUpdate()
3.render()
4.getSnapShotBeforeUpdate()
5.componentDidUpdate()

Unmounting means removing a component from the DOM. React has only one build-in method to use when a component is removed.
1.componentWillUnmount()

Difference Between React State and Props

In React, both state and props are object. So, what is the difference?
Props are like function arguments. It is passed to the component via HTML attributes. On the other hand, state is used to store components property value. When a state is changed, means the value is changed React re-renders the component.

How does rendering work?

In React, there is a setState() method to set the state object with value. When setState() is called to store values it triggered the render() method. Then render() method makes a virtual DOM with all the components and compares it with what’s was rendered in the browser. Then it detects the changes and updates the DOM and re-renders.