Complete Weather App Using React with Open Weather API


In this project, we will understand how to create Weather App using React. So might be a wonderful tutorial for you. In this app, we gonna get the current weather data from different cities.

We gonna learn how to get current weather data from open weather map API and use them in the application. I am using the weather-icon project to import icons. If you want you can use font-awesome as well.

Let me show you what we are going to build in this tutorial.

Weather App

In this application, you can see we have two textboxes. In the first textbox, you need to specify city to get the weather of that city and in the second text box specify the country of that city and to get the current weather of this city just click on the get weather button.

So when you click on the get whether you are going to get the data of that city.  we will also be going to display the minimum and maximum temperature as well as the description of the weather.

so let’s get started and understand how to create weather application in react. The first thing you need to setup the react project is npx. To setup react project I am going to use npx command.

 If you have npm version 5.2 or higher you can use the npx command to create react application.

Setup:-

In the Visual Studio code editor open an Empty folder and in that folder create a new project to create weather app using react. To react application you need to first open the terminal.  and type the npm command to create a boilerplate of the react.

This command will create react boilerplate for you. 

We are also using bootstrap to glorify the template. So we will first install it.

Ones we have a bootstrap link to App.js component. I already have done that in the app.js file. So when you copy the code from the app.js file you don’t need to import bootstrap.

now let’s make some changes in the component and create our own component. In the source folder of the react application create a new directory and name that directory app_component. In the app_component directory, we are going to create component files.

In app_component directory

  1. weather.component.jsx:- used to display weather information
  2. weather.style.css:- used to style weather component elements.
  3. form.component.jsx:- used to create input textboxes and button to submit data
  4. form.style.css:- used to specify a style to form component

Now once you create all these files in the app component folder you are going to write code inside this file. so we will first select the weather component and create a stateless functional component. But Instead of specifying hardcoded values to the element we are going to specify the property and specify that property when we call the component in the App.js file.

Component files look like this

weather.component.jsx

This fire is very simple to understand. Because we did not use any hardcoded values in this file instead we created a property and specify them when we call the component.

We also going to check if the property is specified and has value then I want to execute the true statement otherwise execute else statement of the shorthand if and else condition.

Like to did in the above code. if we have value in the property I am going to execute the first expression else execute the false expression. We also going to specify (º) degree symbol using °

weather.style.css

If you take a look at this code it seems like simple CSS code.  I did not add any advance code in this file to make the application more complicated

form.component.jsx

In this file, we have a simple form. In this form, I will have two text box. The first textbox we will specify City and in the second textbox we will specify the country. You cannot use in this form we have on submit event. We link the event Handler to this property. So we created a property and specified event handler to that property when you call the component.

We are going to access input tag values using name property. When we click on the submit button the form will submit the data to the Event Handler. we can now access the textbox value in the event Handler.

 we also have an array function that returns UI of error message when the input fields empty.

form.style.css

In this file, we add some styling to the form element.

Now the time is to add our main component that renders the components.

App.js

Now before you move on open openweathermap.org website and sign inif you don’t have an account, create a new one.  Search for the API key. Ones you have your API key specifiy to the API_Key variable as a string.

Using API Key you can access secure resources. To get the API key you need to have an account. So sign in and get your API key to create a weather app.  Now let’s see how app.js file looks like.

App.js

In the above. We did not add any special think.  We just make an API call to weather API and get the data in the response JSON format. Using state specify all the data one by one to the component.

I added a comment before the statement to understand what the code does.

At the last in the render method please specify state values to the properties of the component. For example,

Now the last thing starts the server using the npm start command. Open terminal and change directory to weather-app( project name) and start the server.

That’s it. Your application started on the port 3000.

Weather App

It looks something like this.

Now just specify city and country in the textbox and get the current weather app data. As simple as that.

If you want to download this project the Github link is here.

That’s it. We successfully create the weather app using react. That is all for now. I will see you in the next tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *