Unit – 3
React JS Babel, Virtual DOM & React DOM
Introduction
Babel is an open-source JavaScript compiler and transpiler that
allows using the latest JavaScript (ES6+) features, ensuring
compatibility across older and newer browsers. Babel enables
React developers to write clean, modern syntax without
worrying about browser limitations.
How Babel Works with ReactJS
React applications often use JSX syntax to define components.
Since browsers don’t natively understand JSX, Babel converts it
into standard JavaScript functions using the @babel/preset-
react plugin. This step is very important for seamless React
development.
Parsing: Babel reads the source code and converts it into
an Abstract Syntax Tree (AST).
Transformation: Applies transformations to the AST using
presets and plugins to handle JSX and ES6+ features.
Code Generation: Converts the transformed AST back into
JavaScript code.
Steps to Use Babel with React
Step 1: Create a directory for the project.
mkdir my-app
cd my-app
Step 2: Initialize the application using the following
command.
npm init -y
Step 3: Install the required React dependencies
npm i react react-dom
Step 4: Install webpack and babel using the command
npm i webpack webpack-cli @babel/core @babel/preset-env
@babel/preset-react babel-loader html-webpack-plugin
webpack-dev-server –save-dev
Step 5: Inside the scripts section of package.json file
add the following code
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
Step 6: Create the files named index.html, App.js,
index.js, webpack.config.js, .babelrc
Folder Structure
Dependencies
{
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
"dependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"
},
"devDependencies": {
"@babel/core": "^7.22.9",
"@babel/preset-env": "^7.22.9",
"@babel/preset-react": "^7.22.5",
"babel-loader": "^9.1.3",
"html-webpack-plugin": "^5.5.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
}
Step 7: Add the following code in index.html,
index.js, and App.js
HTMLJavaScriptJavaScriptJavaScript
<!--index.html-->
<html>
<head>
</head>
<body>
<div id="root"></div>
</body>
</html>
Step 8: Inside the .babelrc file add the following code
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Step 9: To run the application type the following
command in a web browser
npm start
Output
Key Features of Babel
ES6+ Compatibility: Converts ES6+ syntax (e.g., arrow
functions, classes) into ES5 syntax for older browsers.
JSX Compilation: Transforms JSX (JavaScript XML) syntax
used in React into regular JavaScript functions.
Plugin Support: Extensible with plugins to add custom
transformations and support experimental features.
Polyfilling: Introduces support for missing APIs in older
browsers via libraries like @babel/polyfill.
Code Optimization: Removes unused code and optimizes
the final bundle for production environments.
Babel Essential for ReactJS?
JSX Transformation: React’s declarative JSX syntax
relies on Babel to convert it into JavaScript code.
Future-Proofing: Developers can adopt the latest
JavaScript features without waiting for universal browser
support.
Ecosystem Integration: Babel seamlessly integrates
with tools like Webpack, ESLint, and testing frameworks.
ReactJS Virtual DOM
ReactJS Virtual DOM is an in-memory
representation of the actual DOM (Document
Object Model). React uses this lightweight JavaScript
object to track changes in the application state and
efficiently update the actual DOM only where
necessary.
Working of Virtual DOM
1. Rendering the Virtual DOM: React creates a virtual
representation of the UI as a tree of JavaScript
objects.
2. Updating State: It generates a new Virtual DOM
tree to reflect the updated state when the
application state changes.
3. Diffing Algorithm: React compares the new Virtual
DOM tree with the previous one using its
efficient diffing algorithm to identify the minimal
set of changes required.
4. Updating the Real DOM: React applies only the
necessary changes to the real DOM, optimizing
rendering performance.
Key Features of React’s Virtual DOM
Efficient Updates: By minimizing direct
interactions with the real DOM, React significantly
reduces rendering time.
Reconciliation Process: React’s reconciliation
efficiently updates the UI based on changes in the
Virtual DOM.
Batching Updates: Multiple state updates are
batched into a single re-render cycle, avoiding
unnecessary computations.
Cross-Browser Consistency: The Virtual DOM
standardizes behaviour across different browsers,
ensuring consistent rendering.
Component-Based Architecture: Virtual DOM
integrates seamlessly with React’s component-
based architecture, promoting modular and
reusable code.
Advantages of the Virtual DOM
Improved Performance: Reduces costly DOM
manipulations by batching updates.
Simplified Development: Developers focus on
component logic, leaving optimization to React.
Consistent Rendering: Abstracts browser-
specific rendering, ensuring uniform performance.
Better User Experience: Faster updates lead to
smoother interactions and enhanced user
satisfaction.
Disadvantages of the Virtual DOM
Memory Overhead: Maintaining Virtual DOM
trees consumes additional memory.
Learning Curve: Developers need to understand
concepts like reconciliation and diffing.
Not Always Optimal: For very simple
applications, the Virtual DOM may introduce
unnecessary complexity.
Difference between Virtual DOM &
Real DOM.
Real DOM Virtual DOM
Virtual DOM represent the
Real DOM represent
virtual/memory
actual structure of
representation of the
the webpage.
Webpage.
DOM manipulation is DOM manipulation is very
very expensive easy
There is too much
No memory wastage
memory wastage
It updates Slow It updates fast
It can directly update It can’t update HTML
Real DOM Virtual DOM
HTML directly
Creates a new DOM
Update the JSX if the
if the element
element update
updates.
It allows us to
It can produce about
directly target any
200,000 Virtual DOM
specific
Nodes / Second.
node (HTML element)
It represents the Ul It is only a virtual
of your application representation of the DOM
What is ReactDOM ?
The ReactDOM in React is responsible for rendering
the elements or Components in the actual DOM of
the web page. It is a package in React that provides
DOM-specific methods that can be used at the top
level of a web app to enable an efficient way of
managing DOM elements of the web page. ReactDOM
provides the developers with an API containing the
various methods to manipulate DOM. If you’re eager to
learn about advanced rendering techniques,
the ReactJS Course provides detailed lessons on using
ReactDOM effectively to optimize your applications.
How to use ReactDOM ?
To use the ReactDOM in any React web app we must
first install the react-dom package in our project. To
install the react-dom package use the following
command.
// Installing
npm i react-dom
After installing the package use the following command
to import the package in your application file
// Importing
import ReactDOM from 'react-dom'
After installing react-dom it will appear in
the dependenices in package.json file like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
}
Why ReactDOM is used ?
Earlier, React Developers directly manipulated the DOM
elements which resulted in frequent DOM manipulation,
and each time an update was made the browser had to
recalculate and repaint the whole view according to the
particular CSS of the page, which made the total
process to consume a lot of time.
To solve this issue, React brought into the scene the
virtual DOM. The Virtual DOM can be referred to as a
copy of the actual DOM representation that is used to
hold the updates made by the user and finally reflect it
over to the original Browser DOM at once consuming
much lesser time.
Features
ReactDOM.render() replaces the child of the given
container if any. It uses a highly efficient diff
algorithm and can modify any subtree of the DOM.
React findDOMNode() function can only be
implemented upon mounted components thus
Functional components can not be used in
findDOMNode() method.
ReactDOM uses observables thus provides an
efficient way of DOM handling.
ReactDOM can be used on both the client-side and
server-side.
