React JS

What is the work of ReactJS

 

it is a framework to build a frontend APP  developed by Facebook. With JavaScript, you can build dynamic applications where the browser performs a substantial part of functions, so they can work without contacting the server. It also allows the data and interface to be updated independently in just a part of an app (without reloading it). The main feature of React.js that distinguishes it from other popular JavaScript frameworks is flexibility. You can take a library and use it to display a simple page or a view, but you can also combine React.js with other tools and use it as a framework that will lay the foundation for a complex application.

Understanding the component

 

These are the building blocks that can be put together to create an application. With React.js it's relatively easy to build custom components, which is a very important feature since building custom components is needed. Components accept arbitrary input named props and return React elements which describe what should appear on the screen.

                React component types

                                Function components

                                Class components

 

Function components

Class components

What is JSX?

SX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together.

Let’s look at the parameters of the createElement function.

 

type can be an HTML tag like h1, div or it can be a React component

props are the attributes you want the element to have

children contain other HTML tags or can 

The Component Lifecycle

React components take part in a lifecycle of creation (or mounting), updating, and deletion (or unmounting). This lifecycle includes built-in methods, known as lifecycle methods, that can be called at various times in the lifecycle to control how the component reacts to changes in the application. It is important to remember that render() is the only method required in React components. The following methods are all optional should you want to alter the component’s default behavior.

Mounting

React components are essentially JavaScript classes, and as such, they contain a constructor function to define the initial state of the component even before mounting has occurred:

Updating

Four lifecycle methods (in addition to render) are available during the updating phase of a component’s life. These are static getDerivedStateFromProps (again), shouldComponentUpdate, getSnapshotBeforeUpdate, and componentDidUpdate. These methods are always called in the order that is outlined in the graphic included in the introduction:

Unmounting

We have access to one lifecycle method in the unmounting or deletion phase: componentWillUnmount. This method is invoked right before the component is removed from the DOM, and it is where any time intervals, network requests, or subscriptions initiated in componentDidMount are cleared. Mapping it back to our stocks application, we would end the interval so that our application does not continue to unnecessarily fetch data after the component is unmounted