- Like all living things even React Component  has a lifecycle means a component takes birth, grows by updates and then dies in a web browser.

- The Component lifecycle methods are various methods which are invoked at different phases.

Four phases of a React component

• Initialization

• Mounting

• Updation

• Unmounting

1) Initialization

In this phase the React component sets the initial states and default props. For this two methods being called are -

1. getInitialState - getInitialState method enables to set the initial state value, that is accessible inside the component via this.state.

2. getDefaultProps - getDefaultProps can be used to define any default props which can be accessed via this.props.

2) Mounting

After initialization, our React Component is ready to mount in the browser DOM. The methods which gets called in this phase are -

1. componentWillMount - It is executed just before the React Component is about to mount on the DOM.

- It is called before the render method is executed.

2. componentDidMount - This is the hook method which is executed after the component did mount on the dom.

- It is called as the render method has been executed.

3) Updation

This phase starts when the react component receives new updates. The component can be updated by two ways, sending new props or updating the state.

State Changes

1. shouldComponentUpdate

- It tells the React that when the component receives new props or state is being updated, should React re-render.

- This method should return true or false.

- By default, this method return true.

2. componentWillUpdate

- It is executed only after the shouldComponentUpdate returns true.

3. componentDidUpdate - It is executed when the new updated component has been updated in the DOM.

Props Changes

Any changes on the props object will also trigger the lifecycle and is almost identical to the state change with one additional method being called componentWillReceiveProps.

1. componentWillReceiveProps - It gets executed when the props have changed and is not first render.

The rest of the methods behave exactly same -

2. shouldComponentUpdate

3. componentWillUpdate

4. componentDidUpdate

4) Unmounting

In this phase, the component is not needed and the component will get unmounted from the DOM.

1. componentWillUnmount - This method is the last method in the lifecycle. This is executed just before the component gets removed from the DOM.

Key Terms in React JS

Key Terms in React JS

1) ECMAScript

-ECMAScript is a scripting-language standardization by ECMA International. React without ECMAScript 6 would be a plain JavaScript component.

2) Component 

-The entire application of React is modelled as a set of independent, reusable and isolated pieces called components.
- There are two ways the components receive data through :- Props or State

3) Properties / Props

- It is a way of passing data from parent component to child component.
- Props are immutable

4) State 

- State is managed within the component.
- It is used to store data about the component which can change over time. Thus, state makes a component dynamic and interactive

5) JSX (JavaScript Extension)

-  JSX allows us to include ‘HTML’ along with ‘JavaScript’
- React doesn’t require it but it is helpful in working with UI inside the JavaScript code.
- It is faster, easier and type safe.

6) Webpack

- Webpack is a popular module bundling system which generates a build file joining all the dependencies.
- It checks for import and require statement in files and builds a dependency graph.

7) Babel

- Babel is a JavaScript compiler that includes the ability to compile JSX into regular JavaScript.
- This is used because not all web browsers can render JSX along with ES6 directly.

Here is my video on Key Terms in React JS 

React Introduction - What, Why, Who

React Introduction - What, Why, Who

What is react ?

ReactJS is an open source JavaScript library Developed by Jordan Walke, a software engineer working at Facebook

Why React?

1) It makes easier developing a large Single Page Application (SPA) because it allows a developer to break down the complex UI into simpler components. We can reuse components as needed and compose bigger components from smaller ones.

2) React’s reconciliation algorithm – It implements  in Virtual DOM that makes the application fast. Virtual DOM allows ReactJS to know when exactly to re-render because it can detect when the data has changed.

Note - DOM (Document Object Model) is an object that is created by the browser each time a web page is loaded which can dynamically add or remove the data at the back end.

3) One-Way Data Binding - ReactJS follows unidirectional data flow or one way data binding. Which means the data flows in a single direction because of this application’s state is contained in specific stores. As a result, rest of the components remains loosely coupled and application is more flexible leading to increased efficiency.

4) React follow the principle of immutable data. It means we create the copies of object and replace them instead of modifying the original.

5) Server-Side Rendering(SSR): It you to pre-render the initial state of our react components at the server side only. By this the browser can now start rendering without having to wait for all the JavaScript to be loaded and executed. As a result, the webpage loads faster. Here the user will be able to see the web page instead of React downloading the JavaScript

Who uses React ?

Instagram web site and Facebook newsfeed section is developed with react and it is used by other companies such as PayPal, Uber, Apple and Airbnb.