Prepared by-

Prepared by-
Prof. Prerna
Prof. PrernaSolanke
Solanke
Introduction
● Open source Javascript library for building user interfaces.
● ReactJS was created by Jordan Walke, an engineer working
with Facebook and it is now maintained by Facebook.
● Used for front end web development.
● Organizations using React:
Walmart, Instagram, Facebook, Netflix, Atlassian, Uber Eats,
Airbnb, Dropbox, Meta, Yahoo, Khan Academy, Salesforce,
Pinterest, Skype, Myntra etc.
Introduction
● Famous of implementing virtual DOM.
● Think of jQuery but more structured.
● In the MVC (Model – View – Controller), React is the “View”
which is responsible for how the app looks and feels.
● React divides UI into multiple components, which makes the
code easier to debug and each component has its own
property and functions.
Features of React
1. JSX (JavaScript Syntax
Extension):
JSX is a combination of HTML
and JavaScript. JavaScript
objects can be embedded
inside the HTML elements.

2. Virtual DOM:
React uses virtual DOM which is an exact copy of real DOM. When
changes occur in React, it first updates the Virtual DOM. React then
compares the new Virtual DOM with the previous one through a
process called reconciliation.
Features of React
It efficiently computes
the minimal set of
changes and updates
only the affected parts
of the actual DOM,
rather than
re-rendering the entire
tree. This leads to
significantly better
performance.
Features of React
3. One-way Data Binding:
It is a one-direction flow. The data in react flows only in one
direction i.e. the data is transferred from top to bottom i.e. from
parent components to child components.

4. Performance:
React uses virtual DOM and updates only the modified parts. So ,
this makes the DOM to run faster.
Features of React
5. Extension:
React has many extensions that we can use to create full-fledged UI
applications. It supports mobile app development and provides
server-side rendering. const age = 12;
if (age >= 10)
6. Conditional Statements: {
<p> Greater than { age }
JSX allows us to write conditional </p>;
Statements. }
else
{
7. Simplicity
<p> { age } </p>;
}
Features of React
8. Component based:
Browser
React.js divides the web page into
multiple components as it is
component-based. Each component is a
part of the UI design which has its own
logic and design as shown in the below
image. So the component logic which is
written in JavaScript makes it easy and
run faster and can be reusable.
How does React JS work?
How does React JS work?
• React creates a virtual DOM in memory to update the browser’s
DOM. The virtual DOM will try to find the most efficient way to
update the browser’s DOM.
• Unlike browser DOM elements, React elements are simple objects
and are cheap to create.
• React DOM takes care of updating the DOM to match the React
elements. The reason for this is that JavaScript is very fast and it’s
worth keeping a DOM tree in it to speed up its processing.
• Although React was designed to be used in the browser, because of
its design allows it to be used on the server with Node.js as well.
ReactJS Environment Setup
● Install Node.js: Download and install Node.js which includes npm
(Node.js is an open-source, cross-platform runtime environment
that allows you to execute JavaScript code on the server-side).
● Verify Node.js and npm (open-source registry and package
manager for JavaScript software packages): Run node -v and npm -v
in your terminal to check installation.
● Install Create React App Tool:
npm install -g create-react-app
● Create a React Project:
npx create-react-app my-app
ReactJS Environment Setup
● Navigate to Project Directory:
cd my-app
● Start the React App:
npm start
This will start a development server, and your React app will be
available at http://localhost:3000.
● The following output will be
displayed in the browser:
ReactJS Environment Setup
To update open the project using any code editor tools e.g. visual studio code
Open the file App.js (The following will be default code )
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>Edit <code>src/App.js</code> and save to reload.</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer">
Learn React
</a>
</header>
</div>
);
}
Create a New React Project: “Hello World”
1. Open your terminal and run the following commands:
npx create-react-app hello-world-app
cd hello-world-app
npm start
This will create a new React project and start the development
server.

2. Edit the App Component

Open the src/App.js file in your project directory and replace the
existing code with the following:
Create a New React Project: “Hello World”

import React from 'react';

import './App.css';

function App() {
return (
<h1> Hello World! </h1>
);
}
export default App;
Create a New React Project: “Hello World”
3. Save and View the App
● Save the changes.
● Your app should
automatically reload.
● Open your browser and visit
http://localhost:3000, where
you'll see "Hello World"
displayed on the screen.
Create a New JSX application
Create a new component:
Inside your src folder, create a
file named Greeting.js with
the following code:
Cont…
Use the Greeting
Component: In the App.js
file, import and use this
component:
Cont…
Run the application: After saving the changes, the app will display a
greeting message like:

This is a basic example of how to use JSX within a React

component.