React

M.Jeevan Babu
Assistant Professor
Department of CSE
VVIT,Guntur 1
 Introduction
• ReactJS is an open-source JavaScript library for
building dynamic and interactive user
interfaces(UIs).
• React is developed and released by Facebook.
• It is a simple, feature rich and component based
UI library.
• React develops applications by creating various
reusable and independent codes.
• his UI library is, thus, widely used in web
development.
• The latest version 17.0.1 is released 2020. 2
 Features
• JSX
• Components
• One-way Data Binding
• Virtual DOM
• Simplicity
• Performance

3
• JSX
– JSX stands for JavaScript XML. It is a JavaScript
syntax extension. Its an XML or HTML like syntax
used by ReactJS. This syntax is processed into
JavaScript calls of React Framework. It extends the
ES6 so that HTML like text can co-exist with
JavaScript react code.

4
• Components
– ReactJS is all about components. ReactJS
application is made up of multiple components,
and each component has its own logic and
controls. These components can be reusable
which help you to maintain the code when
working on larger scale projects.

5
• One-way Data Binding
– ReactJS is designed in such a manner that follows
unidirectional data flow or one-way data binding.
The benefits of one-way data binding give you
better control throughout the application. If the
data flow is in another direction, then it requires
additional features

6
• Virtual DOM
– A virtual DOM object is a representation of the
original DOM object. It works like a one-way data
binding. Whenever any modifications happen in the
web application, the entire UI is re-rendered in virtual
DOM representation. Then it checks the difference
between the previous DOM representation and new
DOM. Once it has done, the real DOM will update
only the things that have actually changed. This
makes the application faster, and there is no wastage
of memory.
7
• Simplicity
– ReactJS uses JSX file which makes the application
simple and to code as well as understand. We
know that ReactJS is a component-based approach
which makes the code reusable as your need. This
makes it simple to use and learn.

8
• Performance
– ReactJS is known to be a great performer. This
feature makes it much better than other
frameworks out there today. The reason behind
this is that it manages a virtual DOM. The DOM is
a cross-platform and programming API which
deals with HTML, XML or XHTML. The DOM exists
entirely in memory.

9
 Simple react project
• npm i -g npx // -g flag indicates global
installation
• Step 1: Create a React application using the
following command:
• npx create-react-app counter
• Step 2: After creating your project folder i.e.
counter, move to it using the
• following command:
• cd counter
10
Project Structure: It will look like the
following.

11
 Components
• Components in React serve as independent and
reusable code blocks for UI elements.
• They represent different parts of a web page and
contain both structure and behavior.
• They have the same purpose as JavaScript
functions and return HTML
• A UI is broken down into multiple individual
pieces called components.
• You can work on components independently and
then merge them all into a parent
component which will be your final UI. 12
Components

13
• Components promote efficiency and scalability in web
development by allowing developers to compose,
combine, and customize them as needed.
• Components in React return a piece of JSX code that
tells what should be rendered on the screen.

14
 Types of Components in React

• Functional Components
• Class based Components

15
 Functional Components

• Functional components are just like JavaScript

functions that accept properties and return a
React element.
• In React, function components are a way to
write components that only contain a render
method and don't have their own state.
• We can create a function that takes
props(properties) as input and returns what
should be rendered.
16
 example
function Car()
{
return <h2>Hi, I am a Car!</h2>;
}

17
 Class Component

• A class component must include the extends

React.Component statement.
• This statement creates an inheritance to
React.Component, and gives your component
access to React
• The component also requires
a render() method, this method returns HTML.

18
 Class component
class Car extends React.Component
{
render()
{
return <h2>Hi, I am a Car!</h2>;
}
}

19
 Rendering
• Before your components are displayed on
screen, they must be rendered by React.
• Imagine that your components are cooks in
the kitchen, assembling tasty dishes from
ingredients. In this scenario, React is the
waiter who puts in requests from customers
and brings them their orders. This process of
requesting and serving UI has three steps:

20
• Triggering a render (delivering the guest’s
order to the kitchen)
• Rendering the component (preparing the
order in the kitchen)
• Committing to the DOM (placing the order on
the table)

21
• Render in React JS is a fundamental part of
class components. It is used to display the
component on the UI returned as HTML or JSX
components. The ReactDOM.render() function
takes two arguments, HTML code and an
HTML element.

22
 Purpose of render()

• React renders HTML to the web page by using a

function called render().
• The purpose of the function is to display the specified
HTML code inside the specified HTML element.
• In the render() method, we can read props and state
and return our JSX code to the root component of our
app.
• In the render() method, we cannot change the state,
and we cannot cause side effects( such as making an
HTTP request to the webserver).
23
 State and Props

• In React props are a way to pass the data or

properties from parent component to child
components

• while the state is the real-time data available

to use within only that component.

24
 State
• A state is a variable that exists inside a
component, that cannot be accessed and
modified outside the component, and can
only be used inside the component
• Works very similarly to a variable that is
declared inside a function that cannot be
accessed outside the scope of the function in
normal javascript.
• State Can be modified using this.setState.
25
 Props

• React allows us to pass information to a

Component using something called props
• Props are objects which can be used inside a
component.
• In React props are a way to pass the data or
properties from parent component to child
components

26
 Hooks
• In React, Hooks are reusable
functions that provide access to state in React
Applications.
• Hooks were introduced in the 16.8 version of
React
• Hooks give access to states for functional
components while creating a React application
• It allows you to use state and other React
features without writing a class.
27
• Hooks like useState and useEffect enable you
to manage state, side effects, and other logic
within your existing functional components.

28
 Built-in React Hooks
• State Hooks
• Context Hooks
• Ref Hooks
• Effect Hooks
• Performance Hooks
• Resource Hooks
• Other Hooks

29
 State hook
• The React useState Hook allows us to track
state in a function component.
• State generally refers to data or properties
that need to be tracking in an application.
• o use the useState Hook, we first need
to import it into our component.
– import { useState } from "react";

30
• Initialize useState
– We initialize our state by calling useState in our
function component.
– useState accepts an initial state and returns two
values:
1. The current state.
2. A function that updates the state.

31
• Read State
-We can now include our state anywhere in
our component by using {}
• Update State
– To update our state, we use our state updater
function.
-The useState Hook can be used to keep track of
strings, numbers, booleans, arrays, objects, and
any combination of these!
32
 Forms
• Forms are an essential part of any application
used for collecting user data, processing
payments, or handling authentication.
• React Forms are the components used to
collect and manage the user inputs.
• These components include the input elements
like text field, check box, date input,
dropdowns etc.
• An Integral part of Web Application
33
• In HTML, form data is usually handled by the
DOM.
• In React, form data is usually handled by the
components.
• When the data is handled by the components,
all the data is stored in the component state.
• You can control changes by adding event
handlers in the onChange attribute.

34
• We can use the useState Hook to keep track of
each inputs value and provide a "single source
of truth" for the entire application.
• You can control the submit action by adding
an event handler in the onSubmit attribute for
the <form>:

35
 Fields
• Input fields
• Radio buttons
• Check boxes
• Textarea
• Submit
• Cancel

36
 Different forms
• Login
• Registration
• Reservation
• Application form

37
• In react JS ,there are 2 types of components to
develop forms
1. Controlled component
2. Un controlled component

38
 Controlled Component
• In React, Controlled Components are those in
which form’s data is handled by the
component’s state.
• It takes its current value through props and
makes changes through callbacks like onClick,
onChange, etc.

39
 Un Controlled Component
• Uncontrolled Components are the
components that do not rely on the React
state and are handled by the DOM (Document
Object Model.
• So in order to access any value that has been
entered we take the help of refs

40
41