REACTJS

ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components.
Created by Jordan Walke.

Facebook developed ReactJS in 2011 in its newsfeed section, but it was released to the public in the month of May 2013.

Initially developed and maintained by Facebook and was later used in its products like WhatsApp & Instagram.

A ReactJS application is made up of multiple components.
Each component responsible for outputting a small, reusable piece of HTML code.
These Components can be nested with other components to allow complex applications to be built of simple building blocks.

 
ReactJS uses virtual DOM based mechanism to fill data in HTML DOM.
The virtual DOM works fast as it only changes individual DOM elements instead of reloading complete DOM every time.

DOM (Document Object Model) is an object which is created by the browser each time a web page is loaded. It dynamically adds or removes the data at the back end.
When any modifications were done, then each time a new DOM is created for the same page.
This repeated creation of DOM makes unnecessary memory wastage and reduces the performance of the application.

ReactJS allows to divide entire application into various components.
ReactJS still used the same, but it is not directly operating on the browser's DOM immediately; instead, it operates on a virtual DOM.
Rather than manipulating the document in a browser after changes to our data, React resolves changes on a DOM built and run entirely in memory.
After the virtual DOM has been updated, React determines what changes made to the actual browser's DOM.

The React Virtual DOM exists entirely in memory and is a representation of the web browser's DOM.
Due to this, when we write a React component, we did not write directly to the DOM; instead, we are writing virtual components that react will turn into the DOM.

npm -v

node -v

npm init -y

npm install react react-dom --save

npm install webpack webpack-dev-server webpack-cli --save

npm install -g create-react-app

create-react-app myfirst-app

cd myfirst-app

npm start

Webpack is used for module packaging, development, and production pipeline automation. We will use webpack-dev-server during development, webpack to create production builds, and webpack CLI provides a set of commands. 

Webpack compiles these into a single file(bundle).

Babel is a JavaScript compiler and transpiler used to convert one source code to others. It compiles React JSX and ES6 to ES5 JavaScript which can be run on all browsers. We need babel-loader for JSX file types, babel-preset-react makes your browser update automatically when any changes occur to your code without losing the current state of the app. ES6 support requires babel-preset-env Babel preset.

ReactJS, have mainly two types of components. They are

1) Functional Components

Function components are a way to write components that only contain a render method and don't have their own state.

They are simply JavaScript functions that may or may not receive data as parameters.

The functional component is also known as a stateless component because they do not hold or manage state.

2) Class Components

The class component is also known as a stateful component because they can hold or manage local state.

The lifecycle of the component is divided into four phases. They are:

1) Initial Phase - The initial phase only occurs once and consists of the following methods.

getDefaultProps()

getInitialState()

2) Mounting Phase - the instance of a component is created and inserted into the DOM.

componentWillMount()

componentDidMount()

render()

3) Updating Phase - The main aim of this phase is to ensure that the component is displaying the latest version of itself. this phase repeats again and again. we get new Props and change State. This phase also allows to handle user interaction and provide communication with the components hierarchy.

componentWillRecieveProps()

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

4) Unmounting Phase - It is called when a component instance is destroyed and unmounted from the DOM.

componentWillUnmount()

React Features

1) JSX

JSX stands for JavaScript XML.

It extends the ES6 so that HTML like text can co-exist with JavaScript react code.

It is not necessary to use JSX, but it is recommended to use in ReactJS.

2) Components

ReactJS application is made up of multiple components, and each component has its own logic and controls.

3) One-way Data Binding

ReactJS follows unidirectional data flow or one-way data binding.

It is because components are supposed to be immutable and the data within them cannot be changed. 

Flux is a pattern that helps to keep your data unidirectional. 

4) Virtual DOM

A virtual DOM object is a representation of the original DOM object.

The DOM is a cross-platform and programming API which deals with HTML, XML or XHTML.

The DOM exists entirely in memory.

It works like a one-way data binding.

Any modifications happen in the web application, the entire UI is re-rendered in virtual DOM representation.

Then it checks the difference between the previous DOM representation and new DOM. Once it has done, the real DOM will update only the things that have actually changed. 

This makes the application faster, and there is no wastage of memory.

5) Simplicity

ReactJS uses JSX file which makes the application simple and to code as well as understand. 

6) Performance

React Hooks

Hooks are the new feature introduced in the React 16.8 version.

Hooks are the functions which "hook into" React state and lifecycle features from function components. 

It does not work inside classes.

React Flux

Flux is an application architecture that Facebook uses internally for building the client-side web application with React. 

Flux applications have three major roles in dealing with data:

1) Dispatcher

2) Stores

3) Views (React components)

React Redux

Redux is an open-source JavaScript library used to manage application state.

React uses Redux for building the user interface. 

It was first introduced by Dan Abramov and Andrew Clark in 2015.

React Redux is the official React binding for Redux. 

It allows React components to read data from a Redux Store, and dispatch Actions to the Store to update data.

What is JSX?

JSX is a syntax extension of JavaScript. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code.

What is the virtual DOM?

DOM stands for Document Object Model. The DOM represents an HTML document with a logical tree structure. Each branch of the tree ends in a node, and each node contains objects.

React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects.

What are the components in React?

Components are the building blocks of any React application, and a single app usually consists of multiple components.

A component is essentially a piece of the user interface. 

It splits the user interface into independent, reusable parts that can be processed separately.

There are two types of components in React:

1) Functional Components: These types of components have no state of their own and only contain render methods, and therefore are also called stateless components. They may derive data from other components as props (properties).

  function Greeting(props) {

    return <h1>Welcome to {props.name}</h1>;

  }

2) Class Components: These types of components can hold and manage their own state and have a separate render method to return JSX on the screen. They are also called Stateful components as they can have a state.

  class Greeting extends React.Component {

    render() {

      return <h1>Welcome to {this.props.name}</h1>;

    }

  }

Explain the lifecycle methods of components?

getInitialState() -  This is executed before the creation of the component.

componentDidMount(): Is executed when the component gets rendered and placed on the DOM.

shouldComponentUpdate(): Is invoked when a component determines changes to the DOM and returns a “true” or “false” value based on certain conditions.

componentDidUpdate(): Is invoked immediately after rendering takes place.

componentWillUnmount(): Is invoked immediately before a component is destroyed and unmounted permanently.

What are Pure Components in React?

Pure Components are Class Components that extend React.PureComponent.

If a class extend with Pure Component, there is no need for the shouldComponentUpdate() lifecycle method.

ReactJS Pure Component Class compares the current state and props with new props and states to decide whether the React component should re-render itself or not.

If the previous value of the state or props and the new value of the state or props are the same, the component will not re-render itself. Pure Components restricts the re-rendering when there is no use for re-rendering of the component.