B.Sc.

(ECS)-III
Sem-VI
Type: DSE3-A
Course Title: Reacts
(Paper Code: Paper XVI)
Syllabus
Unit 1: Introduction to ReactJS [20]
Introduction, Workflow, Scope, Pros and Cons, Difference between JS and JSX, React Components overview,
Child Components, JSX expressions,
Building Blocks of ReactJS: JSX, Components, State and Props, Conditional Rendering, Why JSX, Advantages
of JSX, Expressions in JSX, Implementation of JSX, Creating a react component with jsx
Environment Setups: Node setup, How to use NPM, Npm and Setting Environment for ReactJS projects,
How to create package.json and purpose, IDE for ReactJS, ReactJS browser plugins overview. Components:
Types of components, Functional component vs Class Component, Converting Functional Components to
Class Components, Component Life Cycles and its different methods.
Unit 2: Conditional Rendering and List [10]
if-else Statement, logical & and operator, operators, Preventing Component from Rendering, Switch case
operator
List and Keys: react key prop, map function to iterate the List, References, use Refs, Create Refs, access
Refs, Event Binding types: Bind () method, Arrow function
Props and State: What is a state, use and role of the state, what are props, Props validation, Passing data
between multiple components, Managing Component State
Unit 3: Handling Events and Forms [10]
Lists of Form components, Setup Controlled and Uncontrolled form components, Control Input elements,
Form Submission and Validation, how to set default values on all formats of Input elements, Form
validations, writing Styles, Animations overview, Event, Event Binding, Event Handlers, Common React
Events, Key Events, Event Pooling, Synthetic Event.
Unit 4: Routing and State Management [20]
Introduction to React Router, History of Router, Single Page Application Overview, configure React
Router, Load the router library, Navigating between Routes, Route Parameters and Nested Routes,
Dynamic Routing, Nesting Routes, Invalid URL, Handle Conditional statement in JSX
State Management: Local State vs. Global State, State Lift-Up, Context API for Global State
Redux: Introduction to Redux, Redux Architecture- Actions, Reducers, and Store, Provider Component,
Dispatchers, View Controllers, Connecting React with Redux
Hooks: Introduction to Hooks, The useState hook, useEffect hook, Custom hook, useRef hook, useMemo
hook, The useContext hook, The useReducer hook, Another Hooks.

Introduction to ReactJS
ReactJS, a JavaScript library that was initially developed by Facebook for its internal use, has now become a
staple in the tech industry. It is widely adopted, from startups to big companies, and is used by over 40% of
web developers worldwide. In fact, it was the second most used web framework among developers
worldwide in 2023.
ReactJS is used in a wide range of applications. Some notable examples include Netflix's movie
recommendation system, Airbnb's search and booking system, and Uber Eats' food delivery tracking
system. These applications demonstrate the versatility and power of ReactJS in developing complex,
interactive, and user-friendly web applications.
ReactJS is primarily used to develop complex web applications. If you need to become more familiar
with It, this article will serve as an introduction. Additionally, we'll explore its applications, features, and a
ReactJS component to provide insight into its role in web development.
Need to launch a top-notch React application quickly? Our React development services have been trusted by
over 200 clients. Our efficient process gets your team set up in 48 hours, allowing you to focus on building
great software.
Role of ReactJS in Web Development World
Before we understand ReactJS's role in modern web development, let's first briefly understand the broader
picture of web development.
Let's break it down in plain English.
When we say web application development, we may refer to both the front and back end. The front end is
the part of the website that users interact with, while the back end handles the logic and data processing.
Several technologies exist today to power both ends of this spectrum.
React.js is used in front-end (client-side) development, specifically for a website's user interfaces. A popular
example of ReactJS development is Facebook's web app, which uses it to power several elements.
You might have observed the functionality of Facebook's web app, where tapping on elements doesn't
trigger a complete page reload. Instead, React.js efficiently updates the state of specific elements behind the
scenes.
ReactJS is used to develop dynamic web pages, which are web pages that can update their content or
appearance in response to user actions or changes in data. These pages offer users a smoother experience
compared to traditional pages that reload entirely with each interaction. ReactJS is particularly well-suited
for developing dynamic web pages, including single-page applications, mobile apps (with React Native),
complex user interfaces, real-time applications, and more.
If you are still trying to figure out after exploring the ReactJS features, don't worry. We'll also explore
various use cases of ReactJS to help you understand when it's an ideal choice and the types of applications
you can develop with it.
What is ReactJS?
React.js, often referred to simply as React, is an open-source JavaScript library for building user interfaces.
Its user-friendly nature allows for faster creation of web UIs, making it a go-to choice for world-renowned
brands, including Netflix, Salesforce, Instagram, Reddit, and countless organizations. With React, building
interactive web pages becomes a breeze.
As per the Stack Overflow 2023 Developer Survey, it is one of the most popular web frameworks.
Features of ReactJS
It follows a component-based architecture, a widely adopted approach for building modern applications.
Since modern applications require continuous upgrading, its component-based nature allows developers to
add new functionalities without rewriting the entire application.
Additionally, it provides an exclusive JSX language that promotes code maintainability and helps write
components more efficiently. Other key features of ReactJS include its ability to handle complex UI
updates, its support for server-side rendering, and its robust community and ecosystem. Let's look at some
key features of ReactJS that every developer should know.
1. JSX
JSX (JavaScript XML) is a JavaScript extension that allows you to write HTML-like code directly within
your React components. It's a powerful tool that enables you to keep your UI logic and data handling
together in a single place, enhancing code maintainability. While React allows you to write UI code without
JSX, using JSX can make your code more readable and promote a more organized and maintainable
codebase, making it a popular choice among React developers.
While React allows you to write UI code without JSX, you will find JSX to be a helpful tool as it allows you
to write the logic more readably and promotes a more organized and maintainable codebase.
2. Virtual DOM
DOM (Document Object Model) plays a crucial role in web application rendering. However, React takes a
different approach by utilizing a Virtual DOM.
React takes a unique approach to web application rendering by utilizing a Virtual DOM. In simple terms, the
Virtual DOM is a lightweight copy of the actual DOM, which is the structure of a web page. React creates
and maintains this virtual copy, allowing it to efficiently update only the necessary parts of the page when
the application's state changes. This approach minimizes browser work and improves rendering speed,
contributing to React's exceptional performance and responsiveness.
This creates a virtual copy because when your application state changes, React updates the virtual DOM
first. It then compares the virtual DOM with the real DOM to identify the minimal changes necessary. Only
the essential changes are applied to the actual DOM, minimizing browser work and improving rendering
speed.
React achieves lightning-fast rendering without directly manipulating the entire DOM, avoiding resource-
intensive operations. This optimization is a major reason React applications are renowned for their
exceptional performance and responsiveness. With React, you can be confident in the efficiency and speed
of your web applications.
3. Component-Based Architecture
React apps are built using reusable components. Each component represents a distinct UI part and
encapsulates its logic and representation. This component-based architecture makes building and
maintaining complex UIs easier, as each component can be developed and tested independently. It also
promotes code reusability, as components can be used in multiple parts of an application.
This approach is widely popular in the modern development. It lets you construct your UI by breaking
it down into reusable, independent components.
With JSX, you can efficiently construct components and create applications at a rapid pace. This is why it is
recommended that you write code in JSX in React to build complex UI and develop reusable components
efficiently.
4. Unidirectional Data Flow
In React, the data flows in a single direction, from top to bottom, i.e., from parent to child components
through properties. This unidirectional data flow is a key concept in ReactJS. It simplifies reasoning about
how changes in data will affect the UI and prevents unintended side effects. This makes it easier to
understand and debug React applications, and also contributes to the development of maintainable
applications.
This predictable data flow simplifies reasoning about how changes in data will affect the UI and prevent
unintended side effects. Furthermore, this unidirectional data flow is advantageous for developing
maintainable applications.
5. Components
React components are independent and reusable building blocks that define a part of a user interface. In
React, components can represent any part of your application's UI or functionality. They can range from
simple elements like buttons or colors to more complex components like forms, modals, navigation bars, and
entire sections of your application.
6. React Hooks
In React, there are two types of components: Functional components and class components. Functional
components enable writing code more straightforwardly and concisely. React Hooks, introduced in React
16.8, further enhance the functionality of functional components. They allow developers to manage state and
perform side effects within them, making it easier to reuse stateful logic between components.
Side effects are actions that occur outside the component's render function, such as data fetching,
subscriptions, or manually changing the DOM.
By utilizing Hooks, developers can achieve the functionality traditionally associated with class components
within functional components. We will delve deeper into functional components and class components later
in this article.
7. State
State in React is the internal data of a component. It encapsulates information that can change over time,
influencing the component's behavior and appearance. State is commonly used to handle dynamic data such
as user input, toggling UI elements, or managing component lifecycle events.
It is mutable, meaning it can be modified, triggering re-renders of the component to reflect the updated state.
8. Props
Props, short for properties, are immutable data passed from a parent component to a child component. They
serve as a means of communication between components, allowing data to be passed down the component
tree. This makes it easier to manage and update data in React applications.
Props facilitate the creation of flexible and modular components. They are commonly used to configure
child components, pass event handlers, or provide contextual information. Functional components,
especially with the widespread adoption of React Hooks, heavily rely on props to receive data and trigger
actions within the component.
 Use of ReactJS

Here are some of the common uses of ReactJS:

1. Building Single-Page Applications (SPAs)
ReactJS is a popular choice for building SPAs because it allows you to create dynamic and responsive UIs
that update without reloading the entire page, providing a smoother user experience.
2. Creating Reusable UI Components
A core strength of ReactJS is its emphasis on reusability. Developers can avoid code duplication and speed
up the development process by building components that encapsulate both UI and logic.
3. Developing Complex User Interfaces
React's component-based architecture makes it well-suited for building complex UIs with a lot
of interactivity. Components can be nested to create hierarchical structures, and state management solutions
like Redux can help manage complex application state.
4. SEO Optimization
React applications can be SEO-friendly by using techniques like server-side rendering (SSR) or static site
generation (SSG). This ensures that search engines can properly crawl and index your content.
5. Mobile App Development (with React Native)
React Native is a framework that allows you to use React skills to build native mobile apps for iOS and
Android. This can save development time and resources if you need to create a mobile app alongside your
web application.
Facebook, Instagram, Netflix, and Dropbox are real-world examples of ReactJS applications.

Conclusion
ReactJS is a versatile JavaScript library that can be used to build a wide variety of web applications. Its
focus on reusability, performance, and developer experience has made it one of the most popular choices for
front-end development today. With our React Development Services, you can create your ideal team
seamlessly. Whether you're looking to strengthen your current team or establish a proficient one from
scratch, we're here to realize your app vision.
Components Of ReactJS
Components in React are independent and reusable pieces that encapsulate UI(user interface) logic and
data.
There are two main types of React components:
Class components
These are traditional JavaScript classes that extend the `React.Component` class. Class components have a
render method that returns the UI for the component, as well as a number of lifecycle methods that allow
you to hook into different stages of the component's lifecycle (e.g., when the component is mounted,
updated, or unmounted).
Functional components
These are simply JavaScript functions that return JSX (JavaScript XML) code that describes the UI for the
component. Function components are generally simpler to write and use than class components, and they are
the preferred way to write React components in modern React applications.
Components can also be nested within other components, which allows you to build complex UIs by
composing smaller, reusable components. This hierarchical structure makes it easy to break down complex
UIs into manageable pieces.
Pros and Cons of ReactJS:
Pros of ReactJS

1. Component-Based Architecture:
o React follows a component-based architecture, where the UI is split into small, reusable
components. This makes it easier to manage and scale the application, as each component can
be developed, tested, and maintained independently.
o Components can also be reused across different parts of the application, reducing duplication
of code.
2. Declarative Syntax:
 o React uses a declarative programming model, meaning you describe what you want the UI
to look like and React handles how to update the UI when the state changes.
o This leads to a more predictable and easier-to-maintain codebase.
3. Virtual DOM:
o React uses a Virtual DOM, which is a lightweight representation of the actual DOM. When
the state changes, React first updates the Virtual DOM and compares it with the previous
version (using a process called Reconciliation).
o After the diffing process, only the necessary updates are made to the actual DOM, improving
performance significantly, especially in complex applications.
4. Efficient and Fast:
o Due to the Virtual DOM and efficient re-rendering, React offers excellent performance, even
for large applications.
o React minimizes the number of direct manipulations of the real DOM, which can be slow.
5. Wide Ecosystem and Community Support:
o React has a large, active community and is widely used by developers. This results in a rich
ecosystem of libraries, tools, extensions, and third-party integrations.
o It's easier to find tutorials, guides, and solutions to common problems, making the learning
curve more manageable.
6. Unidirectional Data Flow:
o React has a one-way data flow, where data moves from parent to child components via
props. This makes it easier to understand how data changes flow through the app.
o This unidirectional data flow ensures better control over how data is managed and passed
around, especially when using state management libraries like Redux or React Context.
7. React Hooks:
o React hooks (introduced in React 16.8) allow for the use of state and lifecycle features in
functional components. This improves code readability and eliminates the need for class
components in many cases.
o Popular hooks like useState, useEffect, useContext, and useReducer enable developers to
write cleaner and more maintainable code.
8. Cross-Platform Development:
o With React Native, developers can use React to build mobile applications for both iOS and
Android, sharing most of the codebase between web and mobile apps.
o This can lead to a more unified codebase across different platforms, reducing development
time and costs.
9. SEO Friendly:
o While React is primarily client-side rendered, tools like Next.js (a framework built on top of
React) enable server-side rendering (SSR) and static site generation (SSG), making React
apps SEO-friendly.
o This allows React apps to rank better in search engines compared to traditional client-side
rendered apps.
10. JSX Syntax:
 JSX (JavaScript XML) allows developers to write HTML-like code directly within JavaScript,
making it easier to visualize the structure of the component and simplifying the development
process.
 JSX combines the power of JavaScript with the familiarity of HTML, making it easier to work with.

Cons of ReactJS

1. Learning Curve:
o While React's core concepts are simple, there is a learning curve when it comes to more
advanced topics like state management (Redux, Context API), component lifecycle, and
hooks.
o Developers may also need to learn additional tools and libraries (like Webpack, Babel, React
Router, etc.), which can be overwhelming for beginners.
2. SEO Challenges (for Client-Side Rendering):
 o By default, React apps are rendered client-side, which can be problematic for search engine
optimization (SEO). Search engines may have difficulty indexing JavaScript-heavy content.
o While solutions like server-side rendering (SSR) or static site generation (SSG) exist (e.g.,
Next.js), they introduce complexity.
3. Frequent Updates and Changes:
o React has a fast-evolving ecosystem, with frequent updates and new features (like hooks)
being introduced. Keeping up with these changes can be time-consuming and may require
constant refactoring of codebases to stay up-to-date.
o Developers need to stay on top of new patterns and best practices to avoid using deprecated
features.
4. Requires Build Tools:
o React applications usually require build tools (e.g., Webpack, Babel) to bundle and transpile
code, which can be complex to configure.
o Even though tools like Create React App (CRA) simplify the setup, understanding how
these build tools work can be important for more advanced use cases.
5. Too Much JavaScript:
o React apps can often end up being heavily reliant on JavaScript, leading to large bundle
sizes. This can affect the initial loading time of your app, especially on slower networks.
o Optimizing bundle sizes requires techniques like code splitting and lazy loading, but this
adds additional complexity to the development process.
6. Overhead for Simple Projects:
o For small or simple projects, React may introduce unnecessary overhead. For basic websites
or apps that don't require a lot of interactivity, using React might be overkill compared to
traditional methods (e.g., simple HTML, CSS, and vanilla JavaScript).
o React’s component-based approach and the need for state management could be unnecessary
in such cases.
7. Boilerplate Code for State Management:
o Managing global state in large React applications can involve a lot of boilerplate code,
especially when using libraries like Redux or MobX.
o Setting up a global state with Redux, for example, requires actions, reducers, and connecting
components, which can be verbose and require additional setup for relatively simple state
management.
8. Performance Issues in Large Applications:
o Although React is optimized for performance with its Virtual DOM, in large, complex
applications with frequent updates or deeply nested components, performance issues can
arise.
o Developers may need to fine-tune performance using techniques like
shouldComponentUpdate, React.memo, or useMemo to avoid unnecessary re-renders.
9. JSX Can Be Confusing for Some Developers:
o JSX syntax combines HTML and JavaScript, which can be confusing for developers who are
used to working in pure HTML and JavaScript. The mix of both can lead to some readability
and maintainability concerns, especially when the code becomes large.
10. Not Truly MVC:
 React doesn’t adhere to the traditional Model-View-Controller (MVC) design pattern. While React
is excellent for rendering the View, developers often have to manually implement a Model (state
management) and Controller (logic, actions).
 This can make organizing large applications more challenging, requiring developers to find their own
patterns or use third-party libraries to manage application logic.

Summary
Pros:
 Component-based architecture, reusable components
 Virtual DOM for efficient rendering
 Unidirectional data flow
 Fast performance and scalability
  Large community, ecosystem, and library support
 Cross-platform development (React Native)
 JSX syntax for readability
 SEO improvements with SSR and SSG (Next.js)
Cons:
 Learning curve, especially with advanced patterns (e.g., hooks, state management)
 Client-side rendering SEO challenges (though solvable with SSR/SSG)
 Frequent updates and changes to the ecosystem
 Requires build tools like Webpack/Babel
 Too much JavaScript and large bundle sizes
 Overkill for small projects or static sites
 Boilerplate code in state management (Redux, MobX)
 Performance issues in complex apps (needs optimization)
 JSX can be difficult to read for some developers
ReactJS is a powerful and flexible library for building modern web applications, but its suitability depends
on the project’s complexity, scale, and the developer’s experience.

ReactJS workflow

A ReactJS workflow typically refers to the set of practices, tools, and processes that developers use to
build, test, and deploy React applications. The workflow can vary depending on the scale of the project, the
team's preferences, and the tools they adopt, but here’s a general outline of the modern React development
workflow:
1. Setting Up the Project
Option 1: Create React App (CRA)
 npx create-react-app my-app: A quick and easy way to create a new React project with a
sensible default configuration. It comes with React, Webpack, Babel, ESLint, and other tools pre-
configured.
Option 2: Custom Webpack/Babel Setup
 For advanced users or more customized configurations, you might want to manually set up Webpack,
Babel, ESLint, etc. This gives you more control but requires more initial setup.
Option 3: Vite
 A modern alternative to CRA, Vite offers faster build times and better developer experience with
support for hot module replacement (HMR) and a simpler configuration. To start with Vite, run:
bash
Copy code
npm create vite@latest my-app --template react
2. Development Environment Setup
Code Editor:
 A code editor like VS Code is popular among React developers, thanks to its rich ecosystem of
extensions.
o Extensions: Prettier, ESLint, ES7 React/Redux/GraphQL/React-Native snippets, etc.
Version Control:
 Git is the most widely used version control system. Set up Git repositories (on GitHub, GitLab, etc.)
to manage your codebase.
 Make use of branches (main, dev, feature/xyz) and commit early and often.
Dependency Management:
 npm or yarn to manage project dependencies.
 It's common to install key packages for React apps such as:
o react-router-dom for routing
o axios or fetch for making API calls
o redux or react-query for state management (optional)
3. Component Design and State Management
 Component-Based Architecture: React uses a component-based approach, where each part of the
UI is a separate reusable component.
 State Management:
 o Local State: Manage with React’s useState hook.
o Global State: Use Context API or libraries like Redux, Recoil, or Zustand for more
complex state management.
o Async Data Management: Use React Query or SWR for fetching and caching data from
APIs.
Folder Structure: You can organize your app’s components, hooks, utilities, and state in various ways. A
common structure might look like this:

4. Styling
CSS in JS:
 React developers typically use CSS-in-JS libraries, such as:
o styled-components
o emotion
o @stitches/react
o These libraries allow for dynamic, scoped, and themeable styles within your components.
CSS Frameworks:
 If you prefer traditional CSS, you might use a utility-first CSS framework like Tailwind CSS, or
something more component-based like Material-UI (MUI) or Ant Design.
Preprocessors:
 For more advanced CSS, preprocessors like SASS or SCSS are often used, especially for larger
projects.
5. Development Tools
 Hot Module Replacement (HMR): Most modern bundlers (Webpack, Vite) support HMR to
instantly apply code changes without needing a full page reload.
 React DevTools: A browser extension that helps with debugging React applications, allowing you to
inspect the React component tree, state, and props.
 ESLint & Prettier: For maintaining code quality and consistent formatting, integrate ESLint for
linting and Prettier for automatic code formatting. Many developers also use Husky to enforce pre-
commit hooks.
6. Testing
 Jest: The most common testing framework for React applications. It can be used for unit tests,
integration tests, and mocking API calls.
 React Testing Library: Works in conjunction with Jest for testing React components. It encourages
testing components from the user’s perspective by interacting with them as an end user would.
 Cypress or Playwright: For end-to-end (E2E) testing. These tools allow you to test your app as a
whole by simulating real-world user interactions.
7. Build Process
 Webpack / Vite: Both tools handle the bundling and optimization of your JavaScript, CSS, and
images. Vite is considered faster and more modern, while Webpack is more flexible and widely used.
 Tree Shaking: Both tools remove unused code from the final bundle to reduce the size.
 Code Splitting: Helps break down large bundles into smaller pieces that are loaded as needed
(dynamic imports).
 Babel: Transpiles modern JavaScript and JSX code into a format supported by all browsers.
8. Code Quality & Collaboration
 Prettier: Automatically formats your code, ensuring a consistent style throughout the project.
 ESLint: Static analysis tool to find and fix problems in your JavaScript code, enforcing code style
rules.
  Husky: Allows you to set up Git hooks, such as pre-commit hooks for linting and formatting before
pushing code to the repository.
9. Deployment
 Static Site Generators: If you’re building a static site, you can use platforms like Vercel or Netlify
for instant deployment.
 Docker: For more complex setups, Docker can be used to containerize your app and manage its
deployment with services like AWS or Azure.
 CI/CD: Set up continuous integration and continuous deployment with tools like GitHub Actions,
GitLab CI, or CircleCI to automatically run tests, build the app, and deploy it to production.
10. Performance Optimization
 Lazy Loading: Use React’s React.lazy and Suspense to load components only when needed,
improving performance by reducing initial bundle size.
 Image Optimization: Tools like ImageOptim, or using next/image if using Next.js, can help
optimize images.
 Code Splitting: Bundle your app in smaller chunks, so the browser only loads the necessary code
when needed.
 Caching: Use service workers or caching strategies to improve app performance and offline
capabilities.
11. Monitoring & Analytics
 Google Analytics or Mixpanel for tracking user behavior.
 Sentry or LogRocket for error tracking and performance monitoring.
 Performance Monitoring: React itself comes with tools to measure performance (e.g., React.memo,
useMemo, and useCallback for optimization). You can also use the built-in browser performance
tools.
Example React Workflow:
1. Initialize the project:
npx create-react-app my-app
2. Install dependencies:
npm install axios react-router-dom styled-components
3. Build components and pages in the src/components and src/pages directories.
4. Write tests:
Use Jest and React Testing Library to write unit tests and ensure component behavior.
5. Format code and lint:
Run npm run lint and npm run format before committing. Set up husky hooks.
6. Deploy:
Push the code to GitHub and deploy using Vercel or Netlify.
7. Monitor:
Use tools like Sentry to track errors and analyze performance.
This is a flexible and scalable workflow, and you can modify it according to the needs of your project, team,
or organization.
Steps to cerate reactApp without IDE

D:\>mkdir reactApp

D:\>cd reactApp

D:\reactApp>node -v
v22.12.0

D:\reactApp>npm -v
10.9.0

D:\reactApp>npm install -g create-react-app

D:\reactApp>npm config set legacy-peer-deps true

 D:\reactApp>create-react-app my-app

D:\reactApp\my-app>npm install --save-dev ajv@^7

D:\reactApp\my-app>npm start

React Directly in HTML (Like AngularJS)

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.
This way of using React can be OK for testing purposes, but for production you will need to set up
a React environment.
//first.html
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>

<div id="mydiv"></div>

<script type="text/babel">
function Hello()
{
return <h1>Hello World!</h1>;
}
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
root.render(<Hello />)
</script>
</body>
</html>

Scope in ReactJS

In ReactJS, scope generally refers to the context in which variables, functions, and components are
accessible within the application. React, like JavaScript, has its own rules regarding scope that are important
to understand when working with components, state, props, and events.
1. Scope of Variables
 Global Scope: Any variable or function declared in the global context (outside of any function or
component) is accessible across your entire JavaScript application.
o Example:
// app.js
let globalVar = 'I am global';
function App()
{
console.log(globalVar); // Accessible here
return <div>{globalVar}</div>;
}
 export default App;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

 Function Scope: Variables declared within a function are only accessible within that function.
o Example:
//app.js
function App() {
let localVar = 'I am local';
console.log(localVar); // Accessible here
return <div>{localVar}</div>;
}
console.log(localVar); // Error: localVar is not defined
export default App;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

 Block Scope (let & const): Variables declared using let or const inside a block (such as inside an if
or for loop) are only accessible within that block.
o Example:
//app.js
function App() {
if (true) {
const blockScopedVar = 'I am block scoped';
console.log(blockScopedVar); // Accessible here
}
console.log(blockScopedVar); // Error: blockScopedVar is not defined
}
export default App;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

2. Component Scope
 Local Component State: Each component in React has its own local state, which is scoped to that
specific component. You can use React hooks like useState to manage the state of a component.
o Example:
//app.js
import { useState } from 'react';
function Counter()
{
 const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Counter;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Counter from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Counter />);

 The count and setCount variables are scoped to the Counter component, so they can’t be accessed
outside of it.
 Props: Props are values passed from a parent component to a child component. These are not
mutable by the child component and are scoped to the child component that receives them.
o Example:
//app.js
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return <Greeting name="Sangola" />;
}
export default App;

//index,js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

 In the example above, props.name is scoped to the Greeting component and cannot be modified by it,
as props are read-only.
3. Event Handlers Scope
React events (like onClick, onChange, etc.) are often defined as methods or functions inside a component.
These event handlers need to be bound to the correct scope to access this (in class components) or
state/props (in functional components).
 Class Components: In class components, event handlers usually need to be bound to the component
instance to maintain the correct this reference.
//app.js
import React from 'react';
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
this.increment = this.increment.bind(this); // Bind `this` to the method
}
increment() {
this.setState({ count: this.state.count + 1 });
 }
render() {
return (
<div>
<p>{this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
export default Counter;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Counter from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Counter />);

 Functional Components: In functional components, the scope of event handlers is automatically

bound to the component, thanks to the closure properties of JavaScript. Using hooks like useState or
useEffect, the state and functions can be accessed directly.
//app.js
import { useState } from 'react';
import React from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1); // Automatically scoped

return (
<div>
<p>{count}</p>
<button onClick={increment}>Increment by function</button>
</div>
);
}
export default Counter;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Counter from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Counter />);

4. Scope in Context API

React’s Context API is a powerful feature that allows you to share state across components without passing
props down manually at every level. This creates a shared scope that any component in the tree can access if
it consumes the context.
Example of defining and consuming context:
//app.js
import { useContext } from 'react';
import React from 'react';
const ThemeContext = React.createContext('light'); // Default value

function App() {
return (
<ThemeContext.Provider value="dark">
<Child />
 </ThemeContext.Provider>
);
}
function Child() {
const theme = useContext(ThemeContext); // Consuming context
return <div>Current theme: {theme}</div>;
}
export default App;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

In this example, ThemeContext.Provider defines a scope for the theme value, which is accessible in Child
via useContext.
5. Scope in useEffect and useCallback
 useEffect: The useEffect hook allows you to manage side effects in your components. The scope of
variables within useEffect can be tricky, especially when dealing with asynchronous code. React
ensures that the latest state is always available inside the effect when the component re-renders.
o Example:
//app.js
import { useState,useEffect } from 'react';
import React from 'react';
function Counter() {
const [count] = useState(0);
useEffect(() => {
console.log(count); // Latest state value
}, [count]);

return <div>{count}</div>;
}
export default Counter;
//index,js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Counter from './App';

const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);

 useCallback: If you're passing a function down to child components, useCallback can help ensure
that the function reference is stable (i.e., doesn't change on every render). This helps to preserve the
scope of the function and prevent unnecessary re-renders.
6. Component Scope in React Router
When using React Router for navigation, the scope of route components can vary depending on whether
they are inside Routes or if they are connected via hooks like useParams or useLocation. These hooks give
you access to route parameters, history, and other routing-related data, creating a scoped context for the
routes.

Summary of Key Scopes in ReactJS:

1. Global scope: Variables accessible throughout the app (be cautious with it).
2. Component scope: Variables like state and functions are scoped to the component.
3. Props scope: Read-only data passed from parent to child components.
4. Event handlers scope: Handlers maintain access to the component's state and props.
5. Context scope: Shared state across components via Context API.
 6. Hook-specific scope: React hooks like useState, useEffect, and useContext create their own scoped
environments within components.
Understanding the scope in React helps ensure that components are modular, maintainable, and free of
unwanted side effects or access violations.

JavaScript (JS) and JSX

The difference between JavaScript (JS) and JSX is mainly in their syntax and usage, particularly in the
context of React development. Here's a detailed breakdown:
1. Definition
 JavaScript (JS):
o JavaScript is a programming language that is used for building dynamic content on web
pages. It provides logic, control structures, event handling, and data manipulation. JavaScript
is executed by the browser or a JavaScript engine (like Node.js).
o It is a general-purpose scripting language used for tasks such as manipulating the DOM,
handling events, and making AJAX requests.
 JSX (JavaScript XML):
o JSX is a syntax extension for JavaScript, primarily used with React. It allows you to write
HTML-like code inside JavaScript files. JSX combines the structure of HTML with the
power of JavaScript, enabling you to define UI components declaratively.
o Although JSX looks similar to HTML, it is ultimately converted into JavaScript that can be
executed by the browser (React uses a tool like Babel to compile JSX into regular
JavaScript).
2. Syntax
 JavaScript (JS):
o JavaScript is written in standard programming syntax using variables, functions, control
structures, and objects. Here’s an example of standard JavaScript code:
function greet(name) {
return "Hello, " + name;
}
let greeting = greet("Sangola");
console.log(greeting); // Output: Hello, Sangola
 JSX:
o JSX looks like HTML but can be embedded in JavaScript code. It enables you to define the
structure of the UI inside React components. For example:
function Greeting(props) {
return <h1>Hello, {props.name}</h1>;
}
o In this example, <h1>Hello, {props.name}</h1> is JSX syntax used inside the Greeting
component. It looks like HTML, but it’s actually JavaScript code.
3. How They're Used
 JavaScript (JS):
o JavaScript is used to write logic for your application, including functions, loops, conditionals,
and event handlers. It can manipulate the DOM, handle asynchronous tasks, and perform
other tasks within a web page or web application.
o Example:

const element = document.createElement("div");

element.textContent = "Hello, World!";
document.body.appendChild(element);
 JSX:
o JSX is specifically used in React components to describe how the UI should look. It allows
you to define React elements and components in a more readable, declarative manner.
o JSX gets converted into React.createElement() calls. For instance:
 const element = <h1>Hello, World!</h1>;
This JSX code is converted by React into something like:
const element = React.createElement("h1", null, "Hello, World!");
4. React-Specific
 JavaScript (JS):
o JavaScript is used in all kinds of web development, from DOM manipulation to making
AJAX calls, writing functions, handling events, and more. It is not specific to React.
 JSX:
o JSX is React-specific. It provides a more intuitive way to write UI code by allowing you to
embed HTML-like structures inside JavaScript. JSX is not required to work with React, but
it’s highly recommended because it simplifies component structure and makes the code more
readable and maintainable.
5. HTML vs JSX Syntax
 HTML (in JSX):
o JSX uses HTML-like syntax, but there are some important differences:
 Attributes: In JSX, attributes like class in HTML are written as className because
class is a reserved keyword in JavaScript.
 Self-closing Tags: In JSX, tags like <img />, <br />, and <input /> must be self-
closing (even if the tag is empty).
 JavaScript Expressions: You can embed JavaScript expressions inside JSX using
curly braces {}. For example:
const name = "Sangola";
const element = <h1>Hello, {name}</h1>;
6. Compilation (Transpiling)
 JavaScript (JS):
o JavaScript code is directly interpreted and executed by browsers or Node.js. No special
processing or transpiling is required.
 JSX:
o JSX is not valid JavaScript by itself and needs to be transpiled into standard JavaScript
before it can be executed. React typically uses Babel to transpile JSX into
React.createElement() calls.
o For example, JSX:

const element = <h1>Hello, World!</h1>;

gets transpiled to JavaScript as:
const element = React.createElement('h1', null, 'Hello, World!');
7. Debugging
 JavaScript (JS):
o JavaScript code is straightforward to debug with browser dev tools, and it is executed
directly, so debugging is simpler.
 JSX:
o Debugging JSX code might require a little more work since the browser cannot understand
JSX directly. It will first need to be transpiled into JavaScript. However, tools like React
DevTools make it easier to debug React components and JSX.
8. Use in React:
 JavaScript (JS):
o In React, JavaScript is used for writing logic, handling events, managing state, and
interacting with APIs. It is the foundation of React applications.
 JSX:
o In React, JSX is used to describe the UI. It allows you to write components in a way that is
declarative and looks like HTML, but is actually JavaScript under the hood.
 Feature JavaScript (JS) JSX
Definition A programming language for web development. A syntax extension for JavaScript used in React.
Syntax Standard JavaScript syntax (functions, variables, etc.) HTML-like syntax within JavaScript.
Use Used for logic, event handling, and manipulation. Used to define UI components in React.
Compilation Directly executed by the browser or Node.js. Needs to be transpiled to JavaScript (React).
Attributes Standard HTML attributes (e.g., class, id). React-specific attributes (e.g., className).
Compatibility Works anywhere JavaScript runs (browser, Node.js). Works only in React, as it needs transpilation.
Embedding JavaScript Plain JavaScript code. JavaScript expressions are embedded in curly braces {}.
Self-Closing Tags Standard HTML rules (e.g., <br>, <img>). Tags must be self-closing, e.g., <img />.

Advantages of JSX
 Declarative Syntax: JSX provides a declarative way to describe UI, making the code easier to read
and understand.
 Better Readability: With JSX, it's easier to visualize how the UI will be structured, as it looks like
HTML.
 Integration with JavaScript: JavaScript expressions and logic can be seamlessly integrated into
JSX, making it more dynamic and flexible.
 Component Reusability: JSX enables component-based development, making it easier to build
reusable UI elements.
Disadvantages of JSX
 Learning Curve: Beginners may find JSX initially confusing because it blends HTML-like syntax
with JavaScript.
 Debugging: Since JSX is compiled into JavaScript, it can sometimes be harder to debug the
underlying code.
 Tooling Dependency: JSX requires a transpiler like Babel to convert it into regular JavaScript that
the browser can understand.

React components

In React, components are the building blocks of a React application. They allow you to split the UI into
independent, reusable pieces, making development more manageable, modular, and maintainable.
Components in React can be thought of as JavaScript functions or classes that return a description of what
should appear on the screen. They are responsible for handling the view layer in the MVC (Model-View-
Controller) pattern.
Key Features of React Components
1. Reusability: Components can be reused across different parts of the application.
2. Composition: Components can be nested inside other components, allowing you to build complex
UIs.
3. Lifecycle Methods: Class components have lifecycle methods like componentDidMount,
componentDidUpdate, etc., which are useful for handling side effects.
4. Hooks: With hooks like useState, useEffect, etc., functional components can now manage state,
perform side effects, and more.
// simple component accessing example
//app.js
function Car()
{
return <h2>Hi, I am in my own new Car!</h2>;
}
export default Car;
//index.js

import React from 'react';

import ReactDOM from 'react-dom/client';
import Car from './App';
 const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Types of React Components
1. Functional Components
2. Class Components
3. Stateful and Stateless Components
4. Pure Components
5. Controlled and Uncontrolled Components
1. Functional Components
Functional components are the simplest type of component. They are just JavaScript functions that return
JSX (HTML-like code).
Syntax:
//App.js
function MyComponent()
{
return <h1>Hello, World!</h1>;
}
export default MyComponent;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyComponent from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<MyComponent />);

With the introduction of React Hooks in React 16.8, functional components can now handle state and
lifecycle methods (which were previously only available in class components), making them more powerful
and preferable in many scenarios.
Example with Hooks (State and Effect):
//app.js
import { useState, useEffect } from 'react';

function Counter()
{
const [count, setCount] = useState(0);

useEffect(() =>
{
document.title = `You clicked ${count} times`;
}, [count]);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
export default Counter;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Counter from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Counter/>);
2. Class Components
Class components are the older way of defining components in React. These components extend
React.Component and must include a render method that returns JSX.
Simple class component example
//app.js
import React, { Component } from 'react';

class MyComponent extends Component

{
render()
{
return <h1>Hello, World!</h1>;
}
}
export default MyComponent;

//index.js

import React from 'react';

import ReactDOM from 'react-dom/client';
import MyComponent from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<MyComponent />);

Class components can hold state (in a this.state object) and can use lifecycle methods, such as
componentDidMount, componentDidUpdate, and componentWillUnmount.
Example of State and Lifecycle Method:
//app.js

import React, { Component } from 'react';

class Counter extends Component {

constructor(props) {
super(props);
this.state = { count: 0 };
}

componentDidMount() {
console.log("Component has mounted");
}

render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
export default Counter;

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Counter from './App';
 const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);

With the advent of React Hooks, the usage of class components has decreased, as functional components
are more concise and flexible.

3. Stateful and Stateless Components

 Stateful Components: These components maintain state that determines their behavior or appearance.
Stateful components can be either class components or functional components (with React Hooks).
o Example: A counter component that tracks how many times a button is clicked.
 Stateless Components: These components don't have their own state. They receive data from their parent
component via props and simply render it.
o Example: A presentational component that just displays data passed to it.

// app.js
import { useState } from 'react';
// Stateless component
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
// Stateful component
function App() {
const [name] = useState("Sangola");
return <Greeting name={name} />;
}
export default App;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

To change a value in the state object, use the this.setState() method.

When a value in the state object changes, the component will re-render, meaning that the output will change
according to the new value(s).

Always use the setState() method to change the state object, it will ensure that the component knows its been
updated and calls the render() method (and all the other lifecycle methods).
//app.js
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
 {this.state.model}
from {this.state.year}.
</p>
</div>
);
}
}

Index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

const container = document.getElementById('root');

const root = ReactDOM.createRoot(container);
root.render(<Car />);

4. Pure Components
A Pure Component is a class component that only re-renders when its props or state have changed. It
implements a shallow comparison of props and state, improving performance by preventing unnecessary
re-renders.
//index,js

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {

render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
export default MyComponent;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyComponent from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

In functional components, the equivalent behavior can be achieved by using React.memo().

const MyComponent = React.memo(function MyComponent({ name }) {
return <h1>Hello, {name}!</h1>;
});
5. Controlled and Uncontrolled Components
 Controlled Components: In a controlled component, the component’s state is managed by React.
The form element (like an input field) does not maintain its own state; instead, the state is handled by
the parent component, usually through props and state.
o Example: A form with an input field controlled by the component state.
//app.js
import { useState } from 'react';
function MyForm() {
const [inputValue, setInputValue] = useState("");
const handleChange = (event) => {
setInputValue(event.target.value);
};
return (
<input
type="text"
value={inputValue}
onChange={handleChange}
 />
);
}
export default MyForm;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyForm from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
 Uncontrolled Components: In uncontrolled components, the form elements maintain their own state
internally, and React doesn’t directly control it. Instead of using state to manage the input’s value,
you can use refs to directly access the DOM.
o Example: A form with an uncontrolled input field.
//app.js
import { useRef } from 'react';
function MyForm() {
const inputRef = useRef(null);

const handleSubmit = () => {

alert(inputRef.current.value);
};

return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleSubmit}>Submit</button>
</div>
);
}
export default MyForm;
//insex.js

import React from 'react';

import ReactDOM from 'react-dom/client';
import MyForm from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<MyForm />);
Key Concepts in React Components
1. Props (Properties):
o Props are used to pass data from a parent component to a child component. Props are immutable,
meaning they cannot be modified by the child component.

//app.js

function Car(props) {
return <h2>I am in my new {props.color} Car!</h2>;
}
export default Car;
// index.js

import React from 'react';

import ReactDOM from 'react-dom/client';
import Car from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);

2. State:
o State is used to store data that changes over time within a component. It can be updated using the
setState method (in class components) or the useState hook (in functional components).
 const [count, setCount] = useState(0);
3. Event Handling:
o React allows you to handle user interactions like clicks, key presses, and form submissions by binding
event handlers to elements.

Just like HTML DOM events, React can perform actions based on user events.
React has the same events as HTML: click, change, mouseover etc.
Adding Events
React events are written in camelCase syntax:
onClick instead of onclick.
React event handlers are written inside curly braces:
onClick={shoot} instead of onclick="shoot()".
React:
<button onClick={shoot}>Take the Shot!</button>
HTML:
<button onclick="shoot()">Take the Shot!</button>

//app.js
function Football() {
const shoot = () => {
alert("Great Shot!");
}

return (
<button onClick={shoot}>Take the shot!</button>
);
}
export default Football;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Football from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

Passing Arguments:-To pass an argument to an event handler, use an arrow function.

Example:- In following example Send "Goal!" as a parameter to the shoot function, using arrow function:
//app.js
function Football() {
const shoot = (a) => {
alert(a);
}

return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
export default Football;
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Football from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

React Event Object

Event handlers have access to the React event that triggered the function.
In our example the event is the "click" event.
 //app.js
function Football() {
const shoot = (a, b) => {
alert(b.type);
/*
'b' represents the React event that triggered the function.
In this case, the 'click' event
*/
}

return (
<button onClick={(event) => shoot("Goal!", event)}>Take the
shot!</button>
);
}
export default Football;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Football from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

4. Component Lifecycle (Class Components):

o Class components have lifecycle methods that allow you to run code at different stages of the
component’s life. Common lifecycle methods include componentDidMount,
componentDidUpdate, and componentWillUnmount.
In functional components, lifecycle behavior can be handled using React Hooks like useEffect.
5. Reusability:
o One of the key advantages of components is reusability. Once a component is created, it can be
reused multiple times with different props.
6. Composition:
o React promotes the idea of component composition. Components can be nested inside one another
to create complex UIs. For example, a Form component might include Input, Button, and Label
components.

child components

In React, child components refer to components that are nested inside other components, which are called
parent components. React’s component model is hierarchical, meaning that one component can "contain"
or "compose" other components, making the UI modular and reusable.
Child Components in React
A child component can be passed data and behavior (via props) from a parent component, and it can also
communicate back to the parent by calling functions passed down as props. This allows for the exchange of
data and interactions between parent and child components.
1. How Child Components Work
 A parent component renders a child component within its JSX.
 The child component can receive data from the parent via props.
 The child component can also send data or trigger actions to the parent through callbacks (functions passed
as props).
2. Passing Data to Child Components (Props)
In React, data is passed to child components through props. Props (short for properties) allow you to pass
dynamic data (like strings, numbers, arrays, functions) from the parent component to the child component.
Example: Parent passing data to a Child component

// app.js
// Parent component
 function Parent() {
const parentData = "Hello from Parent!";

return <Child message={parentData} />;

}
// Child component
function Child(props) {
return <h1>to child ->{props.message}</h1>;
}
export default Parent;

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Parent from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Parent />);
In this example:
 The Parent component passes the message prop to the Child component.
 The Child component accesses that prop using props.message and renders it.
3. Passing Functions as Props
A child component can also call a function passed from the parent to communicate with the parent
component, such as updating state or triggering a behavior.
Example: Child Component Sending Data to Parent

//app.js
// Parent component
import { useState } from 'react';

function Parent()
{
const [message, setMessage] = useState("");

// Function to handle change

const updateMessage = (newMessage) =>
{
setMessage(newMessage);
};

return (
<div>
<h1>{message}</h1>
<Child sendMessage={updateMessage} />
</div>
);
}

function Child(props)
{
return (
<div>
<button onClick={() => props.sendMessage("Hello from Child!")}>
Send Message to Parent
</button>
</div>
);
}
export default Parent;

// index.js
 import React from 'react';
import ReactDOM from 'react-dom/client';
import Parent from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Parent />);

In this example:
 The Parent component defines the updateMessage function and passes it as a prop (sendMessage) to
the Child component.
 The Child component calls the sendMessage function when the button is clicked, which updates the state
in the parent.
4. Reusable Child Components
One of the strengths of child components is that they can be reused in different parts of your application. By
passing different props, you can change the behavior or appearance of the child component while keeping
the same logic.
Example: Reusable Child Component
//app.js
// Parent component
function Parent() {
return (
<div>
<Child message="First message" />
<Child message="Second message" />
</div>
);
}
// Child component
function Child(props) {
return <h1>{props.message}</h1>;
}
export default Parent;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Parent from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Parent />);

Here, the Child component is reused twice with different messages, allowing it to be highly reusable with
different data.
5. Child Components with Event Handlers
Child components can also have their own event handlers, but they can still communicate with the parent
component by invoking functions passed as props.
Example: Handling Events in a Child Component
//app.js
import { useState } from 'react';

function Parent() {
const handleClick = () => {
alert("Button clicked in Parent");
};

return <Child onButtonClick={handleClick} />;

}

// Child component
 function Child(props)
{
return <button onClick={props.onButtonClick}>Click Me</button>;
}
export default Parent;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Parent from './App';
import Child from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Parent />);

In this example:
 The Parent component passes an event handler (onButtonClick) to the Child component as a prop.
 When the button in the Child component is clicked, it triggers the handleClick function from the parent,
displaying an alert.
6. Complex Child Components with Multiple Props
You can also pass multiple props to a child component, allowing it to be more flexible.
Example: Complex Child Component
//app.js

// Parent component
function Parent() {
const user = { name: "Sangola", age: 25 };
return <Child user={user} isLoggedIn={true} />;
}

// Child component
function Child(props) {
const { name, age } = props.user;
return (
<div>
<h1>{props.isLoggedIn ? `Welcome ${name}` : "Please log in"}</h1>
<p>Age: {age}</p>
</div>
);
}

export default Parent;

//index.js

import React from 'react';

import ReactDOM from 'react-dom/client';
import Parent from './App';
import Child from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Parent />);
In this example:
 The Parent component passes an object (user) and a boolean (isLoggedIn) as props to the Child
component.
 The Child component destructures the user prop and uses it to render different content based on
whether the user is logged in.
7. Default Props and Prop Validation
React allows you to define default values for props if no value is passed, and you can also validate the types
of props passed to a component.
Default Props:

function Child({ message }) {

return <h1>{message}</h1>;
}

// Set default props

Child.defaultProps = {
message: "Default message",
};
If the Parent does not pass a message prop, the Child will use the default value "Default message".
Prop Validation:
You can use PropTypes to validate the types of props a component expects.
import PropTypes from 'prop-types';

function Child({ name, age }) {

return <p>{name} is {age} years old.</p>;
}

Child.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
};
This ensures that the Child component will only receive
props of the correct type, and if the wrong type is
passed, a warning is shown in development mode.
8. Children as Props
React provides a special prop called children. This prop allows you to pass components as children to
other components.
Example: Using children prop

//app.js
// Parent component
function Parent() {
return (
<div>
<Child>
<h1>This is content inside the child!</h1>
</Child>
</div>
);
}

// Child component
function Child(props) {
return <div>{props.children}</div>;
}
export default Parent;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Parent from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Parent />);

In this example:
 The Parent component passes an h1 tag as the children prop to the Child component.
 The Child component renders whatever is passed in the children prop.
9. Key Concepts in Child Components
 Props: Data and behavior passed down from the parent to the child component.
  Communication: Child components can send data back to the parent through functions passed as props.
 Event Handling: Child components can handle their own events but can also trigger parent event handlers.
 Reusability: Child components are modular and reusable with different data passed through props.
 Children Prop: The special children prop allows a parent to pass components or elements to a child
component.

JSX Expressions

In React, JSX expressions are the parts of JSX code that allow you to embed dynamic JavaScript code
within the JSX syntax. JSX itself is a syntax extension to JavaScript that allows you to write HTML-like
structures inside JavaScript code, but with JSX expressions, you can make your JSX dynamic by embedding
JavaScript logic directly inside the markup.
What is an Expression in JSX?
An expression in JavaScript is any valid piece of code that produces a value. These expressions can include:
 Variables
 Function calls
 Operations (arithmetic, logical, etc.)
 Conditional logic
 Arrays and objects
In JSX, any valid JavaScript expression can be embedded inside curly braces {}. When JSX is compiled,
these expressions get evaluated and rendered as part of the component’s output.
1. Embedding JavaScript Expressions in JSX
The most basic form of a JSX expression is embedding JavaScript inside curly braces {}. This can include
variables, operations, and function calls.
Example:
//app.js
function Welcome(props) {
const greeting = "Hello, " + props.name;
return <h1>{greeting}</h1>;
}
export default Welcome;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Welcome from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Welcome name="Sangola College" />);
Here:
 The greeting variable is a JavaScript expression, and it's embedded in JSX inside curly braces {greeting}.
2. Expressions in JSX: Variables and Constants
You can use any JavaScript expression within JSX, including variables or constants.
Example:
//app.js
function Person(props) {
const age = 25;
return <h2>{props.name} is {age} years old.</h2>;
}
export default Person;
//index.js

import React from 'react';

import ReactDOM from 'react-dom/client';
import Person from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Person name="Ram" />);
In this example:
 The age constant is embedded inside the JSX expression using {age}.
3. Expressions: JavaScript Operators
You can use any valid JavaScript operators inside JSX expressions, including arithmetic operators,
comparison operators, and logical operators.
Example: Arithmetic Operation
// app.js

function Sum() {
const a = 5;
const b = 10;
return <h1>{a + b}</h1>; // Will display 15
}
export default Sum;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Sum from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Sum />);
Example: Conditional Expressions (Ternary Operator)
The ternary operator ? : is a common way to perform conditional rendering within JSX.
//app.js
function Greeting(props) {
return <h1>{props.isLoggedIn ? "Welcome back!" : "Please log in"}</h1>;
}

export default Greeting;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Greeting from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Greeting isLoggedIn={true} />);

Here:
 If props.isLoggedIn is true, it will display "Welcome back!".
 Otherwise, it will display "Please log in".
4. Conditional Rendering in JSX (Using JavaScript)
JSX allows you to use JavaScript expressions like the ternary operator or logical AND (&&) to
conditionally render parts of the UI.
Example: Using && for Conditional Rendering

//app.js
function Notification(props) {
return (
<div>
{props.hasNewMessages && <p>You have new messages!</p>}
</div>
);
}
export default Notification;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Notification from './App';
 const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Notification hasNewMessages={true} />);

 The <p> element will only be rendered if props.hasNewMessages is true.

 If props.hasNewMessages is false, nothing will be rendered.
5. Rendering Lists with JSX (Using .map() Method)
You can use JavaScript methods like .map() to loop through arrays and render a list of elements.
Example:

//app.js
function ItemList(props) {
const items = ["Apple", "Banana", "Cherry"];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
export default ItemList;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import ItemList from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<ItemList />);

In this example:
 The map() function iterates over the items array and returns a <li> element for each item.
 The key prop is required when rendering lists in React to help identify each element in the list for efficient
updates.
6. Functions as Expressions in JSX
You can invoke functions inside JSX expressions. For example, you can call a function to calculate a value
and render it.
Example:

//app.js
function calculateDiscount(price)
{
return price * 0.1;
}
function Price(props) {
return (
<div>
<h1>Original Price: ${props.price}</h1>
<h2>Discount: ${calculateDiscount(props.price)}</h2>
</div>
);
}
export default Price;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Price from './App';
 const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Price price='1000 ' />);

Here:
 The calculateDiscount function is called inside the JSX expression to calculate the discount on the
price.
7. Expressions with JSX Elements (Nesting Components)
JSX expressions can also be used to pass JSX elements as children of components, allowing for the
composition of UI components.
Example:
//app.js
function Page() {
const showHeader = true;
return (
<div>
{showHeader && <Header />}
<p>This is the content of the page.</p>
</div>
);
}
export default Page;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Page from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Page />);

In this example:
 The Header component is conditionally rendered based on the value of showHeader.
 If showHeader is true, the Header component will be rendered.

Unit 2: Conditional Rendering and List

React Conditional Rendering

In React, we can create multiple components which encapsulate behavior that we need. After that, we can render
them depending on some conditions or the state of our application. In other words, based on one or several conditions,
a component decides which elements it will return. In React, conditional rendering works the same way as the
conditions work in JavaScript. We use JavaScript operators to create elements representing the current state, and then
React Component update the UI to match them.
From the given scenario, we can understand how conditional rendering works. Consider an example of handling
a login/logout button. The login and logout buttons will be separate components. If a user logged in, render the logout
component to display the logout button. If a user not logged in, render the login component to display the login button.
In React, this situation is called as conditional rendering.
There is more than one way to do conditional rendering in React. They are given below.
o if
o ternary operator
o logical && operator
o switch case operator
o Conditional Rendering with enums
if
It is the easiest way to have a conditional rendering in React in the render method. It is restricted to the total block of
the component. IF the condition is true, it will return the element to be rendered. It can be understood in the below
example.
Example:
//app.js
function UserLoggin(props) {
 return <h1>Welcome back!</h1>;
}
function GuestLoggin(props) {
return <h1>Please sign up.</h1>;
}
function SignUp(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserLoggin />;
}
return <GuestLoggin />;
}
export default SignUp;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import SignUp from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<SignUp isLoggedIn={false} />);
Logical && operator
This operator is used for checking the condition. If the condition is true, it will return the element right after &&, and
if it is false, React will ignore and skip it.
Syntax
{
condition &&
// whatever written after && will be a part of output.
}
We can understand the behavior of this concept from the below example.
If you run the below code, you will not see the alert message because the condition is not matching.
('sangola' == 'Sangola') && alert('This alert will never be shown!')
If you run the below code, you will see the alert message because the condition is matching.
(10 > 5) && alert('This alert will be shown!')
Example
//app.js
import React from 'react';
import ReactDOM from 'react-dom';
// Example Component
function Example()
{
return(<div>
{
(10 > 5) && alert('This alert will be shown!')
}
</div>
);
}
export default Example;

//index.js

import React from 'react';

import ReactDOM from 'react-dom/client';
import Example from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

 root.render(<Example />);
You can see in the above output that as the condition (10 > 5) evaluates to true, the alert message is successfully
rendered on the screen.
Ternary operator
The ternary operator is used in cases where two blocks alternate given a certain condition. This operator makes your
if-else statement more concise. It takes three operands and used as a shortcut for the if statement.
Syntax
condition ? true : false
If the condition is true, statement1 will be rendered. Otherwise, false will be rendered.
Example
//app.js
function Greeting(props) {
return <h1>{props.isLoggedIn ? "Welcome back!" : "Please log in"}</h1>;
}

export default Greeting;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Greeting from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Greeting isLoggedIn={true} />);

Here:
 If props.isLoggedIn is true, it will display "Welcome back!".
 Otherwise, it will display "Please log in".
Switch case operator
Sometimes it is possible to have multiple conditional renderings. In the switch case, conditional rendering is applied
based on a different state.
Example
//app.js
import React, { useState } from "react";

function GreetingComponent() {
const [timeOfDay, setTimeOfDay] = useState("morning"); // State variable

const renderGreeting = () => {

switch (timeOfDay) {
case "morning":
return <h1>Good Morning!</h1>;
case "afternoon":
return <h1>Good Afternoon!</h1>;
case "evening":
return <h1>Good Evening!</h1>;
default:
return <h1>Hello!</h1>;
}
};

return (
<div>
{renderGreeting()} {/* Render different greetings based on timeOfDay */}
<button onClick={() => setTimeOfDay("morning")}>Morning</button>
<button onClick={() => setTimeOfDay("afternoon")}>Afternoon</button>
<button onClick={() => setTimeOfDay("evening")}>Evening</button>
</div>
);
}
 export default GreetingComponent;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import GreetingComponent from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<GreetingComponent />);

Conditional Rendering with enums

An enum is a great way to have a multiple conditional rendering. It is more readable as compared to switch case
operator. It is perfect for mapping between different state. It is also perfect for mapping in more than one condition.
It can be understood in the below example.

Example

function NotificationMsg({ text, state }) {

return (
<div>
{{
info: <Message text={text} />,
warning: <Message text={text} />,
}[state]}
</div>
);
}
Preventing Component form Rendering
Sometimes it might happen that a component hides itself even though another component rendered it. To do this
(prevent a component from rendering), we will have to return null instead of its render output. It can be understood
in the below example:
React Lists

Lists are used to display data in an ordered format and mainly used to display menus on websites. In React, Lists can
be created in a similar way as we create lists in JavaScript. Let us see how we transform Lists in regular JavaScript.
The map() function is used for traversing the lists. In the below example, the map() function takes an array of numbers
and multiply their values with 5. We assign the new array returned by map() to the variable multiplyNums and log it.
Keys

Keys allow React to keep track of elements. This way, if an item is updated or removed, only that item will be re-
rendered instead of the entire list.
Keys need to be unique to each sibling. But they can be duplicated globally.
Generally, the key should be a unique ID assigned to each item. As a last resort, you can use the array index as a key.
//app.js
function Car(props) {
return <li>I am a { props.brand }</li>;
}

function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
 {cars.map((car) => <Car key={car.id} brand={car.brand} />)}
</ul>
</>
);
}
export default Garage;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Garage from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Garage />);

React Refs

Refs is the shorthand used for references in React. It is similar to keys in React. It is an attribute which makes it possible
to store a reference to particular DOM nodes or React elements. It provides a way to access React DOM nodes or React
elements and how to interact with it. It is used when we want to change the value of a child component, without
making the use of props.

When to Use Refs

Refs can be used in the following cases:
 When we need DOM measurements such as managing focus, text selection, or media playback.
 It is used in triggering imperative animations.
 When integrating with third-party DOM libraries.
 It can also use as in callbacks.
When to not use Refs
o Its use should be avoided for anything that can be done declaratively. For example, instead of
using open() and close() methods on a Dialog component, you need to pass an isOpen prop to it.
o You should have to avoid overuse of the Refs.
How to create Refs
In React, Refs can be created by using React.createRef(). It can be assigned to React elements via the ref attribute. It
is commonly assigned to an instance property when a component is created, and then can be referenced throughout
the component.

class MyComponent extends React.Component {

constructor(props) {
super(props);
this.callRef = React.createRef();
}
render() {
return <div ref={this.callRef} />;
}
}
How to access Refs
In React, when a ref is passed to an element inside render method, a reference to the node can be accessed via the
current attribute of the ref.
const node = this.callRef.current;
Refs current Properties
The ref value differs depending on the type of the node:
 When the ref attribute is used in HTML element, the ref created with React.createRef() receives the underlying
DOM element as its current property.
 If the ref attribute is used on a custom class component, then ref object receives the mounted instance of the
component as its current property.
 The ref attribute cannot be used on function components because they don't have instances.
Add Ref to DOM elements
In the below example, we are adding a ref to store the reference to a DOM node or element.
//app.js
import React from 'react';
//import { render } from 'react-dom';

class App extends React.Component {

constructor(props) {
super(props);
this.callRef = React.createRef();
this.addingRefInput = this.addingRefInput.bind(this);
}

addingRefInput() {
this.callRef.current.focus();
}

render() {
return (
<div>
<h2>Adding Ref to DOM element</h2>
<input
type="text"
ref={this.callRef} />
<input
type="button"
value="Add text input"
onClick={this.addingRefInput}
/>
</div>
);
}
}
export default App;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

Add Ref to Class components

In the below example, we are adding a ref to store the reference to a class component.
Example
//app.js
import React from 'react';
function CustomInput(props) {
let callRefInput = React.createRef();

function handleClick() {
callRefInput.current.focus();
}
return (
<div>
<h2>Adding Ref to Class Component</h2>
<input
type="text"
ref={callRefInput} />
<input
type="button"
 value="Focus input"
onClick={handleClick}
/>
</div>
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.callRefInput = React.createRef();
}
focusRefInput() {
this.callRefInput.current.focus();
}
render() {
return (
<CustomInput ref={this.callRefInput} />
);
}
}
export default App;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);
Callback refs
In react, there is another way to use refs that is called "callback refs" and it gives more control when the refs
are set and unset. Instead of creating refs by createRef() method, React allows a way to create refs by passing a callback
function to the ref attribute of a component. It looks like the below code.
<input type="text" ref={element => this.callRefInput = element} />
The callback function is used to store a reference to the DOM node in an instance property and can be accessed
elsewhere. It can be accessed as below:
this.callRefInput.value
The example below helps to understand the working of callback refs.
//app.js
import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {

constructor(props) {
super(props);

this.callRefInput = null;

this.setInputRef = element => {

this.callRefInput = element;
};

this.focusRefInput = () => {
//Focus the input using the raw DOM API
if (this.callRefInput) this.callRefInput.focus();
};
}

componentDidMount() {
//autofocus of the input on mount
this.focusRefInput();
}
 render() {
return (
<div>
<h2>Callback Refs Example</h2>
<input
type="text"
ref={this.setInputRef}
/>
<input
type="button"
value="Focus input text"
onClick={this.focusRefInput}
/>
</div>
);
}
}
export default App;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

In the above example, React will call the "ref" callback to store the reference to the input DOM element when the
component mounts, and when the component unmounts, call it with null. Refs are always up-to-date before
the componentDidMount or componentDidUpdate fires. The callback refs pass between components is the same as
you can work with object refs, which is created with React.createRef().
Forwarding Ref from one component to another component
Ref forwarding is a technique that is used for passing a ref through a component to one of its child components. It can
be performed by making use of the React.forwardRef() method. This technique is particularly useful with higher-order
components and specially used in reusable component libraries. The most common example is given below.

//app.js

import React from 'react';

const TextInput = React.forwardRef((props, ref) => (
<input type="text" placeholder="Hello World" ref={ref} />
));
const inputRef = React.createRef();

class CustomTextInput extends React.Component {

handleSubmit = e => {
e.preventDefault();
console.log(inputRef.current.value);
};
render() {
return (
<div>
<form onSubmit={e => this.handleSubmit(e)}>
<TextInput ref={inputRef} />
<button>Submit</button>
</form>
</div>
);
}
}
export default CustomTextInput;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import CustomTextInput from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<CustomTextInput />);

In the above example, there is a component TextInput that has a child as an input field. Now, to pass or forward
the ref down to the input, first, create a ref and then pass your ref down to <TextInput ref={inputRef}>. After that,
React forwards the ref to the forwardRef function as a second argument. Next, we forward this ref argument down
to <input ref={ref}>. Now, the value of the DOM node can be accessed at inputRef.current.

React with useRef()

It is introduced in React 16.7 and above version. It helps to get access the DOM node or element, and then we can
interact with that DOM node or element such as focussing the input element or accessing the input element value. It
returns the ref object whose .current property initialized to the passed argument. The returned object persist for the
lifetime of the component.

Syntax
const refContainer = useRef(initialValue);
Example
In the below code, useRef is a function that gets assigned to a variable, inputRef, and then attached to an attribute
called ref inside the HTML element in which you want to reference.
//app.js
import { useState, useEffect, useRef } from "react";

function App() {
const [inputValue, setInputValue] = useState("");
const count = useRef(0);

useEffect(() => {
count.current = count.current + 1;
});

return (
<>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<h1>Render Count: {count.current}</h1>
</>
);
}

export default App;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);
 State and Props in ReactJS

In ReactJS, State and Props are two core concepts that allow you to manage and pass data between
components. Understanding how they work is fundamental to building dynamic and interactive UIs.
1. Props (short for Properties)
1. Props are inputs to components that are passed from a parent component to a child component.
2. Props are read-only and immutable, meaning a child component cannot modify the props it receives.
3. They allow you to pass data, configuration, or event handlers down to child components.
Key Characteristics of Props:
1. Read-Only: They cannot be changed by the child component. The parent controls the value of props.
2. Immutable: Props are fixed during the component’s lifecycle.
3. Dynamic: Props can change over time (due to state changes in the parent component), causing the child
component to re-render.
Example:
//app.js
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return <Greeting name="Sangola" />;
}
export default App;

//index.js

import React from 'react';

import ReactDOM from 'react-dom/client';
import App from './App';

const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

In this example:
1. The name prop is passed from the App component to the Greeting component.
2. The Greeting component receives the prop and renders it in JSX.
Passing Multiple Props:

//app.js
function UserCard(props) {
return (
<div>
<h2>{props.name}</h2>
<p>{props.age} years old</p>
</div>
);
}
function App() {
return <UserCard name="John" age={30} />;
}
export default App;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);
2. State
1. State represents the internal data of a component that can change over time, and when it changes, the
component re-renders.
2. Unlike props, state is mutable and is owned and managed within a component.
3. State is used to store information that needs to change, such as user input, data fetched from an API, or the
component's internal status.
Key Characteristics of State:
 Mutable: State can be changed within the component using functions like setState (for class components)
or the useState hook (for functional components).
 Local: Each component has its own state, meaning that state in one component does not affect other
components directly.
 Triggers Re-render: Changing the state of a component triggers a re-render of that component.
Example (Class Component):

//app.js
import React from 'react';
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 }; // Initialize state
}
increment = () => {
this.setState({ count: this.state.count + 1 }); // Update state
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}

export default Counter;

//inde.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Counter from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Counter />);

Example (Functional Component with useState):

//app.js
import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0); // Declare state

const increment = () => {

setCount(count + 1); // Update state
};

return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
 }
export default Counter;

//index.js

import React from 'react';

import ReactDOM from 'react-dom/client';
import Counter from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Counter />);

In the functional component example:

1. useState(0) initializes the count state variable with a value of 0.
2. setCount(count + 1) updates the count state when the button is clicked.

Differences Between State and Props

Feature Props State
Definition Inputs passed from parent to child component Data that is managed within a component
Mutability Immutable (cannot be changed by the child) Mutable (can be changed by the component)
Ownership Owned by the parent component Owned by the component itself
Usage To pass data and event handlers down the To store and manage dynamic data that
component tree changes over time
Trigger Re- Changes to props from parent trigger re- Changes to state trigger re-render in
render render in child component
When to Use State and Props
 Use Props when:
o You need to pass data or functions from a parent component to a child component.
o The data is read-only for the child component.
o You want to share data across components without changing it inside the component.
 Use State when:
o You need to store and modify data within a component.
o The component needs to track changes (e.g., form inputs, toggles, counters).
o You need to trigger UI changes based on internal data.

Combining State and Props

State and props often work together in React applications. Props pass data down to child components, and
the child can use state to manage local changes. For example, a parent component can pass props to a child,
and the child can modify its state based on those props or user interactions.
Example with Both State and Props:

//app.js
import React, { useState } from 'react';
function ParentComponent() {
const [count, setCount] = useState(0);
return <ChildComponent count={count} setCount={setCount} />;
}

function ChildComponent({ count, setCount }) {

return (
<div>
<p>Count from parent: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default ParentComponent;

//index.js
import React from 'react';
 import ReactDOM from 'react-dom/client';
import ParentComponent from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<ParentComponent />);

In this example:
 The ParentComponent manages the count state.
 The count and setCount are passed as props to ChildComponent.
 ChildComponent can display the count and trigger a change in the parent’s state by calling setCount.

Unit 3: Handling Events and Forms

React Forms
Forms are an integral part of any modern web application. It allows the users to interact with the application as well
as gather information from the users. Forms can perform many tasks that depend on the nature of your business
requirements and logic such as authentication of the user, adding user, searching, filtering, booking, ordering, etc. A
form can contain text fields, buttons, checkbox, radio button, etc.
Creating Form
React offers a stateful, reactive approach to build a form. The component rather than the DOM usually handles the
React form. In React, the form is usually implemented by using controlled components.
There are mainly two types of form input in React.
1. Uncontrolled component
2. Controlled component
Uncontrolled component
The uncontrolled input is similar to the traditional HTML form inputs. The DOM itself handles the form data. Here,
the HTML elements maintain their own state that will be updated when the input value changes. To write an
uncontrolled component, you need to use a ref to get form values from the DOM. In other words, there is no need
to write an event handler for every state update. You can use a ref to access the input field value of the form from
the DOM. In uncontrolled component, React provides minimal support for form programming. It has to use Ref
concept (another react concept to get a DOM element in the React component during runtime) to do the form
programming.
Controlled Component
In controlled component, React provides a special attribute, value for all input elements and controls the input
elements. The value attribute can be used to get and set the value of the input element. It has to be in sync with
state of the component.

Difference table between controlled and uncontrolled component

Sr.No Controlled Uncontrolled

1. It does not maintain its internal state. It maintains its internal states.
2. Here, data is controlled by the parent component. Here, data is controlled by the DOM itself.
3. It accepts its current value as a prop. It uses a ref for their current values.
4. It allows validation control. It does not allow validation control.
5. It has better control over the form elements and data. It has limited control over the form elements and data.

Adding Forms in React

You add a form with React like any other element:
//app.js
import React from 'react';
import ReactDOM from 'react-dom/client';

function MyForm() {
return (
<form>
 <label>Enter your name:
<input type="text" />
</label>
</form>
)
}
export default MyForm;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyForm from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<MyForm />);
This will work as normal, the form will submit and the page will refresh.
But this is generally not what we want to happen in React.
We want to prevent this default behavior and let React control the form.
Handling Forms
Handling forms is about how you handle the data when it changes value or gets submitted.
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.
We can use the useState Hook to keep track of each inputs value and provide a "single source of truth" for the entire
application.
//app.js
import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function MyForm() {
const [name, setName] = useState("");

return (
<form>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
)
}
export default MyForm;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyForm from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<MyForm />);
Submitting Forms
You can control the submit action by adding an event handler in the onSubmit attribute for the <form>:
//app.js
import { useState } from "react";
import ReactDOM from 'react-dom/client';

function MyForm() {
const [name, setName] = useState("");

const handleSubmit = (event) => {

event.preventDefault();
alert(`The name you entered was: ${name}`);
}

return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<input type="submit" />
</form>
)
}
export default MyForm;
//index,js
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyForm from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<MyForm />);
Multiple Input Fields
You can control the values of more than one input field by adding a name attribute to each element.
We will initialize our state with an empty object.
To access the fields in the event handler use the event.target.name and event.target.value syntax.
To update the state, use square brackets [bracket notation] around the property name.
//app.js
import { useState } from "react";
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
const handleSubmit = (event) => {
event.preventDefault();
console.log(inputs);
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
 name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>Enter your age:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<input type="submit" />
</form>
)
}
export default MyForm;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyForm from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<MyForm />);
Textarea
The textarea element in React is slightly different from ordinary HTML.
In HTML the value of a textarea was the text between the start tag <textarea> and the end tag </textarea>.
<textarea>
Content of the textarea.
</textarea>
//app.js
import { useState } from "react";
import ReactDOM from "react-dom/client";
function MyForm() {
const [textarea, setTextarea] = useState(
"Sangola Mahavidyalaya Sangola is having state of art computer labs"
);
const handleChange = (event) => {
setTextarea(event.target.value)
}
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
)
}
export default MyForm;
//index,js
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyForm from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<MyForm />);
Select
A drop down list, or a select box, in React is also a bit different from HTML.
In HTML, the selected value in the drop down list was defined with the selected attribute:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>

In React, the selected value is defined with a value attribute on the select tag:
//app.js
import { useState } from "react";
import ReactDOM from "react-dom/client";

function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
}
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
)
}
export default MyForm;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyForm from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<MyForm />);
Uncontrolled component
The uncontrolled input is similar to the traditional HTML form inputs. The DOM itself handles the form data. Here, the
HTML elements maintain their own state that will be updated when the input value changes. To write an uncontrolled
component, you need to use a ref to get form values from the DOM. In other words, there is no need to write an event
handler for every state update. You can use a ref to access the input field value of the form from the DOM.
Example
In this example, the code accepts a field username and company name in an uncontrolled component.

//app.js
import React, { Component } from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.updateSubmit = this.updateSubmit.bind(this);
this.input = React.createRef();
}
updateSubmit(event) {
alert('You have entered the UserName and CompanyName successfully.');
event.preventDefault();
 }
render() {
return (
<form onSubmit={this.updateSubmit}>
<h1>Uncontrolled Form Example</h1>
<label>Name:
<input type="text" ref={this.input} />
</label>
<label>
CompanyName:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
export default App;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyForm from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<MyForm />);

Controlled Component

In HTML, form elements typically maintain their own state and update it according to the user input. In the controlled
component, the input form element is handled by the component rather than the DOM. Here, the mutable state is
kept in the state property and will be updated only with setState() method.
Controlled components have functions that govern the data passing into them on every onChange event, rather than
grabbing the data only once, e.g., when you click a submit button. This data is then saved to state and updated with
setState() method. This makes component have better control over the form elements and data.
A controlled component takes its current value through props and notifies the changes through callbacks like an
onChange event. A parent component "controls" this changes by handling the callback and managing its own state
and then passing the new values as props to the controlled component. It is also called as a "dumb component."
//app.js
import React, { Component } from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('You have submitted the input successfully: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<h1>Controlled Form Example</h1>
<label>
Name:
 <input type="text" value={this.state.value} onChange={this.handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
export default App;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyForm from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<MyForm />);

Nex

T
Events

Next Events are just some actions performed by a user to interact with any application or An event is an action that
could be triggered as a result of the user action or system generated event. They can be the smallest of actions, like
hovering a mouse pointer on an element that triggers a drop-down menu, resizing an application window, or
dragging and dropping elements to upload them a mouse click, loading of a web page, pressing a key, window
resizes, and other interactions are called events etc.
React has its own event handling system which is very similar to handling events on DOM elements. The react event
handling system is known as Synthetic Events. The synthetic event is a cross-browser wrapper of the browser's
native event.
Events in React are divided into three categories:

 Mouse Events − onClick, onDrag, onDoubleClick

 Keyboard Events − onKeyDown, onKeyPress, onKeyUp
 Focus Events − onFocus, onBlur
React has its own event handling system which is very similar to handling events on DOM elements. The react event
handling system is known as Synthetic Events. The synthetic event is a cross-browser wrapper of the browser's native
event.

For each of these events, JavaScript provides responses. So, every time an event is performed by the user, it usually
requires some type of reaction from the application; and these reactions are defined as some functions or blocks of
code, called Event Handlers. This entire process of working with events using Event Handlers is known as Event
Management.
Event Management in ReactJS
Event management is one of the important features in a web application. It enables the user to interact with the
application. React supports all events available in a web application. React event handling is very similar to DOM
events with little changes. Following are some of the common events one can observe in React-based websites –

 Clicking on a component.
  Scrolling the current page.
 Hovering over elements of the current page.
 Submitting a form.
 Redirecting to another webpage.
 Loading images.

Synthetic React Events

In JavaScript, when an event is specified, you will be dealing with a react event type called a synthetic event instead
of regular DOM events. SyntheticEvent is a simple cross-browser wrapper for native event instances making the
events work identically across all browsers. All event handlers must be passed as instances of this wrapper. However,
it is expensive in terms of CPU resources as every synthetic event created needs to be garbage-collected. Every
synthetic event object has the following attributes:

 boolean bubbles
 boolean cancelable
 DOMEventTarget currentTarget
 boolean defaultPrevented
 number eventPhase
 boolean isTrusted
 DOMEvent nativeEvent
 void preventDefault()
 boolean isDefaultPrevented()
 void stopPropagation()
 boolean isPropagationStopped()
 void persist()
 DOMEventTarget target
 number timeStamp
 string type
Since synthetic events use a lot of resources, they are usually reused and all its properties will be nullified after
invoking the event callback to optimize their performance in the browser. SyntheticEvent has the same interface as
the native event. And as the synthetic events are authorized by the document node, native events are triggered first
followed by the synthetic events.
Adding an Event
As we have already seen, React has the same events as HTML: click, change, mouseover etc. However, the React
events are defined with a camelCase and the reaction is written inside the curly braces instead. The syntax of adding
an event differs in a functional component and class component.
Following is the syntax to add an onClick event in a functional component of React:
onClick = {action to be performed}
Following is the syntax to add an onClick event in a class component of React:
onClick = {this.action_to_be_performed}

Handling an Event
Let us now learn how to handle these events in a React application with the help of the following step-by-step
process.
Define an event handler method to handle the given event.
log() {
console.log("Event is fired");
}
React provides an alternative syntax using lambda function to define event handler. The lambda syntax is −
log = () => {
console.log("Event is fired");
}
Passing Arguments to Event Handler
There are two methods available to pass arguments to an Event Handler:
Arrow Method
Bind Method
Arrow Method
If you want to know the target of the event, then add an argument e in the handler method. React will send the
event target details to the handler method.
log(e) {
console.log("Event is fired");
console.log(e.target);
}
The alternative lambda syntax is −
log = (e) => {
console.log("Event is fired");
console.log(e.target);
}
If you want to send extra details during an event, then add the extra details as initial argument and then add
argument (e) for event target.
log(extra, e) {
console.log("Event is fired");
console.log(e.target);
console.log(extra);
console.log(this);
}
The alternative lambda syntax is as follows −
log = (extra, e) => {
console.log("Event is fired");
console.log(e.target);
console.log(extra);
console.log(this);
}
Bind Method
We can also bind the event handler method in the constructor of the component. This will ensure the availability
of this in the event handler method.
constructor(props) {
super(props);
this.logContent = this.logContent.bind(this);
}
If the event handler is defined in alternate lambda syntax, then the binding is not needed. this keyword will be
automatically bound to the event handler method.
Set the event handler method for the specific event as specified below −
<div onClick={this.log}> ... </div>
To set extra arguments, bind the event handler method and then pass the extra information as second argument.
<div onClick={this.log.bind(this, extra)}> ... </div>
The alternate lambda syntax is as follows −
<div onClick={this.log(extra, e)}> ... </div>

//app.js
import React from 'react';
import ReactDOM from 'react-dom/client';

function Football() {
const shoot = () => {
alert("Great Shot!");
}

return (
 <button onClick={shoot}>Take the shot!</button>
);
}
export default Football;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Football from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

Passing Arguments:-To pass an argument to an event handler, use an arrow function.

Example:- In following example Send "Goal!" as a parameter to the shoot function, using arrow function:
//app.js
import React from 'react';
function Football() {
const shoot = (a) => {
alert(a);
}

return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
export default Football;
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Football from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

React Event Object

Event handlers have access to the React event that triggered the function.
In our example the event is the "click" event.
//app.js
function Football() {
const shoot = (a, b) => {
alert(b.type);
/*
'b' represents the React event that triggered the function.
In this case, the 'click' event
*/
}

return (
<button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
);
}
export default Football;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Football from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

Example
In the below example, we have used only one component and adding an onChange event. This event will trigger
the changeText function, which returns the company name.
//app.js
import React, { Component } from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
companyName: ''
};
}
changeText(event) {
this.setState({
companyName: event.target.value
});
}
render() {
return (
<div>
<h2>Simple Event Example</h2>
<label htmlFor="name">Enter company name: </label>
<input type="text" id="companyName"
onChange={this.changeText.bind(this)}/>
<h4>You entered: { this.state.companyName }</h4>
</div>
);
}
}
export default App;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);
Example: In this example, we are going to build an application that displays the key pressed in the input box.
//app.js
import React, { useState } from "react";
const App = () => {
const [state, setState] = useState("");

const handler = (event) => {

// changing the state to the name of the key
// which is pressed
setState(event.key);
};
return (
<div>
<h1>Hi </h1>
<p>Current Key pressed by you is: {state}</p>

{/* Passing the key pressed to the handler function */}

<input type="text" onKeyPress={(e) => handler(e)} />
</div>
);
};
export default App;
//index.js
import React from 'react';
 import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);
Handling Form Events
Forms are essential for collecting user input, whether for login, signup, or data submission. React handles form
events like onChange and onSubmit smoothly. The onChange event captures changes in form fields,
while onSubmit is used to handle the form submission.
//app.js
import React, { useState } from 'react';
function LoginForm() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = (e) => {
e.preventDefault(); // Prevents the default form submission behavior
console.log("Username:", username);
console.log("Password:", password);
};
return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</label>
<br />
<label>
Password:
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</label>
<br />
<button type="submit">Login</button>
</form>
);
}
export default LoginForm;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import LoginForm from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<LoginForm />);
 Form validation Example
function App() {
const [firstName, setFirstName] = useState('') // useState to store First Name
const [lastName, setLastName] = useState('') // useState to store Last Name
const [mobile, setMobile] = useState('') // useState to store Mobile Number
const [age, setAge] = useState('') // useState to store Age
const [email, setEmail] = useState('') // useState to store Email address of the user
const [password, setPassword] = useState('') // useState to store Password

// Function which will validate the input data whenever submit button is clicked.

function validateForm() {
// Check if the First Name is an Empty string or not.

if (firstName.length === 0) {
alert('Invalid Form, First Name can not be empty')
return
}

// Check if the Email is an Empty string or not.

if (email.length === 0) {
alert('Invalid Form, Email Address can not be empty')
return
}

// check if the password follows constraints or not.

// if password length is less than 8 characters, alert invalid form.

if (password.length < 8) {
alert(
'Invalid Form, Password must contain greater than or equal to 8 characters.',
)
return
}

// variable to count upper case characters in the password.

let countUpperCase = 0
// variable to count lowercase characters in the password.
let countLowerCase = 0
// variable to count digit characters in the password.
let countDigit = 0
// variable to count special characters in the password.
let countSpecialCharacters = 0

for (let i = 0; i < password.length; i++) {

const specialChars = [
'!',
'@',
'#',
'$',
'%',
 '^',
'&',
'*',
'(',
')',
'_',
'-',
'+',
'=',
'[',
'{',
']',
'}',
':',
';',
'<',
'>',
]

if (specialChars.includes(password[i])) {
// this means that the character is special, so increment countSpecialCharacters
countSpecialCharacters++
} else if (!isNaN(password[i] * 1)) {
// this means that the character is a digit, so increment countDigit
countDigit++
} else {
if (password[i] === password[i].toUpperCase()) {
// this means that the character is an upper case character, so increment
countUpperCase
countUpperCase++
}
if (password[i] === password[i].toLowerCase()) {
// this means that the character is lowercase, so increment countUpperCase
countLowerCase++
}
}
}

if (countLowerCase === 0) {
// invalid form, 0 lowercase characters
alert('Invalid Form, 0 lower case characters in password')
return
}

if (countUpperCase === 0) {
// invalid form, 0 upper case characters
alert('Invalid Form, 0 upper case characters in password')
return
}

if (countDigit === 0) {
// invalid form, 0 digit characters
alert('Invalid Form, 0 digit characters in password')
return
 }

if (countSpecialCharacters === 0) {
// invalid form, 0 special characters characters
alert('Invalid Form, 0 special characters in password')
return
}

// if all the conditions are valid, this means that the form is valid

alert('Form is valid')
}

return (
<div className="main">
<form>
{/* Input Field to insert First Name */}
<input
placeholder="First Name"
onChange={(e) => setFirstName(e.target.value)}
/>
{/* Input Field to insert Last Name */}
<input
placeholder="Last Name"
onChange={(e) => setLastName(e.target.value)}
/>
{/* Input Field to insert Mobile Number */}
<input
placeholder="Mobile Number"
onChange={(e) => setMobile(e.target.value)}
/>
{/* Input Field to insert Age */}
<input placeholder="Age" onChange={(e) => setAge(e.target.value)} />
{/* Input Field to insert Email Address of the user */}
<input placeholder="Email" onChange={(e) => setEmail(e.target.value)} />
{/* Input Field to insert Password */}
<input
placeholder="Password"
onChange={(e) => setPassword(e.target.value)}
/>
<button
type="submit"
onClick={() => {
validateForm()
}}
>
Submit
</button>
</form>
{lastName }
{mobile }{age}
</div>
)
}
export default App

Unit 4: Routing and State Management

Routing: Routing is a process in which a user is directed to different pages based on their action or request.
Or
Routing is a process of binding a web URL to a specific resource in the web application.
It binds an URL to a component. React Router is used to define multiple routes in the application. When a user types
a specific URL into the browser, and if this URL path matches any 'route' inside the router file, the user will be
redirected to that particular route. React community provides many third party components to handle routing in the
React application.
React Router is a standard library system built on top of the React and used to create routing in the React application
using React Router Package. It provides the synchronous URL on the browser with data that will be displayed on the
web page. It maintains the standard structure and behavior of the application and mainly used for developing single
page web applications.
Need of React Router
React Router plays an important role to display multiple views in a single page application. Without React Router, it is
not possible to display multiple views in React applications. Most of the social media websites like Facebook, Instagram
uses React Router for rendering multiple views.
Features of React Router
 Declarative Routing: React Router v6 uses the Routes and Route components to define routes declaratively,
making the routing configuration simple and easy to read.
 Nested Routes: It supports nested routes, allowing for complex and hierarchical routing structures, which helps
in organizing the application better.
 Programmatic Navigation: The useNavigate hook enables programmatic navigation, allowing developers to
navigate between routes based on certain conditions or user actions.
 Route Parameters: It provides dynamic routing with route parameters, enabling the creation of routes that can
match multiple URL patterns.
 Improved TypeScript Support: Enhanced TypeScript support ensures that developers can build type-safe
applications, improving development efficiency and reducing errors.

React contains three different packages for routing. These are:

1. react-router: It provides the core routing components and functions for the React Router applications.
2. react-router-native: It is used for mobile applications.
3. react-router-dom: It is used for web applications design.
Install React Router
Open a command prompt and go to the root folder of our application.
D:\\my-app1\ npm install react-router-dom –save
or
D:\\my-app1\ npm install react-router-dom@6

Components in React Router

1. BrowserRouter and HashRouter
 BrowserRouter: Uses the HTML5 history API to keep your UI in sync with the URL. It is used for handling the
dynamic URL.
 HashRouter: Uses the hash portion of the URL (i.e., window.location.hash) to keep your UI in sync with the
URL. It is used for handling the static request.
<BrowserRouter>
(/* Your routes go here */}
</BrowserRouter>
2. Routes and Route
  Routes: A container for all your route definitions.
 Route: Defines a single route with a path and the component to render.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
3. Link and NavLink
 Link: Creates navigational links in your application.
 NavLink: Similar to Link but provides additional styling attributes when the link is active.
<nav>
<NavLink to="/" activeClassName="active">Home</NavLink>
<Link to="/about">About</Link>
</nav>

Steps to Create Routes using React Router

Step 1: Initialize React Project
Create React application using the following command.
npx create-react-app react-router-example
cd react-router-example
Step 2: Install React Router
Install react-router in your application write the following command in your terminal
npm install react-router-dom@6

//app.js
import React from "react";
import {
BrowserRouter as Router,
Routes,
Route,
Link,
useNavigate,
Outlet,
} from "react-router-dom";
// Home Page Component
const Home = () => {
const navigate = useNavigate();

return (
<div>
<h2>Home Page</h2>
<button onClick={() =>
navigate("/contact")}>Go to Contact</button>
</div>
);
};
// About Page Component
const About = () => (
<div>
<h2>About Page</h2>
<nav>
<ul>
<li>
<Link to="team">Our Team</Link>
</li>
 <li>
<Link to="company">Our Company</Link>
</li>
</ul>
</nav>
<Outlet />
</div>
);
// Components for other pages
const Contact = () => <h2>Contact Page</h2>;
const Team = () => <h2>Team Page</h2>;
const Company = () => <h2>Company Page</h2>;
function App() {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
{/*Implementing Routes for respective Path */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />}>
<Route path="team" element={<Team />} />
<Route path="company" element={<Company />} />
</Route>
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}
export default App;
//index.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
h2 {
text-align: center;
color: #333;
}
nav ul {
display: flex;
 justify-content: center;
list-style: none;
padding: 0;
}
nav li {
margin: 0 10px;
}

nav a {
text-decoration: none;
color: #333;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
//index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Uses of React Router
1. Navigation and Routing: React Router provides a declarative way to navigate between different views
or pages in a React application. It allows users to switch between views without refreshing the entire
page.
2. Dynamic Routing: React Router supports dynamic routing, which means routes can change based on
the application’s state or data, making it possible to handle complex navigation scenarios.
3. URL Management: React Router helps manage the URLs in your application, allowing for deep linking,
bookmarkable URLs, and maintaining the browser’s history stack.
4. Component-Based Approach: Routing is handled through components, making it easy to compose
routes and navigation in a modular and reusable way.

State Management:
State represents the value of dynamic properties of a React component at a given instance
i.e. State in ReactJS refers to an object that stores a component’s dynamic data and determines how the
component behaves. React provides a dynamic data store for each component. The internal data
represents the state of a React component and can be accessed using this.state member variable of the
component. Whenever the state of the component is changed, the component will re-render itself by
calling the render() method along with the new state.
Defining a State: State in React can be used with functional and class components. To work with state in a
component, there must exist a starting point, i.e. initial state. This initial state of a component must be
defined in the constructor of the component's class. Following is the syntax to define a state of any Class

state = {attribute: "value"};

Let us look at a sample code for a class component with an initial state

Class SampleClass extends React.Component

{
constructor(props)
{
super(props);
this.state = { name : "Sangola" };
}
}
State management API
As we learned earlier, React component maintains and expose it’s state through this.state of the
component. React provides a single API to maintain state in the component. The API is this.setState(). It
accepts either a JavaScript object or a function that returns a JavaScript object.

The signature of the setState API is as follows:

this.setState( { ... object ...} );
A simple example to set / update name is as follows:
this.setState( { name: 'John' } )
The signature of the setState with function is as follows:
this.setState( (state, props) => ... function returning JavaScript object ... );
Here,
 state refers the current state of the React component
 props refers the current properties of the React component.
React recommends to use setState API with function as it works correctly in async environment. Instead of
lambda function, normal JavaScript function can be used as well.
this.setState( function(state, props) { return ... JavaScript object ... }
A simple example to update the amount using function is as follows:
this.setState( (state, props) => ({ amount: this.state.amount + this.props.additionaAmount })
React state should not be modified directly through this.state member variable and updating the state
through member variable does not re-render the component.
A special feature of React state API is that it will be merged with the existing state instead of replacing the
state. For example, we can update any one of the state fields at a time instead of updating the whole object.
This feature gives the developer the flexibility to easily handle the state data.
For example, let us consider that the internal state contains a student record.
{
name: 'John', age: 16
}
We can update only the age using setState API, which will automatically merge the new object with the
existing student record object.
this.setState( (state, props) => ({
age: 18
});
Stateless component
 React component with internal state is called Stateful component and React component without any
internal state management is called Stateless component. React recommends to create and use as
many stateless component as possible and create stateful component only when it is absolutely
necessary. Also, React does not share the state with child component. The data needs to be passed
to the child component through child’s properties. These components don't have their own state.
They receive data from their parent component via props and simply render it.

Stateful Components
 Stateful Components: These components maintain state that determines their behavior or appearance.
Stateful components can be either class components or functional components (with React Hooks).
o Example: A presentational component that just displays data passed to it.

// app.js
import { useState } from 'react';
// Stateless component
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
// Stateful component
function App() {
const [name] = useState("Sangola");
return <Greeting name={name} />;
}
export default App;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

To change a value in the state object, use the this.setState() method.

When a value in the state object changes, the component will re-render, meaning that the output will change
according to the new value(s).

Always use the setState() method to change the state object, it will ensure that the component knows its been
updated and calls the render() method (and all the other lifecycle methods).
//app.js
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
 </p>
</div>
);
}
}

Index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

const container = document.getElementById('root');

const root = ReactDOM.createRoot(container);
root.render(<Car />);

Local State Management

In local state management, the state is only accessible and modifiable within the component it is defined in.
The useState hook in React allows developers to define and update local state within a component. The
useState hook takes in an initial value and returns an array with two elements: the current state and a
function to update the state.

Global State Management

In global state management, the state can be shared and accessed across multiple components. The
useContext hook in React allows developers to create a global state object and provide it to any component
that needs it. This eliminates the need for props drilling and makes it easier to communicate between
components. The code snippet and diagram below show an example of how global state in React we
development works.
useState vs useContext

The useState hook is used for managing local state within a component, while the useContext hook is used
for managing global state across multiple components. The useState hook is simpler to implement and is
great for small applications or components with limited state. However, as the application grows and the
number of stateful components increases, using the useState hook can become cumbersome. On the other
hand, the useContext hook requires more setup, but it provides a more scalable and efficient way of
managing global state in large applications.
Here’s an example of how you could use both the useState and useContext hooks in the same application:
 Redux
Redux is an open-source JavaScript library used to manage application state. React uses Redux for building
the user interface. It was first introduced by Dan Abramov and Andrew Clark in 2015.
React Redux is the official React binding for Redux. It allows React components to read data from a Redux
Store, and dispatch Actions to the Store to update data. Redux helps apps to scale by providing a sensible way
to manage state through a unidirectional data flow model. React Redux is conceptually simple. It subscribes
to the Redux store, checks to see if the data which your component wants have changed, and re-renders your
component.
Redux was inspired by Flux. Redux studied the Flux architecture and omitted unnecessary complexity.
o Redux does not have Dispatcher concept.
o Redux has an only Store whereas Flux has many Stores.
o The Action objects will be received and handled directly by Store.
Why use React Redux?
The main reason to use React Redux are:
o React Redux is the official UI bindings for react Application. It is kept up-to-date with any API
changes to ensure that your React components behave as expected.
o It encourages good 'React' architecture.
o It implements many performance optimizations internally, which allows to components re-render
only when it actually needs.

Redux Architecture

The components of Redux architecture are explained below.

Store: A Store is a place where the entire state of your application lists. It manages the status of the application
and has a dispatch(action) function. It is like a brain responsible for all moving parts in Redux.
Action: Action is sent or dispatched from the view which are payloads that can be read by Reducers. It is a pure
object created to store the information of the user's event. It includes information such as type of action, time of
occurrence, location of occurrence, its coordinates, and which state it aims to change.
Reducer: Reducer read the payloads from the actions and then updates the store via the state accordingly. It is a
pure function to return a new state from the initial state.
Redux Installation
Requirements: React Redux requires React 16.8.3 or later version.
To use React Redux with React application, you need to install the below command.
D://npm install redux react-redux --save

Step 1: Set Up a React App

We’ll begin by creating a new React app using Create React App. Open your terminal and execute the following
commands:
D:// npx create-react-app my-app1
d://cd my-app1
Here, create-react-app is a tool that sets up a new React project with a pre-configured development environment.
Step 2: Install Redux and React-Redux
Next, install the necessary dependencies for Redux and React-Redux:
D:// my-app1\npm install redux react-redux
Redux serves as the core library for state management, while React-Redux provides the official bindings that allow
React components to interact with the Redux store.
Step 3: Update the App Component
Open src/App.js and replace its content with the following code:
// src/App.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';
function App({ count, increment, decrement }) {
return (
<div className="App">
<h1>Redux Counter App</h1>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
const mapStateToProps = (state) => {
return {
count: state.count,
};
};
const mapDispatchToProps = {
increment,
decrement,
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
In this step, we define the main App component and connect it to the Redux store using the connect function from
React-Redux.
Key Concepts:
 connect: A function provided by React-Redux that connects a React component to the Redux store, enabling the
component to subscribe to store updates and dispatch actions.
 mapStateToProps: A function that maps the Redux state to the component props. It defines which part of the
Redux state is exposed to the component.
 mapDispatchToProps: An object or function that maps action creators to the component props. It simplifies the
process of dispatching actions from the component.
Step 4: Create Actions
Create a new folder named actions inside the src folder, and add a file named index.js with the following content:
// src/actions/index.js
export const increment = () => {
return {
type: 'INCREMENT',
};
};
export const decrement = () => {
return {
type: 'DECREMENT',
};
};
Actions in Redux are plain JavaScript objects that describe changes in the application state. In our example, we
define increment and decrement actions to modify the counter.
Step 5: Create Reducers
Create a new folder named reducers inside the src folder, and add a file named index.js with the following content:
 // src/reducers/index.js
const initialState = {
count: 0,
};
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
count: state.count + 1,
};
case 'DECREMENT':
return {
count: state.count - 1,
};
default:
return state;
}
};
export default counterReducer;
Reducers are functions that specify how the application state changes in response to actions.
The counterReducer takes the current state and an action and returns a new state based on the action type.
Key Concept:
Reducers: Functions that handle state changes in a Redux application. They take the current state and an action as
arguments and return a new state.
Step 6: Create a Redux Store
Open src/index.js and modify it as follows:
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import counterReducer from './reducers';
const store = createStore(counterReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
In this step, we create the Redux store using createStore from Redux. The Provider component from React-Redux
wraps the entire application, making the store accessible to all components.
Key Concepts:
createStore: A function from Redux that creates a Redux store to hold the complete state tree of the application.
Provider: A React component that makes the Redux store available to the entire React application.
Step 7: Start Development Server
Start your development server by running:
npm start

React Hooks
Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features
without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function
components. It does not work inside classes. Hooks allow function components to have access to state and other
React features. Because of this, class components are generally no longer needed.
Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace
your knowledge of React concepts.
When to use a Hooks
If you write a function component, and then you want to add some state to it, previously you do this by converting it
to a class. But, now you can do it by using a Hook inside the existing function component.
Rules of Hooks
Hooks are similar to JavaScript functions, but you need to follow these two rules when using them. Hooks rule
ensures that all the stateful logic in a component is visible in its source code. These rules are:
1. Only call Hooks at the top level
Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the
React functions. This rule ensures that Hooks are called in the same order each time a component renders.
2. Only call Hooks from React functions
You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function
components. Hooks can also be called from custom Hooks.
3. Hooks cannot be conditional

Pre-requisites for React Hooks

1. Node version 6 or above
2. NPM version 5.2 or above
3. Create-react-app tool for running the React App
React Hooks Installation
To use React Hooks, we need to run the following commands:
1. $ npm install [email protected] --save
2. $ npm install [email protected] --save
The above command will install the latest React and React-DOM alpha versions which support React Hooks. Make
sure the package.json file lists the React and React-DOM dependencies as given below.
1. "react": "^16.8.0-alpha.1",
2. "react-dom": "^16.8.0-alpha.1",
Hooks State
Hook state is the new way of declaring a state in React app. Hook uses useState() functional component for setting
and retrieving state. Let us understand Hook state with the following example.
App.js
import React, { useState } from 'react';

function CountApp() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default CountApp;
output:

In the above example, useState is the Hook which needs to call inside a function component to add some local state
to it. The useState returns a pair where the first element is the current state value/initial value, and the second one
is a function which allows us to update it. After that, we will call this function from an event handler or somewhere
else. The useState is similar to this.setState in class. The equivalent code without Hooks looks like as below.
App.js
import React, { useState } from 'react';

class CountApp extends React.Component {

constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p><b>You clicked {this.state.count} times</b></p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
export default CountApp;
Hooks Effect
The Effect Hook allows us to perform side effects (an action) in the function components. It does not use
components lifecycle methods which are available in class components. In other words, Effects Hooks are equivalent
to componentDidMount(), componentDidUpdate(), and componentWillUnmount() lifecycle methods.
Side effects have common features which the most web applications need to perform, such as:
o Updating the DOM,
o Fetching and consuming data from a server API,
o Setting up a subscription, etc.
Let us understand Hook Effect with the following example.
//app.js
import React, { useState, useEffect } from 'react';

function CounterExample() {
const [count, setCount] = useState(0);

// Similar to componentDidMount and componentDidUpdate:

useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default CounterExample;
The above code is based on the previous example with a new feature which we set the document title to a custom
message, including the number of clicks.
Output:

In React component, there are two types of side effects:

1. Effects Without Cleanup
2. Effects With Cleanup
Effects without Cleanup
It is used in useEffect which does not block the browser from updating the screen. It makes the app more
responsive. The most common example of effects which don't require a cleanup are manual DOM mutations,
Network requests, Logging, etc.
Effects with Cleanup
Some effects require cleanup after DOM updation. For example, if we want to set up a subscription to some external
data source, it is important to clean up memory so that we don't introduce a memory leak. React performs the
cleanup of memory when the component unmounts. However, as we know that, effects run for every render
method and not just once. Therefore, React also cleans up effects from the previous render before running the
effects next time.
Built-in Hooks
Here, we describe the APIs for the built-in Hooks in React. The built-in Hooks can be divided into two parts, which
are given below.

Basic Hooks
o useState
o useEffect
o useContext
Additional Hooks
o useReducer
o useCallback
o useMemo
o useRef
o useImperativeHandle
o useLayoutEffect
o useDebugValue

1. useState Example
You must import Hooks from react.
Here we are using the useState Hook to keep track of the application state.
State generally refers to application data or properties that need to be tracked.
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.

Import useState
To use the useState Hook, we first need to import it into our component.
State generally refers to data or properties that need to be tracking in an application.

At the top of your component, import the useState Hook.

import { useState } from "react";

Initialize useState
We initialize our state by calling useState in our function component.
useState accepts an initial state and returns two values:
 The current state.
 A function that updates the state.
Example:
Initialize state at the top of the function component.
import { useState } from "react";

function FavoriteColor()
{
const [color, setColor] = useState("");
}
Notice that again, we are destructuring the returned values from useState.
The first value, color, is our current state.
The second value, setColor, is the function that is used to update our state.

Lastly, we set the initial state to an empty string: useState("")

Read State
We can now include our state anywhere in our component.
Use the state variable in the rendered component.
import { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
const [color, setColor] = useState("red");

return <h1>My favorite color is {color}!</h1>

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<FavoriteColor />);

Update State
To update our state, we use our state updater function.
import { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
const [color, setColor] = useState("red");

return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
</>
)
}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<FavoriteColor />);

What Can State Hold

The useState Hook can be used to keep track of strings, numbers, booleans, arrays, objects, and any combination
of these!
We could create multiple state Hooks to track individual values.

//app.js
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
 function FavoriteColor() {
const [color, setColor] = useState("red");

return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<FavoriteColor />);

Custom Hooks
A custom Hook is a JavaScript function. The name of custom Hook starts with "use" which can call other Hooks. A
custom Hook is just like a regular function, and the word "use" in the beginning tells that this function follows the
rules of Hooks. Building custom Hooks allows you to extract component logic into reusable functions.
Let us understand how custom Hooks works in the following example.
import React, { useState, useEffect } from 'react';

const useDocumentTitle = title => {

useEffect(() => {
document.title = title;
}, [title])
}

function CustomCounter() {
const [count, setCount] = useState(0);
const incrementCount = () => setCount(count + 1);
useDocumentTitle(`You clicked ${count} times`);
// useEffect(() => {
// document.title = `You clicked ${count} times`
// });

return (
<div>
<p>You clicked {count} times</p>
<button onClick={incrementCount}>Click me</button>
</div>
)
 }
export default CustomCounter;
In the above snippet, useDocumentTitle is a custom Hook which takes an argument as a string of text which is a title.
Inside this Hook, we call useEffect Hook and set the title as long as the title has changed. The second argument will
perform that check and update the title only when its local state is different than what we are passing in.

2. React useEffect Hooks

The useEffect Hook allows you to perform side effects in your components.
Some examples of side effects are: fetching data, directly updating the DOM, and timers.
useEffect accepts two arguments. The second argument is optional.
useEffect(<function>, <dependency>)
Example:
Use setTimeout() to count 1 second after initial render:
//app.js
import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Timer() {
const [count, setCount] = useState(0);

useEffect(() => {
setTimeout(() => {
setCount((count) => count + 1);
}, 1000);
});

return <h1>I have rendered {count} times!</h1>;

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Timer />);

useEffect runs on every render. That means that when the count changes, a render happens, which then
triggers another effect.
This is not what we want. There are several ways to control when side effects run.
We should always include the second parameter which accepts an array. We can optionally pass
dependencies to useEffect in this array.

Effect Cleanup
Some effects require cleanup to reduce memory leaks.
Timeouts, subscriptions, event listeners, and other effects that are no longer needed should be disposed.
We do this by including a return function at the end of the useEffect Hook.

Example:- Clean up the timer at the end of the useEffect Hook:

//app.js
import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Timer() {
const [count, setCount] = useState(0);

useEffect(() => {
let timer = setTimeout(() => {
setCount((count) => count + 1);
}, 1000);
 return () => clearTimeout(timer)
}, []);

return <h1>I've rendered {count} times!</h1>;

}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

/*
Note: To clear the timer, we had to name it.
*/
3. useContext Hook
React Context
React Context is a way to manage state globally.
It can be used together with the useState Hook to share state between deeply nested components more
easily than with useState alone.
Create Context
To create context, you must Import createContext and initialize it:
import { useState, createContext } from "react";
import ReactDOM from "react-dom/client";

const UserContext = createContext()

Context Provider
Wrap child components in the Context Provider and supply the state value.
function Component1() {
const [user, setUser] = useState("Jesse Hall");

return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}

Use the useContext Hook

In order to use the Context in a child component, we need to access it using the useContext Hook.
First, include the useContext in the import statement:
import { useState, createContext, useContext } from "react";

Then you can access the user Context in all components:

function Component5() {
const user = useContext(UserContext);

return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Example:
//app.js
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const UserContext = createContext();

function Component1() {
const [user, setUser] = useState("Jesse Hall");

return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 />
</UserContext.Provider>
);
}

function Component2() {
return (
<>
<h1>Component 2</h1>
<Component3 />
</>
);
}

function Component3() {
return (
<>
<h1>Component 3</h1>
<Component4 />
</>
);
}

function Component4() {
return (
<>
<h1>Component 4</h1>
<Component5 />
</>
);
}

function Component5() {
const user = useContext(UserContext);

return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);