Chapter: 4

ReactJS Essentials
Disclaimer
The content is curated from online/offline resources
and used for educational purpose only.
Source : https://www.simform.com/blog/why-use-react/
Source : https://nix-united.com/blog/why-use-react-native-for-mobile-app-development/
Learning Objectives
You will learn in this lesson:
• Understand the fundamental concepts of ReactJS.
• Apply knowledge to set up a React project using
Create React App.
• Analyze and differentiate between components in
React.
• Utilize props and state (useState) to manage dynamic
data in components.
• Implement event handling and form management in a
React application.
• Integrate external APIs into a React application.
Introduction to ReactJS
What is ReactJS?
• ReactJS is an open-source front-end JavaScript
library for building user interfaces.
• ReactJS is maintained by Facebook and a
community of individual developers and companies.
• It is widely used as a base in building single-page
websites and mobile applications.
• It is very easy to use, and it allows users to create
reusable UI components.

Source: https://mozumder-tushar02.medium.com/postmortem-of-react-js-in-simple-way-973fbfe7e52
• With vanilla JS, every minor UI change needs to
update the entire DOM
• React has a virtual DOM for efficient updates, which
Angular does not use. Why
• React updates only part of the page which needs to
be changed React.js
?
(Eg: React.js, Angular.js, Vue.js)
History of ReactJS

Source : https://2muchcoffee.com/blog/content/images/2021/02/history-of-react.png
Advantages of ReactJS

Source : https://www.icoderzsolutions.com/blog/wp-content/uploads/2023/12/major-advantages-of-react-js.png
Disadvantages of ReactJS
Here, are cons/ drawbacks of using ReactJS:
• Most of the code is written in JSX, i.e., Html and CSS are part of JavaScript , it can be quite confusing as
most other frameworks prefer keeping Html separate from the JavaScript code.
• The file size of ReactJS is large.

Source: https://www.knowledgehut.com/blog/web-development/pros-and-cons-of-react
React Architecture

Source : https://www.tutorialspoint.com/reactjs/reactjs_architecture.htm
Classroom Activity

Installation of NodeJS & React JS

GitHub Link
Understanding the File Structure
• Folder structure contains the files and folders that are
present in the directory.
• There are multiple files and folders, for example,
Components, Utils, Assets, Styles, Context, Services,
Layouts, etc.

Source : https://react.dev/
Features of React

• Currently, ReactJS gaining quick popularity as the

best JavaScript framework among web developers.
• It is playing an essential role in the front-end
ecosystem.

Source : https://www.tutorialspoint.com/reactjs/reactjs_features.htm
Essential things to understand about ReactJS
Understanding these essential concepts will provide a solid foundation for working with ReactJS and
building efficient, scalable web applications.

Source: https://www.rickybruner.com/img/resumelogos/jsx.png
Essential things to understand about ReactJS
What is JSX
• JSX stands for JavaScript XML.
import React from "react";
• JSX allows us to write HTML in React.
• JSX makes it easier to write and add HTML in
React. let i = 1;

const ele = <h1>This is sample JSX</h1>;

const element = (
<h1>{i == 1 ? "Hello World!" :
It somewhat looks like HTML and also uses a "False!"} </h1>
JavaScript-like variable but is neither HTML nor );
JavaScript. With the help of JSX, we have directly ReactDOM.render(element,document.getEleme
written the HTML syntax in JavaScript. ntById

Source : https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm
https://www.geeksforgeeks.org/reactjs-jsx-introduction/?ref=lbp
React Virtual DOM
• React JS Virtual DOM is an in-memory representation
of the DOM. DOM refers to the Document Object
Model that represents the content of XML or HTML
documents as a tree structure so that the programs
can be read, accessed and changed in the document
structure, style, and content.
• The main difference between the real DOM and the
virtual DOM is that the real DOM is the actual structure
of a web page in the browser, while the virtual DOM is
a lightweight copy of the real DOM that's used to
improve performance.

Source : https://www.geeksforgeeks.org/reactjs-virtual-dom/?ref=lbp
React Virtual DOM

Source : https://www.geeksforgeeks.org/reactjs-virtual-dom/?ref=lbp
React Components
• Components in React serve as independent and
reusable code blocks for UI elements. They represent
different parts of a web page and contain Functional Components
both structure and behavior. They are similar
to JavaScript functions and make creating and
managing complex user interfaces easier by breaking
them down into smaller, reusable pieces.
• Components let you split the UI into independent, Class Components
reusable pieces, and think about each piece in
isolation. This page provides an introduction to the
idea of components.
• A component is a piece of the UI (user interface) that
has its own logic and appearance. A component can
be as small as a button, or as large as an entire page.

Source : https://www.geeksforgeeks.org/reactjs-components/?ref=lbp
https://www.tutorialspoint.com/reactjs/reactjs_components.htm
Classroom Activity

• Write a code to create functional components in ReactJS

GitHub Link

• Write a code to create nested functional components in ReactJS

GitHub Link
Classroom Activity

• Write a code to create class components in ReactJS

GitHub Link
• Write a code to create nested class components in ReactJS

GitHub Link
When to use Class Components vs. Functional Components in React

Functional Components Class Components

• Use them for simple UI

rendering. • Use them when you need state
management or lifecycle
• When you don’t need state or methods.
lifecycle methods.
• For more complex logic and
• Ideal for presentational interactions.
components.
Props
• When React sees an element representing a user-defined component, it passes JSX attributes and
children to this component as a single object. We call this object “props”.
• Props stand for "Properties." They are read-only components
• Props are arguments passed into React components.
• Props are immutable so we cannot modify the props from inside the component
• Props are passed to components via HTML attributes.

Source : https://hygraph.com/blog/react-proptypes
Classroom Activity

• Passing a Function as a Prop

GitHub Link
• Passing an Object as a Prop

GitHub Link
State
• In React, state refers to the data that determines the behavior and appearance of components.
• State is mutable and managed within the component itself.
• The change in state over time can happen as a response to user action or system event.
• It can be set by using the setState() method and calling the setState() method triggers UI updates.
• It can only be accessed or modified inside the component or by the component directly.
• To set an initial state before any interaction occurs, we need to use the getInitialState() method.

Source : https://hygraph.com/blog/usestate-react
Classroom Activity

Counter UI

GitHub Link
Defining State
• State allows components to store local values
• State for a class component is initialised inside
constructor()
• To define a state, you have to first declare a default constructor(props) {
set of values for defining the component's initial super(props);
this.state = {
state.
count: 0 };
• To do this, add a class constructor which assigns an
}
initial state using this.state.
• The 'this.state' property can be rendered inside
render() method.
Changing the State
• We can change the component state by using the
setState() method and passing a new state object as
the argument.
State: Do Not Modify State Directly
• Using this.state to modify state won’t re-render a
component
• It will update the state though
• Use this.setState instead to update the state
Application of Props & State

State Props
Form Handling To manage the input values. To pass the form data and submit handlers to other
components
Todo List To manage the list of tasks and their To pass task data and handlers to child components
completion status
Counter To manage the counter value To pass the counter value and increment/decrement
handlers to child components
Profile Viewer To manage the profile data To pass the profile data to child components for
display
When to use Props vs. State

Props State

• When you need to pass data • When you need to manage data
from a parent to a child that changes over time.
component. • When the data is specific to a
• When the data is immutable and component and does not need to
should not change within the be shared.
child component. • For handling user inputs and
• For configuring child form data.
components with data or • For managing dynamic UI
behavior. elements and interactions.
• To pass callback functions for
event handling.
Classroom Activity

Using State-in-Class Components

GitHub Link
Classroom Activity

Create Advise Generator Application using ReactJS

GitHub Link
Handling forms and events
• Handling forms and events in ReactJS is essential for
creating interactive web applications.
• React makes this process straightforward by
providing mechanisms to manage state and handle
events in a declarative way.
Creating a Form Component

“Let's create a simple form component with input fields

for a user's name and email.”
Conclusion of handling forms and Events
• Handling forms and events in React involves
managing state and event handlers.
• The useState hook is essential for managing form
field values, and event handlers (onChange,
onSubmit) are used to update the state and handle
form submissions.
• This example demonstrates a simple form with input
fields for a user's name and email, showcasing how
to handle user input and form submission in a React
application

Source : https://www.alphalogicinc.com/blog/app-development-with-reactjs/
Classroom Activity

Create a simple React application that takes data from a user through a form and
displays it.
GitHub Link
Integrating API with React Application:
• Integrating an API with a React application is a
common task that involves fetching data from a
backend service and displaying it in your React
components.
• Here's a step-by-step guide on integrating an API with
a React application.
Creating a Component to Fetch Data
• Create a Component: Create a new component,
UserList.js, in the src directory.
Classroom Activity

Create a React application that displays the population of countries using an API
GitHub Link
Summary
Well done! You have completed this course and now
you understand about:
• Introduction to ReactJS
• Setting up a React project with Create React App
• Understanding components
• Props and state (use State)
• Handling forms and events
• Integrating API with React Application
Quiz
1. What is the primary purpose of using the create-react-app
command in ReactJS?

a) To create a new HTML file

b) To set up a new React project with a pre-configured development
environment
c) To install Node.js
d) To compile JSX into JavaScript

Answer: b
To set up a new React project with a pre-configured development
environment
Quiz
2. In React, what is the primary difference between a functional
component and a class component?
a) Functional components can only be used for rendering static
content, while class components can handle state and lifecycle
methods.
b) Functional components are written using function syntax, whereas
class components are written using ES6 class syntax.
c) Class components do not support props, whereas functional
components do.
d) Functional components are always faster than class components.

Answer: b
Functional components are written using function syntax, whereas
class components are written using ES6 class syntax.
Quiz
3. Which hook is used to add state to a functional component in React?

a) useEffect

b) useReducer

c) useState

d) useContext

Answer: c
useState
Quiz
4. How can you pass data from a parent component to a child component
in React?

a) Using the useState hook

b) Using props
c) Using the useEffect hook
d) Using the render method

Answer: b
Using props
Quiz
5. What is the primary benefit of using the Context API in React for
state management?

a) It allows for faster rendering of components.

b) It enables sharing state across multiple components without prop
drilling.
c) It simplifies the creation of class components.
d) It ensures that all components re-render automatically when the state
changes.

Answer: b
It enables sharing state across multiple components without prop drilling.
Reference
• https://www.geeksforgeeks.org/reactjs-tutorials/

• https://www.tutorialspoint.com/reactjs/index.htm
Thank you!