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

We'll list the skills that an individual possesses in the `Skills` component.

## Add the skills
We define a `skillsArr` variable that contains an array of skills. Following that, we define a `skills` variable that returns the list of skills after mapping over the `skillsArr`. Here’s how we’ll do it.

```
const skillsArr = ['JavaScript', 'HTML', 'CSS', 'Reactjs', 'Git']

const skills = skillsArr.map((skill, index) => {
  return <li className='skill' key={index}>{skill}</li>
})
```
## Return the `skills`
We’ll now return the `skills` in a `div` with `className=skills` to display them on the screen. The following snippet explains this process:

```
return (
  <div className='skills'>
    <h2 className='title'>Skills</h2>
    <div className='skill-holder'> 
    {skills}</div>
  </div>
) 
```



We'll list the skills that an individual possesses in the `Skills` component.

# Add the skills
We define a `skillsArr` variable that contains an array of skills. Following that, we define a `skills` variable that returns the list of skills after mapping over the `skillsArr`. Here’s how we’ll do it.

```
const skillsArr = ['JavaScript', 'HTML', 'CSS', 'Reactjs', 'Git']

const skills = skillsArr.map((skill, index) => {
  return <li className='skill' key={index}>{skill}</li>
})
```
# Return the `skills`
We’ll now return the `skills` in a `div` with `className=skills` to display them on the screen. The following snippet explains this process:

```
return (
  <div className='skills'>
    <h2 className='title'>Skills</h2>
    <div className='skill-holder'> 
    {skills}</div>
  </div>
) 
```



Learn to add skills using the map method.

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

Add the Skills Component

Add the skills