Hands-On Coding Exercises

Exercise 1: Building a To-Do List App

Objectives:

• Create a functional To-Do List application.

• Practice state management using useState.

• Implement adding, editing, and deleting tasks.

• Use conditional rendering to display tasks based on their status (completed or pending).

Guidelines:

1. Create a ToDoList component to manage the list of tasks.

2. Create a ToDoItem component to represent each task.

3. Use useState to manage the state of tasks.

4. Implement functions to add, edit, and delete tasks.

5. Use conditional rendering to display tasks based on their status.

Exercise 2: Building a Weather App

Objectives:

• Create a Weather application that fetches data from a weather API.

• Practice using useEffect for data fetching.

• Manage global state using Context to share data between components.

• Display weather information dynamically based on user input (city name).

Guidelines:

1. Set up a weather API key and URL.

2. Create a WeatherProvider using Context to manage global state.

3. Use useEffect to fetch weather data when the component mounts.

4. Create a SearchBar component to allow users to input the city name.

5. Display the fetched weather information in a WeatherDisplay component.

Exercise 3: Building a Shopping Cart

Objectives:

• Create a Shopping Cart application.

• Practice using useReducer for managing complex state logic.

• Implement adding, removing, and updating the quantity of items in the cart.

• Use Context to provide cart state and actions to multiple components.

Guidelines:

1. Create a CartProvider using Context and useReducer.

2. Define actions for adding, removing, and updating items in the cart.

3. Create components for displaying products and the shopping cart.

4. Implement functions to handle adding, removing, and updating items.

5. Display the total price and item count dynamically.

---

Help us improve the content 🤩

You can leave comments here.