A deeper look into React fundamentals

React.js is the most popular front-end framework for Web applications.

1. What is React?

React. js is a JavaScript library that is used for building user interfaces specifically for single-page applications. React allows web developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It’s used for handling the view layer for web and mobile apps as well as create reusable UI components.

2. What is DOM?

The Document Object Model (DOM) is a programming interface for HTML and XML documents and represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

To make any changes to one of the parts in the Dom will require you to change the whole part, which is not so efficient. Therefore, there is something known as virtual DOM in react.

3. What is virtual DOM?

In React, for every DOM object, there is a corresponding virtual DOM object. A virtual DOM object is an exact representation of a DOM object, like a lightweight copy.

A virtual DOM object has the same properties as a real DOM object, but it cannot directly change what’s on the screen.

Manipulating the DOM is slow. Manipulating the virtual DOM is much faster because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, without the need to move anywhere.

4. What is diffing?

• When you render an element, every single virtual DOM object gets updated.
• Once the virtual DOM has been updated, then React compares the virtual DOM with a virtual DOM snapshot that was made right before the update.
• By comparing the new virtual DOM with a pre-update version, React figures out which virtual DOM object has been updated. This process is called diffing.
• The changed objects only get updated on the real DOM and changes on the real DOM cause the screen to change.

5. JSX

JSX stands for JavaScript XML. It allows us to write HTML in React and makes it easier to add HTML in React.

JSX allows us to write HTML elements in JavaScript, which is in react and place them in the DOM without any createElement() and or appendChild() methods. JSX converts HTML tags into react elements.

6. React Component

React lets you define components as classes or functions.

• Mounting: It is when React renders the component for the first time and actually builds the initial DOM from those instructions.
• Unmounting: This method is called when a component is being removed from the DOM.
• Updating: An update can be caused by changes to props or state. There are many methods called in the order when a component is being re-rendered.
• Error handling: This method is called when there is an error during rendering, in a lifecycle method.

7. Use the Production Build to optimize the react app

• If your project is built with Create React App, then do ‘npm run build’ to. create a production build folder in your project.

8. Brunch

Another way to create a production build for better app optimization.

For the most efficient Brunch production build, install the terser-brunch plugin:

9. React is declarative

This means, in React you use declarative style to write your components.

We just tell React we want a component to be rendered in a specific way, instead of telling in which way it needs to be and we never have to interact with the DOM to reference it later.

10. Data goes down

In React data goes down the tree of the components.

If we want to pass data from parent to child component, we pass it as props to the child components in functional components

Props are like HTML attributes.

We can never pass data from the child to the parent component.