api_key_weather_app

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 the `Header` component

The `Header` component displays the app’s name on the top of the screen. We’ll name our app “Pretty Sunny” and add the `heading` class. This class has the styling properties added to it in the `styles.css` file. We then import the `Header` component into the `App.js` file so that it can be displayed on the screen. The `Header` component is shown in the following snippet:

```
const Header = () => {
  return <div className="heading">Pretty Sunny</div>;
};

export default Header
```

We get the following widget by using the code provided above:

# Add the `Header` component

The `Header` component displays the app’s name on the top of the screen. We’ll name our app “Pretty Sunny” and add the `heading` class. This class has the styling properties added to it in the `styles.css` file. We then import the `Header` component into the `App.js` file so that it can be displayed on the screen. The `Header` component is shown in the following snippet:

```
const Header = () => {
  return <div className="heading">Pretty Sunny</div>;
};

export default Header
```

We get the following widget by using the code provided above:

Add the header component and apply a style to it.

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

Header Component

Add the `Header` component