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

We’ll use an API to fetch weather data from the [OpenWeather](https://openweathermap.org/) website.

> **Note:** Because we’re using an API in this section, you need to create a personal API key from the website. You need to add the generated API key value in the `api_key_weather_app` value slot.

# Import the hooks
To store the weather data received from the API, we must import `useState` to store the weather data's current state. We'll need to import the `useEffect` hook as well so that our fetch can run whenever the dependencies change. The following snippet shows how to import the required hooks:


```
import {useState, useEffect} from the "react"
```
# Use the hooks
We’ll assign the imported hooks to the variables and give them initial values. Using the state updating function `setWeatherData` the data obtained from the API is in the `weatherData` variable. When working with APIs, we may encounter some errors. To deal with these, we need to change the error state to the value `true` by using the `setError` function. Initially, the value of the `error` state is `false`.
```
const [weatherData, setWeatherData] = useState({});
const [error, setError] = useState(false);
```

# Fetch data using the API
We’ll now use the same API that we discussed in the [Learn About APIs](https://www.educative.io/courses/creating-five-impactful-applications-with-reactjs/learn-about-apis) lesson.
Here it is:

```
//  Weather API
const URL = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid={{api_key_weather_app}}`;
```

> **Note**: Remember to use your personal API key value instead of `{{api_key_weather_app}}`.

We use the JavaScript `fetch()` method to retrieve the data from the website. Then, we define the `fetchData` function and store the data received from the API in the `weatherData`. If we get the `404` error while fetching the data, we use the `setError` to make the `error` variable `true`. The following snippet shows how to use `fetch` to fetch data with the API.

```
//  Fetching weather data
async function fetchData(URL) {
  const response = await fetch(URL);
  const data = await response.json();
  if (data.cod === "404") {
    setError(true);
  } else {
    setWeatherData(data);
  }
}
```

> **Note:** Read more about the `fetch` method from the Educative Answer post on [fetch](https://www.educative.io/edpresso/what-is-fetch-in-javascript).

We’ll now use `useEffect` to call the `fetchData` function every time the dependency changes. We assign the URL as the dependency.

```
//  To fetch weather data
useEffect(() => {
  fetchData(URL);
}, [URL]);
```

# Pass data in the `ShowWeather` component

To pass data in the `ShowWeather` component, we have to import it and pass it as shown in the following snippet:

```
import ShowWeather from "./ShowWeather"

return (
   ...
   <ShowWeather data={weatherData}/>
)
```

Because we’ve yet to create the layout for our `ShowWeather` component, we won’t be able to see the actual output in the application. For now, we can use `console.log()` to view the data temporarily. Here’s how to do it:

```
console.log(weatherData)
```

Combining all the code snippets above produces the following code:



We’ll use an API to fetch weather data from the [OpenWeather](https://openweathermap.org/) website.

> **Note:** Because we’re using an API in this section, you need to create a personal API key from the website. You need to add the generated API key value in the `api_key_weather_app` value slot.

# Import the hooks
To store the weather data received from the API, we must import `useState` to store the weather data's current state. We'll need to import the `useEffect` hook as well so that our fetch can run whenever the dependencies change. The following snippet shows how to import the required hooks:


```
import {useState, useEffect} from the "react"
```
# Use the hooks
We’ll assign the imported hooks to the variables and give them initial values. Using the state updating function `setWeatherData` the data obtained from the API is in the `weatherData` variable. When working with APIs, we may encounter some errors. To deal with these, we need to change the error state to the value `true` by using the `setError` function. Initially, the value of the `error` state is `false`.
```
const [weatherData, setWeatherData] = useState({});
const [error, setError] = useState(false);
```

# Fetch data using the API
We’ll now use the same API that we discussed in the [Learn About APIs](https://www.educative.io/courses/creating-five-impactful-applications-with-reactjs/learn-about-apis) lesson.
Here it is:

```
//  Weather API
const URL = `https://api.openweathermap.org/data/2.5/weather?q=＄{cityName}&appid={{api_key_weather_app}}`;
```

> **Note**: Remember to use your personal API key value instead of `{{api_key_weather_app}}`.

We use the JavaScript `fetch()` method to retrieve the data from the website. Then, we define the `fetchData` function and store the data received from the API in the `weatherData`. If we get the `404` error while fetching the data, we use the `setError` to make the `error` variable `true`. The following snippet shows how to use `fetch` to fetch data with the API.

```
//  Fetching weather data
async function fetchData(URL) {
  const response = await fetch(URL);
  const data = await response.json();
  if (data.cod === "404") {
    setError(true);
  } else {
    setWeatherData(data);
  }
}
```

> **Note:** Read more about the `fetch` method from the Educative Answer post on [fetch](https://www.educative.io/edpresso/what-is-fetch-in-javascript).

We’ll now use `useEffect` to call the `fetchData` function every time the dependency changes. We assign the URL as the dependency.

```
//  To fetch weather data
useEffect(() => {
  fetchData(URL);
}, [URL]);
```

# Pass data in the `ShowWeather` component

To pass data in the `ShowWeather` component, we have to import it and pass it as shown in the following snippet:

```
import ShowWeather from "./ShowWeather"

return (
   ...
   <ShowWeather data={weatherData}/>
)
```

Because we’ve yet to create the layout for our `ShowWeather` component, we won’t be able to see the actual output in the application. For now, we can use `console.log()` to view the data temporarily. Here’s how to do it:

```
console.log(weatherData)
```

Combining all the code snippets above produces the following code:



Learn how to use the API and fetch function to retrieve the data.

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

Use the API to Fetch Data

Import the hooks