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

The `Header` component in the `header.js` file is responsible for displaying our app name, JavaScript Quiz, on the top of our screen. To style the `Header` component, we give it the `header` class, which already has properties in the `index.css` file attached to it.
```
<div className="header">
   <h1>JavaScript Quiz </h1>
</div>
```



# Add the questions
We’ve included 10 JavaScript questions in our app, but we’re free to add as many questions as we want on any topic. A component can be exported through a named export or the `default` export.

## Named export 
When using named exports, we don’t use the word `default`. Instead, we use curly brackets while importing the named exports, as shown in the following snippet:

```
// Export
export componentName

// Import
import {componentName} from "./file"
```

## Using `default` export 

Unlike the named export, we use the `default` keyword to export and import the component without using the curly brackets, as shown in the following snippet:

```
// Export
export default componentName

// Import
import componentName from "./file"
```

## Export the questions array

In the JavaScript Quiz application, we use the named export technique to export our questions, as shown in the following snippet:

```
export const questions = [ 
   ....
]
```
Combining the snippets above, we get the following widget:

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