Build real-world React projects, from a to-do list and quiz app to weather dashboards and portfolios, while mastering components, state, props, API integration, and assessments at every level.

Become a React Developer

This module takes a project-oriented approach. We'll start by building a “My To-do List” application, using localStorage, useEffect, and useState hooks, as well as setTimeout and nanoid. Then, we will build a “Quiz” application while learning to use the confetti package and ternary operator. Next, we’ll cover the fetch API and build the “Pretty Sunny” project. Next, we’ll create the “Asia Explorer” memory game, creating catchy effects by dynamically adding class names. Then, we will implement a “Personal Portfolio” application. Finally, we will create a “GitHub Readme” profile to help us showcase our projects on GitHub.

Building Real-World Projects with React

## The `ToDoList` component

Let’s now import the `ToDoList` component and set the `item` and `onDelete` properties. The `item` property contains an array of tasks that are mapped over to display a list of tasks.

The `onDeleteHandler` method handles the `onDelete` function, which deletes the tasks based on their unique ids. We return the `ToDoList` component after importing the component.

```
<form> ... </form>

<ToDoList/>
```
### Passing the list

The value of the `toDoList` state used for the `useState` hook is now stored in this `item` prop.

```
<ToDoList
  item={toDoList}
/>
```

Then we write the `onDeleteHandler` function, which takes the `itemID`. That’s the element’s unique id. We then use the `filter` method to populate `setToDoList` with all elements except for that with the given `id`.

> **Note:** Read more about the filter function from the following Educative Answer post on[filter](https://www.educative.io/answers/what-is-the-javascript-array-filter).

Each time we click the “delete” button, the `itemID` parameter takes the unique `id` of that task as the value.

```
const onDeleteHandler = (itemID) => {
  setToDoList((oldValues) =>
     oldValues.filter((item) => {
       return item.id !== itemID;
     })
  );
};
```
This function should now pass to the `ToDoList` component.

```
<ToDoList
  item={toDoList}
  onDelete={onDeleteHandler}
/>
```
We should now get the following snippet after combining all the code above:

# The `ToDoList` component

Let’s now import the `ToDoList` component and set the `item` and `onDelete` properties. The `item` property contains an array of tasks that are mapped over to display a list of tasks.

The `onDeleteHandler` method handles the `onDelete` function, which deletes the tasks based on their unique ids. We return the `ToDoList` component after importing the component.

```
<form> ... </form>

<ToDoList/>
```
## Passing the list

The value of the `toDoList` state used for the `useState` hook is now stored in this `item` prop.

```
<ToDoList
  item={toDoList}
/>
```

Then we write the `onDeleteHandler` function, which takes the `itemID`. That’s the element’s unique id. We then use the `filter` method to populate `setToDoList` with all elements except for that with the given `id`.

> **Note:** Read more about the filter function from the following Educative Answer post on[filter](https://www.educative.io/answers/what-is-the-javascript-array-filter).

Each time we click the “delete” button, the `itemID` parameter takes the unique `id` of that task as the value.

```
const onDeleteHandler = (itemID) => {
  setToDoList((oldValues) =>
     oldValues.filter((item) => {
       return item.id !== itemID;
     })
  );
};
```
This function should now pass to the `ToDoList` component.

```
<ToDoList
  item={toDoList}
  onDelete={onDeleteHandler}
/>
```
We should now get the following snippet after combining all the code above:

Get to know how to pass the props in a function.


Import ToDoList Component

Get to know how to pass the props in a function.

Overview

Project—My ToDo List

React Fundamental Assessment

Project—JavaScript Quiz

React Beginner Assessment

Project—Pretty Sunny

React Intermediate Assessment

Project—Asia Explorer

Advance Level React Assessment

Project—Personal Portfolio

React Final Assessment

GitHub Readme Profile

Conclusion

Import ToDoList Component

The `ToDoList` component

Overview

Project—My ToDo List

React Fundamental Assessment

Project—JavaScript Quiz

React Beginner Assessment

Project—Pretty Sunny

React Intermediate Assessment

Project—Asia Explorer

Advance Level React Assessment

Project—Personal Portfolio

React Final Assessment

GitHub Readme Profile

Conclusion

Import ToDoList Component

The ToDoList component

The `ToDoList` component