SUBJECT: CSS(22519) ACADEMIC YEAR: 2024-25

Click to edit Master title style SEMESTER: FIFTH

REACT JS
LIBRARY
Under the guidance of
MAYUR KHARIK

Third year of Diploma program in Engineering and Technology of Maharashtra State board of
Technical education, Mumbai. AT
SHIVAJIRAO . S . JONDHLE .POLYTECHNIC , ASANGAON
1
Click to edit Master title style

GROUP MEMBERS
Roll no. Enrollment Seat no.
Sr. no. Name of student
(sem – 4) No. (sem – 4)

1 25 Vishal Chakradhari Yennam 2209350238

2 27 Soham Rajesh Pitale 2209350240

3 37 Shreyash Ashok Vekhande 2209350259

4 36 Ayyan Safi Bardi 2209350257

2 2
Click to edit Master title style
CONTENT
- Introduction to React
- Why Use React?
- React Virtual DOM
- React Components
- JSX (JavaScript XML)
- State and Props in React
- React Lifecycle Methods
- Event Handling in React
- Hooks in React
- React Router for Navigation
- Managing Data with Redux
- P o p u l a r R e a c t L i b r a r i e s a n d To o l s
- Conclusion & References
3 3
Click to edit Master
INTRODUCTION TO REACT
title style

React is a powerful JavaScript library developed by Facebook in 2013 for building user
interfaces, particularly single-page applications where data changes over time. Designed
to simplify the process of building dynamic web applications, React allows developers to
break down complex interfaces into reusable components, making code easier to manage
and test. One of its core features is the virtual DOM (Document Object Model), which
improves performance by updating only parts of the actual DOM that need changes,
instead of re-rendering the entire page. React also uses JSX (JavaScript XML), a syntax
that combines HTML with JavaScript, allowing for a more intuitive way to structure
components. Today, React is widely adopted and supported by a large community,
continuously evolving with features such as hooks, which enable state management and
side effects in functional components.

4 4
Click USE
WHY to edit
REACT?
Master title style

React is widely used because it simplifies the process of building complex, interactive user interfaces
through its efficient and flexible design. By leveraging a virtual DOM, React enhances performance
by only updating parts of the UI that need changes, instead of re-rendering the entire page, which is
ideal for dynamic applications with frequently changing data. Its component-based architecture
promotes reusability, allowing developers to break down complex interfaces into smaller,
manageable pieces that can be used across different parts of an application. Additionally, React’s
declarative syntax with JSX (JavaScript XML) makes code more readable and easier to debug. The
library is further supported by a vast ecosystem of tools, libraries, and a robust community, which
provides extensive resources and continuous updates, making React a reliable choice for modern
web development.

5 5
Click toVIRTUAL
REACT edit Master
DOMtitle style

The Virtual DOM (Document Object Model) in React is a key feature that significantly enhances the
performance of web applications. Instead of directly manipulating the real DOM, which can be slow
and resource-intensive, React uses a lightweight copy known as the virtual DOM. When an update
occurs, React first updates the virtual DOM, compares it to the previous version using a process
called "reconciliation," and then calculates the most efficient way to apply changes to the real DOM.
This selective update process minimizes the number of actual DOM manipulations, resulting in faster
rendering times and a smoother user experience. By ensuring that only changed elements are re-
rendered, the virtual DOM allows React to handle complex, dynamic interfaces efficiently, making it
an ideal choice for building high-performance applications.

6 6
Click toCOMPONENTS
REACT edit Master title style

React components are the fundamental building blocks of a React application, providing a modular and
reusable way to structure user interfaces. A component in React is essentially a JavaScript function or
class that returns a part of the UI, typically written using JSX (JavaScript XML). Components are of two
types: **functional** and **class-based**, with functional components being the preferred choice since
the introduction of hooks in React 16.8. These components can accept **props** (short for properties),
which allow dynamic data to be passed in from their parent components, and they can maintain their
own **state** to manage changes within the component. This makes components highly dynamic, as
they can react to user inputs, perform updates, and rerender efficiently. By promoting code reusability
and separation of concerns, React components make it easier to manage and scale complex UIs.
Components can be nested, allowing for a hierarchical structure where parent components pass data
down to child components, creating a clear, maintainable flow of data throughout the application.

7 7
Click(JavaScript
JSX to edit Master
XML)title style

JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write HTML-like
code within JavaScript. It is primarily used in React to define the structure and layout of UI
components. JSX makes it easier to visualize the UI by blending HTML structure with JavaScript
logic in a single, concise file. Despite looking similar to HTML, JSX is ultimately compiled into React's
`React.createElement` calls, which the browser can render. One of its key benefits is that it enables a
more declarative and readable way to structure the user interface, while still allowing developers to
incorporate dynamic JavaScript logic. JSX can also include expressions and variables, making it
powerful for building interactive and dynamic web applications.

8 8
Click to
State andedit
Props
Master
in React
title style

In React, **state** and **props** are two fundamental concepts used for managing and passing data
within components. **Props** (short for "properties") are used to pass data from a parent component
to a child component. They are immutable, meaning that a child component cannot change the props
it receives. Props enable components to be reusable and dynamic by allowing different values to be
passed into the same component. On the other hand, **state** is used to manage data that can
change over time within a component. Unlike props, state is mutable, and it allows components to
track changes, such as user interactions or fetched data. When state changes, React automatically
re-renders the component to reflect the updated data. While props allow for communication from
parent to child components, state is primarily used for managing data within a component itself,
offering greater control over the UI's dynamic behavior. Together, state and props enable React's
powerful, interactive, and responsive applications.

9 9
Click to
React Lifecycle
edit Master
Methods
title style

React lifecycle methods are functions that allow developers to hook into specific moments during the
lifecycle of a React component, providing control over how components are initialized, updated, and
destroyed. These methods are particularly useful in class components, as they allow for tasks like
data fetching, event listeners, and manual DOM updates. The most common lifecycle methods
include **`componentDidMount`**, which is called after the component is rendered for the first time,
ideal for data fetching or setup; **`shouldComponentUpdate`**, which allows the developer to
optimize performance by deciding whether a re-render is necessary; and **`componentDidUpdate`**,
which is triggered after the component re-renders, useful for handling updates that depend on
previous props or state. Additionally, **`componentWillUnmount`** is used for cleanup before the
component is removed from the DOM, such as removing event listeners. In modern React, lifecycle
methods are less frequently used in favor of **React Hooks**, which provide similar functionality in a
more concise and flexible way within functional components.

1010
Click toinedit
Hooks React
Master title style

React **Hooks** are functions that allow developers to use state and lifecycle features in functional
components, which were traditionally only available in class components. Hooks were introduced in
React 16.8 to provide a simpler and more concise way to manage side effects, state, and context in
React components. The most commonly used hooks are **`useState`**, which lets you add state to a
functional component, and **`useEffect`**, which handles side effects like fetching data or
subscribing to events. **`useContext`** allows access to React’s Context API, enabling state to be
shared across components without explicitly passing props. Hooks simplify code by reducing the
need for lifecycle methods and class-based components, making functional components more
powerful and easier to manage. They also promote reusability, as hooks can be extracted into
custom functions for shared logic across components. This shift towards hooks has been a
significant part of React's evolution, making it more efficient and developer-friendly.

1111
Click to
React Router
edit Master
for Navigation
title style

React Router is a powerful library for handling navigation and routing in React applications. It
enables developers to define multiple routes for different components, allowing users to navigate
between pages or views without reloading the entire page, creating a seamless single-page
application (SPA) experience. With React Router, developers can use **`<Route>`** components to
map URL paths to React components, and **`<Link>`** components to navigate between routes.
React Router also supports nested routes, route parameters, and programmatic navigation, making it
highly flexible for managing complex routing scenarios. Additionally, it offers hooks like
**`useHistory`**, **`useLocation`**, and **`useParams`** to interact with the router within functional
components. This ability to manage dynamic routing and handle different user flows efficiently is why
React Router is an essential tool for building modern React applications.

1212
Click to edit
Managing DataMaster
with title
Redux style

Managing data with **Redux** is an essential practice in large-scale React applications to handle
complex state management. Redux provides a predictable state container that helps manage the
state of the application in a centralized store. This store is immutable and can only be updated by
dispatching **actions**, which describe the changes that should occur. These actions are processed
by **reducers**, which are pure functions that specify how the state changes in response to an
action. By keeping the state in a single store and using actions to modify it, Redux ensures that the
data flow is predictable, making debugging and testing easier.

In addition to the core principles of Redux, it also offers middleware like **Redux Thunk** or **Redux
Saga**, which allow for handling asynchronous actions such as API calls and data fetching. This is
especially useful in applications that require managing side effects like fetching data or performing
background operations. Redux also works well with React’s **React-Redux** library, which connects
React components to the Redux store and helps manage state across different components, making
it a valuable tool for maintaining and accessing application-wide state. Overall, Redux simplifies state
management, reduces complexity, and enhances the scalability of React applications.

1313
Click to edit
Popular ReactMaster
Libraries
titleand
style
Tools

React has a thriving ecosystem of popular libraries and tools that enhance development and improve
application performance. **React Router** is widely used for handling navigation and routing,
enabling developers to build single-page applications with seamless transitions between views.
**Redux** is a powerful state management tool, allowing developers to manage complex global
states in React apps with predictable actions and reducers. For managing forms, **Formik** and
**React Hook Form** are highly regarded for simplifying form handling, validation, and state
management. **Styled-components** allows developers to use tagged template literals to write CSS
directly in JavaScript, providing a more modular and scoped approach to styling components.

**Material-UI** offers a set of React components that implement Google's Material Design, helping
developers quickly create aesthetically pleasing and responsive UIs. **React Query** is popular for
data fetching, caching, and synchronization, significantly simplifying the handling of server-state in
React applications. Additionally, tools like **Create React App** provide a zero-configuration setup for
React projects, making it easier for developers to get started quickly. Together, these libraries and
tools streamline the development process, improve code quality, and enhance the overall React
development experience.

1414
Click to edit Master
CONCLUSION & REFERENCES
title style

In conclusion, React is a powerful JavaScript library https://reactjs.org

that streamlines the development of dynamic,
interactive web applications. Its component-based https://redux.js.org
architecture, combined with features like the virtual
DOM and hooks, enables developers to build https://www.material-ui.com
scalable and high-performance UIs. With a wide
range of tools and libraries supporting routing, state https://react-query.tanstack.com
management, and styling, React remains one of the
most popular choices for front-end development, https://reactrouter.com
offering flexibility and efficiency for developers.

1515
Click to edit Master title style

Thank You

16