Introduction to

React.js
 Overview
ReactJS is a component-based JavaScript library used to build dynamic and
interactive user interfaces. It simplifies the creation of single-page applications
(SPAs) with a focus on performance and maintainability.

● React is also known as React.js or ReactJS

● It is a tool for building UI components
● It is developed and maintained by Facebook
● The latest version of React is React 19
● Uses a virtual DOM for faster updates
● Supports a declarative approach to design UI components
● Ensures better application control with one-way data binding
Why name React?
● Events that can trigger updates in websites include user input, new data
coming into the application from other websites and data sources, and data
coming into the application from sensors
● Traditionally, the way that web applications have dealt with data that
changes over time is to refresh themselves every so often, checking for new
data in the process
● Facebook wanted to create a way to more easily build applications that
respond, or react to new data, rather than simply refreshing pages whether
the underlying data has changed or not
● Difference between pull and push data
● This method of updating a user interface in response to data changes is
called reactive programming
UI Layer
● MVC pattern in web application (Model-View-Controller)
● The Model: manages data and business logic, View: deals with
UI, Controller: intermediary between M and V
● React is only concerned with the V in MVC. It takes data as
input and presents it to the user in some form
● React doesn’t care whether the user is using a mobile phone,
a tablet, a desktop web browser, a screen reader, a command-
line interface, or any other kind of device or interface that
may be invented in the future.
● React just renders components
● The library that handles rendering of React components in web browsers is called
ReactDOM.
● To render React elements to native mobile apps, use React Native.
● To render React components to static HTML, use ReactDOMServer

● ReactDOM is what makes it possible for user interfaces built in React to handle the
quantity of screen changes required by modern web applications so efficiently. It
does this through the use of a Virtual DOM
 VIRTUAL DOM
● DOM in web page
● Accessing DOM through javascript
● Inefficiency of using DOM
● Jquery to make page update efficient
● Limitations of jquery - Although jQuery made DOM manipulation
easier, it left it up to programmers to program specifically when and
how changes to the DOM would happen

When the engineers at Facebook designed React, they decided to take

the details of how and when the DOM is modified out of the hands of
programmers. To do this, they created a layer between the code that
the programmer writes and the DOM. They called this intermediary
layer the Virtual DOM.
Working of Virtual DOM:

1. A programmer writes React code to render a user interface, which returns a single
React element
2. ReactDOM’s render method creates a lightweight and simplified representation of
the React element in memory (this is the Virtual DOM)
3. ReactDOM listens for events that require changes to the web page
4. The ReactDOM.render method creates a new in- memory representation of the web
page.
5. The ReactDOM library compares the new Virtual DOM representation of the web
page to the previous Virtual DOM representation and calculates the difference
between the two. This process is called reconciliation
6. ReactDOM applies just the minimal set of changes to the browser DOM in the most
efficient way that it can and using the most efficient batching and timing of changes.

(Figure 2-3 from reference book)

THE PHILOSOPHY OF REACT:
● Thinking in Components
● Composition vs. Inheritance
● React Is Declarative
● React Is Idiomatic Javascript
(Refer reference book for detailed notes: Page Number 15)
What React Is Not: (Refer reference book: Page Number 19)
Setting up environment

● Install Visual Studio Code

● Install Node.js
● Check installation of Node.js with following commands:
○ node -v
○ npm -v
 Intro to Create React App
● The most common way to get started with React is to use a node package called
Create React App
● React application can be used as a starting point for applications
● To install and run Create React App, use a command that comes as part of the npm
package manager called npx, npx is a package runner
● npx is similar to a combination of npm install and npm start
● To create a new React app using Create React App, use the npx command, followed
by create-react app, followed by a name that you want to give your new React app.
● For example: npx create-react-app my-new-app
Naming Your react App

The name you choose for your new app is up to you, as long as it conforms to the rules of
Node.js package names.

These rules are:

➤ It must be less than 214 characters long.

➤ The name can’t start with a dot or underscore.

➤ The name can’t have uppercase letters.

➤ It can’t contain any characters that aren’t allowed in URLs (such as ampersands and
dollar signs) and that are “unsafe” in URLs (such as the percent symbol and spaces).
Additional Rules:

➤ Keep it simple and as short as possible

➤ Use only lowercase letters

➤ Use dashes in place of spaces

➤ Don’t use the same name as a common Node.js package

Making First react App:

● Open terminal, change directory where you want to create new app
● Give the following command: npx create-react-app my-test-app
● When the installation and configuration of your new React app finishes, change to
the directory containing your new app by typing cd followed by the name you gave to
your app: cd my-test-app
● Start up your app by using the npm start command
● Wait and watch as your generated React app starts up and then opens in a browser
to reveal the React logo and a message
● Open another terminal, change to the directory containing your new app and give
following command to open the development environment of app in VS Code: code .
● open src/App.js, find the part of App.js that contains the code, change the text
between the <p> tags tags and then save App.js.
● Switch back to your browser, and notice that the browser window has updated to
reflect the change you made to App.js!
 JSX: JavaScript XML
JSX is an XML-based syntax extension to JavaScript

It’s a way to write JavaScript code using XML

JSX is an integral part of how every React developer writes components because it makes
writing components so much easier and has no negative impact in terms of performance
or functionality

JSX code get compiled in JavaScript code

Ways to write React Component

1. React components without using JSX by using the React.createElement method

2. React components by using JSX

const myElement1 = React.createElement('h1', {}, 'I do not use JSX!');

const myElement = <h1>I Love JSX!</h1>;

const myElement3 = React.createElement("label", {className: "inputLabel"},

"Search:",
const myElement4 = <label className="inputLabel">Search:<input type="text"
id="searchInput"/>
React.createElement("input", {type: "text", id: "searchInput"}));
SYNTAX BASICS OF JSX
All elements must be closed.

Elements that cannot have child nodes (so-called “empty” elements)

must be closed with a slash

Attributes that are strings must have quotes around them.

HTML elements in JSX must be written in all lowercase letters.

The class attribute becomes className.

The for attribute becomes htmlFor.

JSX uses camelCase

JSX Boolean Attributes

In HTML, the disabled attribute of input elements causes an input to not be changeable by the
user:

<input type="text" name="username" disabled>

In JSX, the value of an attribute can be omitted when it is explicitly true. So, to set the disabled
attribute of a JSX input element to true, you can do either of the following:

<input type="text" name="username" disabled = {true}/>

<input type="text" name="username" disabled/>

Use Curly Braces to Include Literal JavaScript:To include a variable
or a piece of JavaScript in JSX that shouldn’t be interpreted by the
transpiler, use curly braces around it
const name = "Ram";
const element = <h1>Hello, {name}</h1>;

Embedding Expressions:
const user = { firstName: "Soham", lastName: "Mishra" };
const element = <p>{user.firstName + " " + user.lastName}</p>;
Use Double Curly Braces with Objects: To include a JavaScript object literal inside of
JSX, the JSX code will have double curly braces
const style = {
color: 'green',
backgroundColor: 'lightgray',
};
<p style={{ fontSize: '18px', marginTop: '10px' }}>Inline styled</p>

Put Comments in Curly Braces: {/* Todo: Make this header dynamic */}
 Conditionals in JSX
Conditional Rendering with if/else and Element Variables: By using a conditional statement, you can
assign a different element to a variable and thus change what gets rendered
Conditional Rendering with the && Operator: Rather than having your conditional logic
outside of the return statement, you can write it inline by using the logical AND operator,
&&
Conditional Rendering with the Conditional Operator or ternary operator: The conditional
operator is a way to combine the simplicity and conciseness of inline conditional
rendering with the ability to have an else case that element variables combined with if
and else gives us
 Expressions in JSX
Any JavaScript expression inside of JSX or inside of React element attribute values
must be surrounded by curly braces

An expression is any valid unit of code that resolves to a value

➤ Arithmetic: 1+1

➤ String: "Hello, " + "World!"

➤ Logical: this !== that

 Props and state management in React
components.

In React, State allows components to manage and update internal data

dynamically, while Props enables data to be passed from a parent
component to a child component.
State in React
State is a built-in object in React components that holds data or
information about the component. It is mutable, which means it can be
updated within the component using the setState method in class
components or the useState hook in functional components.
Props in React
Props (short for Properties) are used to pass data from a parent
component to a child component. Unlike state, props are immutable,
meaning they cannot be modified within the receiving component.
Example State:
Example Props:
When to Use State and Props?
● Use State when you need to manage data that can
change over time within a component (e.g., form inputs,
counters, UI toggles).
● Use Props when you need to pass data from a parent
component to a child component to make components
reusable.