React Deepdive

REACT JS
ALPHA TO OMEGA
THIS BOOK
This book is written (typed) by
Ari, who hails from the South
and has keen interests in
Computer Science, Biology,
and Tamil Literature.
Occasionally, he updates his
website, where you can reach
out to him.
https://arihara-sudhan.github.io
⛥ World of React
ReactJS is a JavaScript
library used for building
user interfaces. It was
developed by Facebook
(Meta) and is widely used
for creating single-page
applications (SPAs), where
the entire application is
loaded once, and the
content is dynamically
updated without refreshing
the page. Following is an
example for a Single Page
Application.
It is a web page made with
React. On click a letter, it
won’t refresh the page but
take as to a changed page.
The page never reloads!
You can visit here. React

breaks down a user
interface into reusable,
components. Each
component is responsible
for rendering a part of the
UI and managing its own
state.
⛥ Components
Following are the separate
components of our page.
Component 1: LeftBar
Component 2: RightBar
Component 3: Vocab
Modular components can
be reused throughout an
application or across
multiple projects. Once a
component is created, it
can be reused wherever
its functionality is needed,
which reduces duplication
of code and speeds up
development. Bugs and
issues are easier to isolate
because they are typically
confined to a specific
component.
React's component-based
architecture promotes a
clear separation of
concerns. Each component
is responsible for one
piece of the UI and handles
both its own rendering
logic and, optionally, state.
Developers can collaborate
more easily. Since
components are self-
contained, multiple
developers can work on
different components
simultaneously.
⛥ Reflow and Repaint
In native web systems, the
actual DOM is manipulated
directly whenever there is
a change in the UI. This
means that each time a
change is made, whether
it's adding, modifying, or
removing elements, the
browser, recalculates the
layout of the page, repaints
the content (if necessary).
Manipulating the DOM
directly can trigger layout
recalculations and screen
redraws (called repaints).
These operations can be
quite expensive, especially
if many changes are
happening frequently or
across many DOM
elements. Accessing and
manipulating the DOM
frequently can be slow
because the DOM is not
optimized for rapid
changes. Each change
requires interaction with
the browser's rendering
engine, which is a costly
process.
Interacting with the
browser's rendering engine
is necessary because it
handles converting the
DOM into what users
visually see. If we're not
careful, native DOM
manipulation can cause
inefficient updates. For
example, making several
changes to the DOM
individually can lead to
performance bottlenecks.
React’s DOM update
process is different from
traditional DOM
manipulation in how it
minimizes the number of
direct updates to the actual
DOM. This is achieved
through the use of the
Virtual DOM, which allows
React to optimize
performance by making
efficient updates, rather
than triggering costly
reflows and repaints for
every change.
React uses an in-memory
Virtual DOM, which is a
lightweight copy of the
actual DOM. When a
component's state or props
change, React updates the
Virtual DOM first, rather
than the real DOM. This
enables React to batch
multiple updates and
compare the changes
more efficiently before
applying them to the actual
DOM.
Whenever a component’s
state or props change,
React automatically re-
renders the component by
updating the Virtual DOM.
This step happens entirely
in memory, so it’s much
faster than working with
the actual DOM. React
uses a process called
reconciliation to determine
what has changed
between the previous
Virtual DOM and the new
Virtual DOM.
React compares the two
versions using a diffing
algorithm, which identifies
only the specific parts of
the DOM that have
changed. Instead of
updating the entire page or
entire component, React
narrows down the changes
to the specific elements or
attributes that need to be
updated. This results in
fewer and more targeted
DOM operations.
Image Courtesy: GeeksforGeeks
React batches updates in a
way that multiple state
changes or DOM updates
are processed together,
rather than one at a time.
This further reduces the
number of direct DOM
manipulations, as React
can group changes and
make them all at once,
avoiding multiple reflows
and repaints. Once React
has determined the
minimal set of changes
needed (based on the
diffing process), it updates
the actual DOM with just
those changes.
This ensures that the
browser’s rendering engine
only recalculates the layout
or repaints for the specific
elements that were
affected, reducing
performance overhead. So,
the two phases are, Render
Phase (or "Reconciliation
Phase") and Commit Phase.
In Render phase, React
updates the Virtual DOM in
memory. When a
component’s state or props
change, React recalculates
the component’s new
Virtual DOM representation
by rendering the
component again. React
then uses its diffing
algorithm to compare the
new Virtual DOM tree with
the previous one, figuring
out the smallest set of
changes that need to be
applied to the actual DOM.
The render phase is purely
in memory.
It doesn’t interact with the
actual DOM yet, so no
reflows, repaints, or any
browser rendering tasks
happen during this phase.
Once the render phase is
complete, React moves to
the commit phase, where it
applies the calculated
changes from the Virtual
DOM to the actual DOM.
React batches the updates
to the actual DOM and
then commits the changes
all at once.
This minimizes the number
of interactions with the real
DOM, which helps improve
performance. During this
phase, React interacts with
the browser’s rendering
engine, triggering layout
recalculations, reflows, and
repaints as necessary
based on the changes.
⛥ REACT ABSTRACTS
React allows developers to
describe what they want
the UI to look like based on
the current state, rather
than managing the UI
updates manually. React
then takes care of the rest.
We describe what the UI
should look like based on
the current state, and React
takes care of updating the
actual DOM to match that
description.
If it is Vanilla JS, there will
be some imperative style in
the code.
Now, if it is React, it will be

like a description.
⛥ REACT IS A LIBRARY
React is not a framework.
Most people prefer React
because it gives more
flexibility. React lets us
piece together our app
however we want. An
opinionated structure is not
always loved. React didn’t
impose any constraints on
us. That’s worth something,
right? So, look at the
following picture.
Image Courtesy: Pretius
⛥ ECOSYSTEM
There are thousands of
packages we probably
don’t need! #JFF
⛥ INSTALL
React requires Node.js and
npm (Node Package
Manager) to be installed on
our machine. Download the
latest version of Node.js
from and install it.
https://nodejs.org
The easiest and

recommended way to set
up a React project is, using
create-react-app. It
automates the setup, so we
don’t have to manually
configure things.
Run the following
command to install create-
react-app globally (if you
haven’t done so already).
> npm install -g create-
react-app
Create a new React project
by running,
Replace "my-app" with the
desired name for your
project.
> npx create-react-app
my-app
You will see a strange
message of “Happy
Hacking”. Now, Navigate to
your project folder.
> cd my-app
Start the development
server.
> npm start
This will open our
application in the browser
at http://localhost:3000.
You will probably see a
logo of rotating atom.
We are ready now!

When we create a React
application using create-
react-app, it generates a
basic folder structure for
us. This structure is flexible,
and we can reorganize it as
our project grows, but it
provides a solid starting
point for small to medium
projects.
my-app/
├── node_modules/
├── public/
│ ├── favicon.ico
│ ├── index.html
│ ├── manifest.json
├── src/
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
├── .gitignore
├── package.json
├── README.md
├── yarn.lock or package-lock.json
node_modules/
This folder contains all the
installed dependencies
(packages) our project
needs. It is created when
we run npm install or yarn
install and stores third-
party libraries. we typically
don't touch this folder
directly.
public/
This folder contains static
files that are publicly
accessible. Here resides
the index.html: The only
HTML file in the project.
React injects our app into
the <div id="root"></div>
tag inside this file. It’s the
entry point for our app. The
icon displayed in the
browser tab, favicon.ico is
also here. Anything placed
in the public folder will be
accessible by URL. For
example, if we place an
image there, we can
access it by navigating to
http://localhost:3000/img.p
ng in development.
src/
It contains all the source
code for our React
application. index.js is the
entry point for our React
application. It renders the
root component (usually
<App />) into the DOM.
App.js is the main
component of our React
app. It’s where the content
and components of our
application start. We can
break down this file into
smaller components as our
app grows. Some css, test
files and logo will be there.
package.json
This file contains metadata
about the project and lists
the dependencies, scripts,
and configurations. It lists
all the libraries and tools
our project depends on.
The scripts section
specifies npm/yarn scripts
that can be run from the
command line.
package-lock.json
This file locks the exact
versions of our project’s
dependencies.
It ensures that every team
member and the
production environment
installs the exact same
versions of the
dependencies, avoiding
version conflicts. If we lost
all our modules in
node_modules/, we can
simply install them back by
npm install command as
long as we have this lock
file. Look at the following
memes for even more
good intuitions.
So, let’s clean our project
to look like the following.
Remove the lines where
you use the deleted
dependencies.

React Deepdive

Uploaded by

Copyright:

Available Formats

React Deepdive

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

React Deepdive

Uploaded by

Copyright:

Available Formats

REACT JS

You can visit here. React

Now, if it is React, it will be

The easiest and

We are ready now!

You might also like