api_key_weather_app

Gain insights into creating five dynamic applications with ReactJS. Delve into hooks, APIs, and localStorage while building projects like to-do lists, quizzes, memory games, portfolios, and GitHub profiles.

ReactJS is one of the most well-known JavaScript frameworks. It was created by Facebook (now Meta). Being component-based and drawing on the most recent theories behind design systems, it allows you to design frontend software quickly and create dynamic user interfaces.

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

Ultimately, you’ll be able to highlight your achievements on your resume, thus boosting your chances of landing a job.

Creating Five Impactful Applications with ReactJS

# Add ToDoList

Because we’re working with function-based components, we can also pass arguments and parameters to React components, like we can with functions in JavaScript. This `ToDoList` component takes props (properties) and provides data to these props as an argument when we call the `ToDoList` component in the `input.js` file. The component receives the argument as a props object. We create a list of tasks that appear in CSS-grid format to show our output.

## List of tasks
We pass an `item` property to this component that has an array of all task objects with `toDo` properties. These properties have the value input task and unique `id` created by `nanoid`. We then `map` over the item tasks to return them.


```
<ul className="appToDoHolder">
  {(props.item).map((item) => {
  return ()
</ul>
```

## Add the unique ids

Mapping over the `item` array returns the object with the `id` property, which we pass as `key` props into the `div`.
>**Note:** Passing the unique `id` only with the `key` prop is mandatory.

```
return (
  <ul className="appToDoHolder">
  {(props.item).map((item) => {
    return (
     <div className="appToDo" key={item.id}> </div>
    )
  })}     
);
```

## Add the Todo task

We also get tasks as a `toDo` property that passes into the `<li></li>` element.

```
return (
  <ul className="appToDoHolder">
  {(props.item).map((item) => {
    return (
     <div className="appToDo" key={item.id}>
       <li>{item.toDo}</li>           
     </div>
    )   
  })}  
);
```

## Add the `onDelete` function

The `onDelete` attribute handles the `onDeleteHandler` method, which deletes the task. We’ll send `item.id` as an argument to the `onDeleteHandler` to delete only the selected item. Because we’re calling `onDeleteHandler` on every click in this component, we pass `item.id` here.

```
return (
  <ul className="appToDoHolder">
  {(props.item).map((item) => {
    return (
     <div className="appToDo" key={item.id}>
       <li>{item.toDo}</li> 
         <button 
         className="appDelete" 
         title="delete"
         onClick={() => 
        props.onDelete(item.id)}> Delete </button>          
     </div>
    )   
  })}  
);
```

Combining all code snippets above produces the following snippet:

Learn how to further break down a React component into smaller parts.


ToDoList Component

Learn how to further break down a React component into smaller parts.

Course Overview

My Todo List

React Fundamental Assessment

JavaScript Quiz

React Beginner Assessment

Pretty Sunny

React Intermediate Assessment

Asia Explorer

Advance Level React Assessment

Personal Portfolio

React Final Assessment

GitHub Readme Profile

Conclusion

ToDoList Component

Add ToDoList