Simple Introduction to React.js

React is a library that used to create awesome user interface … hence it is a library it need some other tools to make a complete web application :

1 . Babel

Babel is an transpiler that convert our ES6/next generation code to ES5 and it’s also convert our JSX to react.createElement version .

2. Webpack

webpack is a code bundler that takes modules and bundles them into lower amount of web-readable static assets (HTML, CSS, JS) .

3 . React.createElement()

createElement() Create and return a new React element of the given type. This the alternative of JSX accullay under the hood every JSX element get converted into this format.

Example :

import React from 'react';
import ReactDOM from 'react-dom';
const element = React.createElement('div' , 'null' , 'Hello World')

4 . React.render()

the React.render() method used to render react element/component to the Browser DOM .

import React from 'react';
import ReactDOM from 'react-dom';
const element = React.createElement('div' , 'null' , 'Hello World');
ReactDOM.render(element , document.getElementById("root"))

5 . JSX :

JSX is an extension to JavaScript that allows us to write function calls in an HTML-like syntax. JSX is basically a compromise, instead of writing React components using the React.createElement() syntax, we use a syntax very similar to HTML and then use a transpiler to translate it into React.createElement() calls.

Example

const Button = () => {
  return <button> Click Me </button>
}

Same thing in react.createElement() API :

const Button = () => {
  return React.createElement('button', null , 'click me')
}

6 . Virtual DOM :

The virtual DOM is only a virtual representation of the DOM. Everytime the state of our application changes, the virtual DOM gets updated instead of the real DOM.

7 . Diffing Algorithm :

Diffing algorithm is that algorithm that work to compare between two virtual Dom and update to the real browser DOM based on the comparison result .

8 . Hooks

Hooks are special function , that can only be used React functional component not in class component. Every hook begins with the word “use” .

Example :

import React, { useState } from "react";const App = () => {
  const [count, setCount] = useState(0);
  return <div> {count} </div>;
};export default App;

9 . Class Component :

Before Hooks are introduced to React, class component was only the solution to create stateful component , hence after inducing hooks, use of class components are reduced but we can still write our component in class syntax .

Example :

class Button extends React.Component{
  render(){
    return <button>{this.props.label}</button>
  }
}
ReactDOM.render(<Button label="Click me"/> , document.getElementById('root'))

10 . React Fiber

React Fiber is the new reconciliation algorithm. Reconciliation is the process of comparing or diffing old trees with a new tree in order to find what is changed or modified. In the original reconciliation algorithm (now called Stack Reconciler), the processing of component trees was done synchronously in a single pass, so the main thread was not available for other UI related tasks like animation, layouts, and gesture handling. Fiber Reconciler has different goals:

• Ability to split interruptible work in chunks.
• Ability to prioritize, rebase, and reuse work in progress.
• Ability to yield back and forth between parents and children to support layout in React.
• Ability to return multiple elements from render().