Basic Concepts Of Reactjs

Virtual DOM

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

Well, you may ask ” Isn’t the virtual DOM doing the same thing as the real DOM, this sounds like double work? How can this be faster than just updating the real DOM?”

This is because Virtual DOM is much faster than Real DOM.

How is Virtual DOM faster?

When new elements are added to the UI, a virtual DOM, which is represented as a tree is created. Each element is a node on this tree. 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.

The image below shows the virtual DOM tree and the diffing process.

How does React use Virtual DOM

Now that you have a fair understanding of what a Virtual DOM is, and how it can help with the performance of your app, let’s look into how React leverages the virtual DOM.
In React every UI piece is a component, and each component has a state. React follows the observable pattern and listens for state changes. When the state of a component changes, React updates the virtual DOM tree. Once the virtual DOM has been updated, React then compares the current version of the virtual DOM with the previous version of the virtual DOM. This process is called “diffing”.

Once React knows which virtual DOM objects have changed, then React updates only those objects, in the real DOM. This makes the performance far better when compared to manipulating the real DOM directly. This makes React stand as a high-performance JavaScript library.

In simple words, you tell React what state you want the UI to be in, and it makes sure that the DOM matches that state. The great benefit here is that as a developer, you would not need to know how the attribute manipulation, event handling or the manual DOM updates happen behind the scenes.

All these details are hidden from React developers, so that you can directly use these features. You just need to update the state of your components and rest is done by Reactjs itself.

More Information on Virtual DOM: https://www.geeksforgeeks.org/reactjs-virtual-dom/

JSX

JSX (JavaScript Syntax Extension and occasionally referred as JavaScript XML) is a React extension to the JavaScript language syntax which provides a way to structure component rendering using syntax familiar to many developers. It is similar in appearance to HTML.

React components are typically written using JSX, although they do not have to be as components may also be written in pure JavaScript. JSX is similar to another extension syntax created by Meta (formerly Facebook) for PHP called XHP.

As we discussed above, React works on Virtual DOM, so it won’t allow HTML as such (because those HTML tags, etc. will be part of Real DOM). JSX is used to make the Developers life easier so that they can write code in the language they are comfortable with (i.e. HTML).

As such, JSX is not a requirement for using React. Using React without JSX is especially convenient when you don’t want to set up compilation in your build environment. So, anything you can do with JSX can also be done with just plain JavaScript.

Here is the code is written in JSX:

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

It can be compiled to this code that does not use JSX:

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

If you’re curious to see more examples of how JSX is converted to JavaScript, you can try out the online Babel compiler.

The component can either be provided as a string, as a subclass of React.Component, or a plain function.

If you get tired of typing React.createElement so much, one common pattern is to assign a shorthand:

const e = React.createElement;

ReactDOM.render(
  e('div', null, 'Hello World'),
  document.getElementById('root')
);

If you use this shorthand form for React.createElement, it can be almost as convenient to use React without JSX.

Elements

Elements

This Article from React JS official contains:

• How to Render Element in DOM
• Update the Rendered Element using Set Interval
• See the magic of React, how it only re-renders the changed element only. (which needs any logic implementation from Developers End)

Components

State

Props

Hooks

References:

Virtual DOM: Medium.com Article

JSX: https://reactjs.org/docs/react-without-jsx.html