Experiment: 05

Name: Swarangi Prakash Toraskar

Problem Statement 0: Basics of ReactJs

1) What is React and what problem does it solve?

React is a JavaScript library for building user interfaces, primarily for single-page
applications (SPAs). It allows developers to create reusable UI components and
efficiently update the UI when data changes. React solves the problem of managing
complex UIs by using a virtual DOM, which improves performance by minimizing direct
DOM manipulations.

2) What are React components and how are they used?

React components are the building blocks of a React application. They are reusable,
self-contained pieces of UI that can be classified as functional or class components.
Components are used to structure applications by breaking down the UI into smaller,
manageable parts. They accept inputs (props) and return React elements describing
what should be rendered on the UI.

3) What is JSX in React?

JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It allows
developers to write HTML-like code within JavaScript, making it easier to create and
manage UI components. JSX is transpiled into JavaScript using tools like Babel before
execution.

4) What are props in React and how do they differ from state?

Props (short for "properties") are read-only inputs passed to components from their
parent components. They allow data to flow from parent to child components.
State, on the other hand, is a mutable object that stores component-specific data.
Unlike props, state is managed within the component and can be modified using the
setState method (in class components) or the useState hook (in functional
components).
5) What is state in React and how does it work?

State is an object that stores component-specific data that can change over time. When
state updates, React triggers a re-render of the component to reflect the new data in the
UI.

• In class components, state is managed using this.state and updated using

• In functional components, the useState hook is used to handle state changes.

6) What are React lifecycle methods, and why are they important?

React lifecycle methods are special methods in class components that allow
developers to control component behavior during different phases of its existence. They
are categorized into:

• Mounting (e.g., componentDidMount) – Executed when a component is added

• Updating (e.g., componentDidUpdate) – Triggered when props or state change.

• Unmounting (e.g., componentWillUnmount) – Executed when a component is

These methods are important for managing side effects, optimizing performance, and
handling API calls.

7) Elaborate on the following React concepts:

Event Handling

React handles events using camelCase syntax (e.g., onClick) instead of lowercase.
Events in React are wrapped in SyntheticEvent to provide cross-browser compatibility.

jsx

CopyEdit

<button onClick={() => alert("Clicked!")}>Click Me</button>

Conditional Rendering

Conditional rendering allows components to render dynamically based on certain

jsx
CopyEdit

{isLoggedIn ? <Dashboard /> : <Login />}

Lists and Keys

Lists in React are created using .map(). Keys help React efficiently update the UI by
uniquely identifying list items.

jsx

CopyEdit

{items.map(item => <li key={item.id}>{item.name}</li>)}

Forms

React handles forms using controlled components, where the state controls input
values.

jsx

CopyEdit

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

<input type="text" value={name} onChange={(e) => setName(e.target.value)} />

Hooks

Hooks are functions that allow functional components to use state and lifecycle
features.

• useState: Manage state.

• useEffect: Handle side effects.

• useContext: Use React Context API.

React Router

React Router enables navigation between pages without reloading.

jsx

CopyEdit

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

<Router>

<Switch>
 <Route path="/about" component={About} />

</Switch>

</Router>

State Management

State management ensures that data flows efficiently across components. Methods
include React’s built-in state, Context API, Redux, and Zustand.

React Context API

Context API allows data to be shared across components without prop drilling.

jsx

CopyEdit

const ThemeContext = React.createContext("light");

<ThemeContext.Provider value={theme}>

<ChildComponent />

</ThemeContext.Provider>

8) How can you optimize the performance of a React application?

Optimizing React Performance:

• Use React.memo: Prevent unnecessary re-renders.

• Lazy Loading & Code Splitting: Load components dynamically.

• Use useCallback and useMemo: Optimize function and value references.

• Optimize re-renders: Avoid updating state unnecessarily.

• Virtualize Lists: Improve performance when handling large datasets with

• Server-Side Rendering (SSR): Improve initial page load performance.

By implementing these strategies, React applications can be more efficient and

API Link : click