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

Let's use the `data` prop from the last lesson to display the city's weather information. The data received from the API is in the form of objects, as we saw in the console in the [Use InputCity Component](https://www.educative.io/courses/creating-five-impactful-applications-with-reactjs/use-inputcity-component) lesson. As a result, each piece of information used in this component is a property of the data object. The following snippets show how we extract and use the different properties from the `data` object. Let’s destruct the `data` object in the parameter itself.


```
const ShowWeather= ({ data }) =>{
   ...
}
```
# Optional chaining
We’ll employ the ternary operator here, though we don’t use it to get the value of the properties from our project’s data. We should be aware of this because it’s a different approach to extracting value from data than the normal `object.propertyName = property value` method. We don’t always get all properties for each input when we extract data from the API, which leads to code issues. JavaScript includes the concept of optional chaining (?.) to solve this problem. This optional chaining’s syntax is given below:
```
object.someNonExistingProperty?.
```
## Example of optional chaining

Here, we try to use the `info` property in the `cat`, which is the nonexistent property. We therefore get an error, and our code stops working.
```
const animal = {
dog:{
    info:{
      name: 'Tommy',
      age: 2,
    },
  },
cat: {
    age: 2,
  },
};

console.log(animal.dog.info.name); // Tommy
console.log(animal.cat.info.name); // Error
console.log(animal.dog.info.name); // No output
```
Let’s now use optional chaining (?.).

```
const animal = {
  dog: {
    info: {
      name: 'Tommy',
      age: 2,
    },
  },
  cat: {
    age: 2,
  },
};

console.log(animal.dog.info?.name); // Tommy
console.log(animal.cat.info?.name); // undefined
console.log(animal.dog.info?.name); // Tommy
```
Notice that we get the output when the `info` property is present and `undefined`, where the `info` property isn’t current by using optional chaining in front of the non-existing property. This helps avoid code termination.
> **Note:** Read more about Optional Chaining from the Educative Answer post on  [optional chaining](https://www.educative.io/edpresso/what-is-optional-chaining-in-javascript).

# Extract properties from the data

We’ll now use various properties from  `data` to display weather data on the screen. We can use as many values as we want, but we’ll only use a few of them here, including `name`, `country`, `temp`, `pressure`, `visibility`, `humidity`, and  `clouds`. The following code snippet shows how to extract the properties from `data`:

```
const city = data.name;
const country = data.sys ? data.sys.country : null;
const temperature = data.main ? data.main.temp : null;
const pressure = data.main ? data.main.pressure : null;
const visibility =  data ? data.visibility : null;
const humidity = data.main ? data.main.humidity : null;
const clouds =  data.clouds ? data.clouds.all : null;
```

Some values above aren’t in the standard units, so we need to convert them. We need `pressure` in atmospheric `pressure` (atm), `temperature` in celsius, and visibility in kilometers.

```
const pressureInAtm = (pressure / 1000).toFixed(2);
const tempInCelsius = (temperature / 10).toFixed(2);
const visibilityInKM = (visibility / 1000).toFixed(2);
```
All we have to do is pass these values in our `ShowWeather` component.

Combining the code snippets above produces the following code widget:



Learn to read the data and use the optional chaining.

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 Weather Data