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

The `Header` component has the name of our project, which is Asia Explorer, and the button that calls the `onShuffle` function.

## Add the name

We can use any name here, but we’ll use Asia Explorer. The following snippet shows how to add the project’s name to the application:

```
const Header = () => {
  return (
    <React.Fragment>
      <h1 className="header">Asia Explorer</h1>
    </React.Fragment>
  );
};

export default Header;
```

## Add the "shuffle" button
We’ll add the “shuffle” button, which starts a new game with reshuffled cards and resets our `Turns` to zero. To make it functional, we receive the `onShuffle` function as a prop in our component and pass this `onShuffle` function as an attribute to the `onClick` event.

Here’s how we can add the button.


```
const Header = ({onShuffle}) => {
  return (
    <React.Fragment>
      <h1 className="header">Asia Explorer</h1>
      <button onClick={onShuffle}>New Game</button>
    </React.Fragment>
  );
};

export default Header;
```
We get the following code by combining all snippets and importing the `Header` component in `App.js`:


The `Header` component has the name of our project, which is Asia Explorer, and the button that calls the `onShuffle` function.

# Add the name

We can use any name here, but we’ll use Asia Explorer. The following snippet shows how to add the project’s name to the application:

```
const Header = () => {
  return (
    <React.Fragment>
      <h1 className="header">Asia Explorer</h1>
    </React.Fragment>
  );
};

export default Header;
```

# Add the "shuffle" button
We’ll add the “shuffle” button, which starts a new game with reshuffled cards and resets our `Turns` to zero. To make it functional, we receive the `onShuffle` function as a prop in our component and pass this `onShuffle` function as an attribute to the `onClick` event.

Here’s how we can add the button.


```
const Header = ({onShuffle}) => {
  return (
    <React.Fragment>
      <h1 className="header">Asia Explorer</h1>
      <button onClick={onShuffle}>New Game</button>
    </React.Fragment>
  );
};

export default Header;
```
We get the following code by combining all snippets and importing the `Header` component in `App.js`:


Learn how to add the shuffle button and the name of the project.

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

The Header Component

Add the name