How to Create a simple React JS Function

  React renders HTML to the web page by using a function called ReactDOM.render().

   The ReactDOM.render() the function takes two arguments of HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the specified HTML element. These file help to render the details inside the index.html page. you will notice the <div> tag that contains the id.

Lets Print at chrome by React: 'I am learning React at Z4'

Open the vs code, Open a new file in the src folder with a name called index.js. 

Let's Import the react and ReactDOM on the JS file and create a function with ReactDOM. Like below!! 

import React from 'react';

import ReactDOM from 'react-dom/client';

function Name() {

  return <h2>Hi, I am learning React at Z4</h2>;

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Name />);

Note: Don't Worry about the code we will learn it in the future just try to copy it.

OUTPUT :

Then What is DOM vs Virtual DOM?

DOM (Document Object Model)

           It represents the structure of all nodes in an HTML document. It represents the UI of your application. It dynamically changes the content of the web page. It is an interface that allows the script of the document to update the content, style, and structure. With every change, the DOM gets manipulated and re-rendered to update the application UI, It affects the performance and makes it slower. Hence with more UI components and a complex structure of the DOM. The DOM updates will be more costly. 

Virtual DOM

           It is the Virtual representation of Real DOM. React update the state changes in Virtual DOM first and then it syncs with Real DOM. Virtual DOM is a programming concept where a Virtual representation. UI memory synced with REAL DOM libraries such as REACT DOM and this is known as reconciliation. To make the performance of the Real DOM better and faster, the concept of virtual DOM was introduced. The key difference is, for every change with every time, the virtual DOM gets instead updated of the Real DOM. virtual DOM is also like a tree structure. when a new node is added to the UI application, a node is added to the tree structure.

DOM	Virtual DOM
DOM stands for Document Object Model	V DOM stands for Virtual Document Object Model
It is the structural representation of an HTML document	It is the Virtual representation of Real DOM
It is an interface	It's like a blueprint
It can directly update HTML	It can't directly update the HTML
It updates slow	It updates fast
The DOM represents the document as nodes and objects	A virtual DOM represents the DOM objects, like a lightweight copy