4_Advanced React Concepts.

md 2024-10-24

Session 4: Advanced React Concepts

1. Introduction to Advanced React Concepts (10 minutes)

Objective: Understand the session's focus on advanced React topics, including state management with hooks
and routing with React Router.

2. State Management with React Hooks (25 minutes)

Objective: Learn how to manage state using useState and useContext hooks.

2.1. useState Hook Recap:

Adds state to functional components.

Returns an array with the current state and a function to update it.

Example:

// CounterComponent.jsx
import React, { useState } from "react";

const CounterComponent = () => {

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

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

export default CounterComponent;

2.2. useContext Hook:

Simplifies state management across components without prop drilling.

Allows sharing state globally across your app.

Steps for Using useContext:

1. Creating a Context: Define a context using createContext.

2. Providing Context: Wrap the component tree with Context.Provider.
3. Consuming Context: Use the useContext hook to access the context's value.

Multi-File Example:

1/5
4_Advanced React Concepts.md 2024-10-24

File 1: ItemContext.js (Creating the Context)

// ItemContext.js
import React, { createContext, useState } from "react";

const ItemContext = createContext();

const ItemProvider = ({ children }) => {

const [items, setItems] = useState([]);

const addItem = (item) => {

setItems([...items, item]);
};

return (
<ItemContext.Provider value={{ items, addItem }}>
{children}
</ItemContext.Provider>
);
};

export { ItemContext, ItemProvider };

File 2: ItemList.jsx (Consuming the Context)

// ItemList.jsx
import React, { useContext } from "react";
import { ItemContext } from "./ItemContext";

const ItemList = () => {

const { items } = useContext(ItemContext);

return (
<div>
<h2>Item List</h2>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
};

export default ItemList;

File 3: AddItem.jsx (Updating State with Context)

2/5
4_Advanced React Concepts.md 2024-10-24

// AddItem.jsx
import React, { useState, useContext } from "react";
import { ItemContext } from "./ItemContext";

const AddItem = () => {

const [newItem, setNewItem] = useState("");
const { addItem } = useContext(ItemContext);

const handleAddItem = () => {

addItem(newItem);
setNewItem("");
};

return (
<div>
<input
type="text"
value={newItem}
onChange={(e) => setNewItem(e.target.value)}
placeholder="Enter a new item"
/>
<button onClick={handleAddItem}>Add Item</button>
</div>
);
};

export default AddItem;

File 4: App.jsx (Combining Everything)

// App.jsx
import React from "react";
import { ItemProvider } from "./ItemContext";
import ItemList from "./ItemList";
import AddItem from "./AddItem";

const App = () => {

return (
<ItemProvider>
<div>
<h1>Item Management</h1>
<AddItem />
<ItemList />
</div>
</ItemProvider>
);
};

export default App;

3/5
4_Advanced React Concepts.md 2024-10-24

3. Routing in React: React Router Basics (25 minutes)

Objective: Learn how to implement routing with React Router.

3.1. What is React Router?

Allows for navigation between components without refreshing the page.

Key Components:

1. BrowserRouter: Wraps the app.

2. Route: Defines a route for rendering components.
3. Link: Enables navigation.

3.2. Multi-File Example:

File 1: App.jsx (Setting Up Routing)

// App.jsx
import React from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { ItemProvider } from "./ItemContext";
import ItemList from "./ItemList";
import AddItem from "./AddItem";

const Home = () => <h2>Home Page</h2>;

const About = () => <h2>About Page</h2>;

const App = () => {

return (
<ItemProvider>
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/items">Items</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route
path="/items"
element={
<div>
<AddItem />
<ItemList />
</div>
}
/>
<Route path="/about" element={<About />} />
</Routes>
</Router>

4/5
4_Advanced React Concepts.md 2024-10-24

</ItemProvider>
);
};

export default App;

4. Hands-On Exercise: Enhancing the React Application (30 minutes)

Objective: Apply the concepts by enhancing the application with routing and hooks.

Instructions:

1. Set Up React Router: Install if not already done.

2. Create Components: Make Home and About.
3. Implement Routing:
Use BrowserRouter to wrap the app.
Add links using the Link component.
Set up routes for Home, Items, and About.
4. State Management: Use useContext for global state.

5. Discussion: Managing State and Navigation in Modern Applications (15 minutes)

Objective: Discuss best practices for managing state and navigation.

State Management:

Local State vs. Global State:

Local State: For component-specific data (e.g., form inputs).
Global State: For data shared across components (e.g., user authentication).
Libraries like Redux: Useful for complex state management.

Routing Best Practices:

Nested Routes: For rendering components within components.

Dynamic Routing: Use useParams to extract route parameters.
User Experience: Keep navigation simple.

6. Homework Assignment (5 minutes)

Coding Assignment:

Refactor your application to include a performance optimization.

5/5