React JS

What is React JS?

ReactJS is a JavaScript library for creating reusable UI components that are declarative, efficient, and flexible. It is an open-source component-based library in charge of the application’s user interface. It was created and maintained by Facebook and was later used in its products such as WhatsApp and Instagram. You may believe that ReactJS is a framework, but it is simply a library for creating user interfaces.

Features of ReactJS :

• JSX (JavaScript Syntax Extension)
• Virtual DOM
• One-way data binding
• Performance

JSX (JavaScript Syntax Extension): JSX is a combination of HTML and JavaScript. JavaScript objects can be embedded within HTML elements. Because browsers do not support JSX, the Babel compiler trans compiles the code into JavaScript code. JSX simplifies and clarifies code. It is simple to learn if you are familiar with HTML and JavaScript.

Virtual DOM: DOM is an abbreviation for Document Object Model. It is the most important part of the web because it divides the code into modules and executes it. Typically, JavaScript Frameworks update the entire DOM at once, making the web application slow. However, react employs virtual DOM, which is a carbon copy of real DOM. When a change is made to a web application, the entire virtual DOM is updated first to determine the difference between real DOM and Virtual DOM. When it finds the difference, DOM updates only the part that has changed recently, leaving the rest unchanged.

One-way data-binding: ReactJS is designed to support unidirectional data flow or one-way data binding. The advantages of one-way data binding provide you with greater control throughout the application. Additional features are required if the data flow is in the opposite direction. This is due to the fact that components are supposed to be immutable, and the data contained within them cannot be changed. Flux is a pattern that aids in the unidirectional flow of data. This increases the application’s flexibility, which leads to increased efficiency.

Performance: React uses virtual DOM and updates only the modified parts. As a result, the DOM runs faster. Because DOM executes in memory, we can create separate components, allowing the DOM to run faster.

Props and State

Props: Props is an abbreviation for properties, and they are used to communicate data between React components. The data flow between components in React is unidirectional (from parent to child only).

State: Another special built-in object in React is state, which allows components to create and manage their own data. Components, unlike props, cannot pass data with state, but they can create and manage it internally.

What are the differences between props and state?

• Components receive data from outside with props, but they can also create and manage their own data via the state.
• Data from props is read-only and cannot be modified by a component receiving it from outside.
• Props are used to pass data, whereas states are used to manage data.
• State data is private but can be modified by its own component.
• Props can only be passed from parent to child component.

Component

Components make it much easier to create user interfaces. React allows you to separate your page into building parts that can be built, maintained, edited, and reused separately before being merged to form the full page. There are two kinds of components in React. There are two types of components: class components and functional components.

→ Lifecycle of Components

Every React Component has its own lifecycle. A component’s lifecycle can be defined as a series of methods that are invoked at various stages of the component’s existence. The definition is simple, but what do we mean by different stages? A React Component can go through the four stages listed below.

Initialization: This is the stage at which the component is built with the specified Props and default state. This is done in a Component Class’s constructor.

Mounting: This is the stage in which the JSX returned by the render method is rendered.

Updating: Updating is the stage in which a component’s state is updated and the application is repainted.

Unmounting: As the title suggests, this is the final step of the component lifecycle in which the component is removed from the page.

→ Functions of each Phase of Lifecycle

React provides developers with a set of predefined functions that, if present, are invoked around specific events in the component’s lifetime. Developers are expected to override the functions with desired logic for them to execute properly.

1. Initialization: The developer must define the props and initial state of the component during this phase, which is typically done in the component’s constructor.
2. Mounting: React follows a default procedure in the Naming Conventions of these predefined functions, where functions containing “Will” represent before some specific phase and functions containing “Did” represent after that phase is completed. The mounting phase is made up of two of these predefined functions.

componentWillMount() Function: As the name implies, this function is called just before the component is mounted on the DOM, i.e. it is called once before the render() function is called for the first time.

componentDidMount() Function: Like the previous one, this function is called immediately after the component is mounted on the DOM, i.e. after the render() function is called for the first time.

3. Updation: React is a JS library that makes it simple to create Active web pages. Active web pages are now specific pages that respond to their user. Updating is the process of updating a component’s states and properties, which is followed by user events such as clicking, pressing a key on the keyboard, and so on. The following are descriptions of functions that are called at various points during the Updation phase.

componentWillReceiveProps() Function: This is a Props-only Function that is not affected by States. This function is called before the props of a mounted component are reassigned. The new set of Props is passed to the function, which may or may not be identical to the original Props. As a result, checking is an essential step in this process.

setState() Function: This is not particularly a Lifecycle function and can be called explicitly at any instant. This function is used to update a component’s state.

shouldComponentUpdate() Function: This function satisfies the requirement by informing React whether or not the component’s output will be affected by the update. When new props or state are received, this function is called before rendering an already mounted component. The Function takes the new Props and State as arguments and returns whether or not to re-render.

componentWillUpdate() Function: As the name clearly suggests, this function is called before the component is rerendered, that is, before the render() function is called after the State or Props have been updated.

componentDidUpdate() Function: Similarly, this function is invoked after the component is rerendered, i.e. after the render() function is executed following the update of State or Props.

4. Unmounting: This is the final phase of the component’s lifecycle, which is the phase of unmounting the component from the DOM.

componentWillUnmount() Function: This function is called before the component is finally unmounted from the DOM, it is called once before the component is removed from the page, indicating the end of the lifecycle.

So far, I hope this article has given you a better understanding of React Js; see you in the next one.