Building a Weather Application using React Hooks

`Photo by Vidar Nordli-Mathisen on Unsplash

Source Code

In this tutorial we will talk about how to create a Weather Application using React Hooks from scratch.

Application Outline

• Create React App
• Add Necessary Files
• Implement React Hooks
• State Architecture
• API Authentication and Implementation
• Forms & Inputs to fetch Result
• API Calls
• Error Handling

Prerequisites

1. To achieve this task, we need to have node ≥ 8.10 , npm ≥ 5.6 installed in our system. It can be verified by the following command.

2. Account in https://openweathermap.org/

3.Basic knowledge of JavaScript, ReactJS

Get Started

Start the project by creating a new react app.

npx create-react-app weatherapp

You can delete some unnecessary files from the react app directory.

i.e. App.test.js, Logo.svg

Now, enter the directory and start the development server.

cd weatherapp
npm start

Create Necessary Files

Now, we need some files to search the input data and to display the data.

To do this, we will create a new folder named components the src folder. In that folder, we will add Input.js to input data from the user and WeatherData.js to display the data to user.

After doing this our folder structure will look like given below.

After that, we will add a function in Input.js file which will take input parameters in form of props. After passing the arguments in the form, it will enable to fetch API data from our app container.

Input.js :

Here, In the Input.js we have taken two parameters: One for city and another for country. After submitting the form it will display the data using the API.

Here, we have setup our props with getWeather which will hooked up with fetchData in the App.js file.

Weather.js :

Continuing in the process, we will setup the WeatherData.js to display the data and display the logic. Here, in the code we will display everything(city,country, temperature & weather description).

If anything goes wrong it will display error else we will get the proper result fetched from the API.

Now, we will setup these components in our App.js file. Without doing that our components are useful & inactive.

Now, we need to setup the API for the further process. We will use openweathermap API.

Signup link : https://home.openweathermap.org/users/sign_in

API Authentication and Implementation

After successfully sign-in and creating account, you will find your API key which can be used as per your requirement.

There are many options for different types of queries and different type of data output. You can use from the available options.

We, will be using Current Weather Data(First) to display current weather of the input city & country.

We will use the API call, which includes city and country both. We will insert our API at the end of our call to authenticate .

React Hooks, States, Props

Now, in our App.js, we will useState to set our hooks in React with the Form component and WeatherData component.

In WeatherData component, we will use an empty array to set the data which will fetch from our API.

We will create an asynchronous function fetchData to retrieve data and display it. The app container will hook up with the fetch function from the form and it will display the result.

App.js:(Updated)

After doing this, back in our console we will get the following output:

Here, in console it is displaying the result for the London-UK. If we change the input city & country still it will show us the weather for London, because our API call is written specifically for the London-UK.

To fix this and get the result dynamically according to our city and country we have to make some changes in API call in App.js

And after doing this, we will setWeather to display the properties from weatherData component such as temperature, city, country, description etc. to our end user.

App.js:

And, it’s done !!

Now, if we will test the app by inserting city and country and hit the submit button, we will get the following result.

Error Handling

It’s working fine if we enter the city, country and hit the submit button. But, if we forget to type city/country, it will throw an error.

To fix it, we will apply an if-else condition. If everything goes well, it will show us the result. else, it won’t submit the form and tell the user to add the details first.

So, till here we have done API call with dynamic query to fetch the output throughout our application. And we have also done some error handling.

Now, we will convert the temperature from Kelvin to Celsius by applying it’s formula to temperature property in our setWeather.

Update App.js:

Here, we have used toFixed() to fix the decimal points to 2. You can change the number according to your need.

We can add some details in our WeatherData.js to specify temperature.

Conclusion

And now it’s done. Our application is sending data(City, Country) from the Input.js and displaying the data from fetching the OpenWeatherMap API and it will display the data using WeatherData.js.

Thanks for reaching here so far. Hope you find it useful.

If you have any doubts/suggestions, share it in the comment section or connect me on LinkedIn.

darshan6799/Weather-Application-Using-React