How To Make A Weather App With React JS

As we all know, React is a really powerful front-end library. To get a good idea about react, it’s best to create applications and see how different hooks interact with each other. Let me give you a sneak peek related to what we will be building in this tutorial:

As you can see, this weather app is custom-made, fetches an image from the Unsplash API, and also provides the current temperature of any given location. I’m sure that you’re extremely excited to build this application. So let’s get started now.

Before anything else, you need to have node js installed. To install node, please go to nodejs.org and install the latest stable version on your PC.

With that done, head off to your terminal and enter the following command in any folder that you want the weather app to be:

npx create-react-app weather-app-react

I’m going to create the application on my desktop, and I will call it weather-app-react.

The above command will simply create a react app for us that we can start working with immediately. After that is done, open up vs code in the terminal by using the command:

code .

For those of you who are using vs code insiders, use:

code-insiders .

This opens up vs code in the current directory.

Now, remove all the code in App.js, remove the setupTest.js, App.test.js, logo.svg, and then enter the following code in App.js:

import React from "react";
import "./App.css";
function App() {
return <div>Let's create a weather app!!</div>;
}
export default App;

And then go to your terminal and enter the following command:

npm start

This spins up the react application for us, which is exactly what we want.

You should see something like this:

If you got till here, perfect. Let’s keep moving.

Proceed to OpenWeatherMap and create a free account for the current weather data API. Then, you will get an API key.

Also, go to the API of Unsplash and sign up for a free developer account. You will be prompted to create a project, name it however you wish to, and then you will again get an API key.

Unsplash will provide us with the images that we need and open weather map will provide us with the weather data.

With all this set, head back to your vs code and import useState and useEffect from react.

import React, { useState, useEffect } from "react";

If you do not know much about useState and useEffect, I highly recommend checking out our hooks tutorial here.

Now, we want to create three pieces of state for our application like so:

import React, { useState, useEffect } from "react";
import "./App.css";
function App() {
const [weather, setWeather] = useState({});
const [locations, setLocations] = useState("london");
const [photos, setPhotos] = useState([]);
return <div>Let's create a weather app!!</div>;
}
export default App;

The weather state will store the response that we get from the weather API, the locations state will store the response that we get from the user’s input, and the photos state will store the response that we get from the unsplash API.

You might wonder why we’ve given an initial state of “london” to the locations API. This is because we don’t want the user to see a blank screen upon the site’s load, as it results in a bad user experience.

The next thing that we want to do is setup a function that fetches data from the apis like so:

What we are trying to do here is simply fetch data from the APIs, check if there is any problem via the catch and if-else statements, and also set the data that we will be needing to our pieces of state.

In the first API call, we are giving it the parameter of units=metric which might confuse some of you. Traditionally, we get all the data back in scientific terms (kelvin for ex-) which no one really likes to see. With this parameter in the Fetched URL, we get back the response in a format that is easy to view and understand. Then, we simply set the object response that we get back from the API to the piece of state that we discussed earlier.

While fetching data from the Unsplash API, what we really want is just the link of the first image that comes up. We enter the parameter of the query to be the location that the user enters, and we assume that the first result (hence the 0) will be optimized. If you want to, you can make this a lot more complex, but that’s not what I am aiming for here. When you log the output of both the responses, you will find a bunch of data that you can play around with. For the sake of simplicity, I have chosen the link that we get from the Unsplash API although you can take it to the next level.

Now it’s time for us to actually develop the UI of this application. This is the final piece of code that we need for the App.js file:

We took the data that we got from the weather API, stored it into a piece of state, and then displayed it on the front-end. All that’s left is for us to now develop the CSS for this. We are going to be using a little bit of glassmorphism as well, which is really going to level up the application design.

Here is the CSS code for the app:

I’m using the Poppins font from Google fonts but feel free to use any font that you desire. In glassmorphism, we give the background element a blur filter so that we get a beautiful component design. That’s why we use the backdrop-filter: blur(10px) CSS code here.

With that said, we finally have the application developed. It was pretty simple, wasn’t it?

I hope that all of you enjoyed developing this application along with me. I left this application open-ended, and I want you to provide your own code to it and customize it however you can.

For more complex apps be sure to check out Sonny’s YouTube channel. Thank you for reading the article and don’t hesitate to buy me a coffee if you like the content!

Thank You!

Priyanshu Saraf
(PAPA Team Writer)