Become React pro developer

What is React?

React is JavaScript library for building fast and interactive UI (User Interface). It was developed at Facebook in 2013 and currently its most popular JavaScript library in the world.

Google Trends Report — November 2019

Popularity

React is used by leading brands namely Facebook, Instagram, Whatsapp, Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart and others.

Core Concept

The whole application logic run behind the “Virtual DOM” and “Real DOM”. For making interactive web, DOM manipulation is required and it is lot slower than most JavaScript operations.

To address this problem, the people at React popularized something called the Virtual DOM.

A Virtual DOM is an object representing a DOM object, like a lightweight copy. Thus manipulating Virtual DOM instead manipulating Real DOM becomes faster because nothing gets drawn onscreen.

When React Magic happen?

When you render an element or JSX element, every single virtual DOM object gets updated.

Once the virtual DOM has updated, then React compares the virtual DOM with a virtual DOM snapshot (another copy) that was taken right before the update.

By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called “diffing” or “Diff Algorithm”.

Dirty Checking process or Real DOM updating process

Virtual DOM updating process

What is Props?

Props is the data transferable unit that can be passed down to the Child Component. A child component can never send a prop back to the parent component. This help in maintaining the unidirectional data flow and are generally used to render the dynamically generated data.

• Props are immutable which lets React do fast reference checks.
• Props receive initial value from Parent Component.
• Props can be changed by Parent Component.
• Props enables component to be reused by receiving data from the component.

What is State?

State is referred to the local state of the component which cannot be accessed and modified outside of the component and only can be used & modified inside the component. States are the source of data and must be kept as simple as possible. Basically, states are the objects which determine components rendering and behavior.

• States are mutable unlike the props and create components dynamic and interactive.
• States are local to the component.
• States can be changed inside the component only.
• States can be accessed via this.state()

What is component?

Components let you split the UI into independent, reusable pieces. Basically, it is the main building block which collectively represents your React Application.

React Component

What is JSX?

const element = <h1>Hello, world!</h1>;

This funny tag syntax is neither a string nor HTML.

It is called JSX, and is a preprocessor step that adds XML like syntax to JavaScript. Simply put, this is where the HTML of your component goes.

Life-cycle of React Component

Every React Component has a life-cycle of its own, life-cycle of a component can be defined as the series of methods that are invoked in different stages of the component’s existence.

• Initialization - This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Class Component.
• Mounting (Growth of your component) - Mounting is the stage of rendering the JSX returned by the render method itself. This is done in the componentWillMount (this life-cycle method is deprecated in latest version of React 16.9), render, componentDidMount.
• Updating (Growth of your component) - Updating is the stage when the state of a component is updated and the application is repainted. This is done in the componentWillRecieveProps (for props only), shouldComponentUpdate, componentWillUpdate (this life-cycle method is deprecated in latest version of React 16.9) and componentDidUpdate.
• Unmounting (Death of your component) - As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page. This is done in the componentWillUnmount.

Event Handling

For example, the HTML:

<button onclick="activateLasers()">
  Activate Lasers
</button>

is slightly different in React:

<button onClick={activateLasers}>
  Activate Lasers
</button>

Another difference is that you cannot return false to prevent default behavior in React. You must call preventDefault explicitly.

Passing Arguments to Event Handlers

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button

Recap

• React is JavaScript library for building fast and interactive UI.
• React is faster due to its “Virtual DOM” which is achieved by “diffing algo”.
• Component is main building block of React which lets us to split the UI into independent, reusable pieces.
• Props is the data transferable unit that can be passed down to the Child Component.
• State is referred to the local state of the component which cannot be accessed and modified outside of the component.
• JSX is the syntax which allows us to write HTML/XML within Javascript.
• Life-cycle of a component are the different stages of the component’s existence.