web apps today both look and feel nicer than

what they did back in the day, there is something

even more fundamental that has changed.
Old School Multi-Page Design
New School Single-Page Apps
1.Virtual DOM 2.Real DOM 3.Shadow DOM
 The Document Object Model (DOM) is a programming interface for web
documents. It 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 interact with
the page
 the Virtual DOM and Real DOM are two critical components of web
application development. While the Real DOM is the browser's
representation of a web page's HTML structure, the Virtual DOM is an
abstraction of the Real DOM created and maintained by JavaScript libraries
such as React.
 The Shadow DOM is a browser technology designed primarily for scoping
variables and CSS in web components.
Single-page App (SPA) model

 Instead,modern apps tend to adhere to

what is known as a Single-page App (SPA)
model. This is a world where you never
navigate to different pages or ever even
reload a page. Instead, the different views
of your app are loaded and unloaded into
the same page itself.
What is React?

 React is one of the most popular front-end

JavaScript libraries in the field of web
development.
 It is mainly maintained by Facebook and a large
community of developers.
 Since Facebook maintains the library of ReactJS,
it is well-managed and up-to-date.

A number of large, established companies use it to
build their user interfaces and UI components.
 ReactJS has quickly gained popularity and is
supported by Facebook and Instagram. Many well-
known companies, including Apple and Netflix, Airbnb
use it.

 ReactJS may be used to create sophisticated user

interfaces for both desktop and mobile apps.
| What is Reacts js |

• React is a free and open-source front-end JavaScript

library for building user interfaces based on UI
components.
• It is created by Facebook.
 React is a JavaScript library for building user interfaces.
 React is used to build single-page applications.
 React allows us to create reusable UI components.
 React, sometimes referred to as a frontend JavaScript framework, is a
JavaScript library created by Facebook.
 React is a tool for building UI components.
Why use ReactJS?

 The key objective of ReactJs is to develop User

Interfaces that enhance the speed and
performance of applications by using virtual
DOM.
 | How to Use |
• React. js is an open-source JavaScript library that is used for
building user interfaces specifically for single-page applications.
• It's used for handling the view layer for web and mobile apps.
• React also allows us to create reusable UI components.
Features of React.JS

 JSX - It is an extension of ReactJS, which is not mandatory to be used but

very beneficial if used since it is very easy to use.
 Component: ​Components are similar to pure javascript functions, and they
serve to simplify the code by separating the functionality into reusable
independent code. Components can be used as functions and as classes.
Components also have a state, and props, which simplify lives. The status of
each prop is preserved within a class.
 Virtual DOM: React generates a virtual DOM, which is an in-memory data-
structure cache. Only the final DOM updates have been updated in the
browser's DOM.
 Javascript Expressions: Curly brackets, for example, can be used to insert JS
expressions into JSX files.
| Advantages of React |

1. Speed
2. Flexibility
3. Performance
4. Usability
5. Reusable Components
6. It helps to build rich user interfaces
7. It allows writing custom components
Limitations

 Themajority of the code is written in JSX, which

means that HTML and CSS are part of the
javascript code. This can be perplexing because
most other frameworks like to keep HTML
separate from the javascript code.
 ReactJS has a huge file size.
How React Works

 React creates a VIRTUAL DOM in memory.

 Instead of manipulating the browser's DOM directly, React
creates a virtual DOM in memory, where it does all the
necessary manipulating, before making the changes in the
browser DOM.
 React only changes what needs to be changed!
 React finds out what changes have been made, and
changes only what needs to be changed.
A content delivery network (CDN)

 A content delivery network (CDN) is a geographically

distributed group of servers that caches content close to
end users. A CDN allows for the quick transfer of assets
needed for loading Internet content, including HTML
pages, JavaScript files, stylesheets, images, and videos.
 The popularity of CDN services continues to grow, and
today the majority of web traffic is served through CDNs,
including traffic from major sites like Facebook, Netflix,
and Amazon.
Cross origin attribute

 The cross origin attribute sets the mode of the request to an

HTTP CORS Request. Web pages often make requests to load
resources on other servers. Here is where CORS comes in. A cross-
origin request is a request for a resource (e.g. style sheets,
iframes, images, fonts, or scripts) from another domain.

 <script crossorigin="anonymous|use-credentials“ src=“….”>

React using HTML
 Start by including three scripts,
 the first two let us write React code in our JavaScripts,
 and the third, Babel, allows us to write JSX syntax and ES6
in older browsers
 <script
src="https://unpkg.com/react@18/umd/react.development
.js" crossorigin></script>
 <script
src="https://unpkg.com/react-dom@18/umd/react-
dom.development.js" crossorigin></script>
 <script
src="https://unpkg.com/@babel/standalone/babel.min.js"
></script>
npm i react@latest react-dom@latest
| React Environment Setup|

There are two ways to set up an environment for successful

ReactJS application. They are given below.

1.Using the npm command

2.Using the create-react-app
command
| Create Components |
Components let you split the UI into independent, reusable pieces,
and think about each piece in isolation. This page provides an
introduction to the idea of components.
 React Environment
import React from 'react';
import ReactDOM from 'react-dom/client';
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<p>Hello</p>);