Let’s start with React.

Today, we’re starting out at the beginning. Let’s look at what React is and what makes it tick. We’ll discuss some features of it.

React is a JavaScript library for building user interfaces. It is the view layer for web applications. At the heart of all React applications are components. A component is a self-contained module that renders some output. So how react component create and how it works? Let’s see —

1) ReactDOM.render():

This is basically the entry point for a React application into the browser’s DOM. It has 2 arguments:

The first argument is WHAT to render to the browser. This is always a “React element”.

The second argument is WHERE to render that React element in the browser.

Example:

ReactDOM.render( 
 React.createElement( //first augument
 ‘div’, 
 null, 
 ‘Hello React’, 
 ),
 document.getElementById(‘mountNode2’), //2nd argument
 );

2) React.createElement():

Instead of working with strings to represent DOM elements in React we represent DOM elements with objects using calls to the React.createElement method. These objects are known as React elements.

The React.createElement function has many arguments:

The first argument is the HTML “tag” for the DOM element to represent, which may be div, li,ul,nav,header and so on.

The second argument is for any attributes (like id, href, title, etc.) we want the DOM element to have. If it has no attributes, so we can use null.

The third argument is the content of the DOM element. The optional third argument and all the optional arguments after it form the children list for the rendered element. An element can have 0 or more children.

Example:

ReactDOM.render(
 React.createElement(
 ‘div’, //first augument
 null, //Second arg
 ‘Hello React’, //3rd arg
 ),
 document.getElementById(‘mountNode2’),
 );

3) Transpiler:

A compiler that translates one form of syntax into another is known as a “transpiler”. To translate JSX we can use transpilers like Babel or TypeScript.

For example, the jsComplete playground uses TypeScript to transpile any JSX . When we use create-react-app, the generated app will internally use Babel to transpile your JSX.

4) JSX is not a template language:

When an HTML template is used, the library parses your application as a string. A React application is parsed as a tree of objects.

For example, for the todos array we’ve seen above, if we’re to display that array in a UI using a template language, we’ll need to do something like:

<ul>
 <% FOR each todo in the list of todos %>
 <li><%= todo.body %></li>
 <% END FOR %>
 </ul>

In a React application, there is no template language at all. Instead, we use JSX:

<ul>
  {todos.map(todo =>
    <li>{todo.body}</li>
  )}
</ul>

Which, before being used in the browser, gets translated to an object like as:

React.createElement(
  "ul",
  null,
  todos.map(todo =>
    React.createElement("li", null, todo.body)
  ),
);

5) Component vs element

A React Component is a template. A blueprint. A global definition. This can be either a function or a class (with a render method).

A React Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents

6) Benefits of component:

i) components make our code more readable and easier to work with.

ii) Without looking at the actual HTML code, we know exactly what this UI represents.

iv) if we need to modify the output of the remaining characters section we know exactly where to go.

iii) React components can also be reused in the same application

7) Virtual DOM:

The Virtual DOM is a node tree that lists elements and their attributes. Then React.render() method creates a node tree from react components and updates this tree in response of any action.Each time the data changes in a React app, a new virtual DOM representation of user interface.

It can be done by following steps:

i) Whenever anything get changed, the entire UI will be re-rendered in a virtual DOM representation.

ii) The difference between previous and the new virtual DOM will calculated.

iii) The real DOM will be updated with what has actually changed

8) How Diffing Algorithm works:

When new elements are added to the UI, virtual DOM creates a DOM tree by using each of the element of UI. If the state of any of these elements changes, a new virtual DOM tree is created. This tree is then compared or “diffed” with the previous virtual DOM tree.

Once this is done, the virtual DOM calculates the best possible method to make these changes to the real DOM. This ensures that there are minimal operations on the real DOM. Hence, reducing the performance cost of updating the real DOM.

9) Fiber:

Fiber is a new reconciliation algorithm for react which is an internal engine change that allows React to break the limits of the call stack. It’s creation enables React to pause/start rendering work at will. Eventually, React users will be able to hint at the “priority” of work.

The advantage of re-implementing is that now stack frames in memory can be execute anytime

10) Why Fiber and How it Works:

We create a tree of components. React takes this tree, walks through it, and creates a virtual model of the end result.

Now, as our app updates, React will do that process of creating the virtual result over and over again. Each time, it compares the previous virtual tree to the next one.

If we are rendering to the DOM, it could be that only one class on one element changed. React will walk through the virtual tree, find what’s changed, and update as little as it can.

This could mean updating one class attribute, or it could mean tearing down the whole DOM. This is Reconciliation.

With Fiber, there are now varying levels of priority for updates. Updating an input a user is typing into has higher priority than a list with thousands of components.

Fiber breaks tree computation into units of work that it can “commit” at any time. So what is a unit of work? It’s simply a node in your component tree!

1. React can now pause, resume, and restart work on a component. This means certain lifecycle hooks may fire more than once.

2. React can have a priority-based update system. This allows the React Team to fine tune the renderer so that React is fastest during the most common use cases.

That’s for today. Happy learning.