Skip to content
Shubh
TwitterGithub

How To Build a Weather App with React??

— Tutorial, Dark Arts — 3 min read

Prerequisites

  • You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine.
  • You’ll need to have some familiarity with how to open and use a command-line tool.
  • Internet connection.
  • You’ll need a code editor (I recommend VS Code).
  • A browser other than IE. It does not support the way we are going to call the API (fetch).
  • OpenWeatherApi Account.

Getting Started

11. Open a new terminal window and navigate to a comfortable directory.
22. Run  [npx create-react-app weater-app]  in the new terminal. The download process will take a few minutes.
3   *  npx is a program that we are giving a command to.
4   *  create-react-app is the command that makes a new React project
5    *  weather_app is an argument we are passing to name the project root directory

3.Once the download process is done, jump into the project by executing cd weather_app. There are a lot of files but don’t worry, I will keep things simple for this tutorial and will focus on the necessary items. 4.Open your text editor. I am using Visual Studio Code, so I can use the command-line-interface provided by the editor. In the root project directory, I can enter code . 5.Back in the terminal at the root of the project run npm start. This starts the development server on our local machine so the project will compile every time we make a change and save. When the project tries to compile in development mode it informs us of any mistakes that we have made in editing. This is very helpful when starting out. After a few moments, a new browser tab will open to the URL http://localhost:3000 and you should see the project.

snap:

We now have a React application running on our machine. Before we choose a weather API we are going to clean up a few items.

6.Open /public/index.html. This is the page that will be given to browsers when our domain is requested. Notice that there is only one HTML file in the whole project. This is why many ReactJS applications are called single-page-apps, or SPAs. 7.We will only make one change in this file: locate the title tag and change the text inside to Weather App, or anything you would like the title of the page to be. You should see the change reflected in the tab of your browser after you save.

##Choosing a Weather API

Our React weather app needs weather data, so we are going to take a look at openweather api : https://openweathermap.org/api

1.Click it. The Open Weather Map API information page (the page you should already be on) gives us more detailed information. On the far left side, we have a list of API endpoints, each giving us different data, and displaying what kind of HTTP request it uses.The middle section gives us more detailed information describing the selected endpoint and the parameters. Parameters are predefined labels for data that we are going to give to the API (i.e city=Seattle).On the right, my personal favorite of the three sections is an interactive help center that shows us code snippets from a variety of different languages, libraries, and sample responses from the endpoints. This will save us a lot of time. Notice the responses we want are in JSON, Javascript Object Notation, which is a logical way to display information using objects and key-value pairs. TIP: the section on the right will respond to changes we make in the middle section. If we change parameters in the middle, the URL on the right should change. 2.In the code dropdown at the top of the right section select Javascript (fetch).

Notice at the end of the URL string we see “q=London%252Cuk”. That is a URI encoded string for the ‘q’ parameter. Essentially, URI encoded strings are the URL compatible versions of the same string, but they account for special characters (i.e spaces and commas). Remember that for later.

3.In the middle section, underneath where it says GET Current Weather Data, in the Required Parameters section, change the ‘q’ parameter from ‘Nagpur’ to ‘Seattle’.

Now, the end of the URL simply has ‘seattle’, and it looks the same as how we typed it in the parameter input because we did not have any special characters. This is the code that we are going to copy & paste directly into our app. However, in order for us to test and use this code, we will need to have an account on OpenWeatherApi and a subscription to Open Weather Map. You can quickly set up an account and subscribe to the basic plan, which gives us 100 calls per day (not exceeding 10 calls per minute) for free using the Open Weather Map API. It’s important to track our API calls.

###Fetching api

1useEffect(() => {
2  async function fetchWeather() {
3    const response = await fetch(
4      `https://api.openweathermap.org/data/2.5/weather?q=${City name}&units=metric&appid=bf60f4bf1bb530da7a5290db1d82675f`
5    ).then((res) => res.json());
6

7    if (response) {
8      setcity(response.main);
9    }
10  }
11

12  fetchWeather();
13}, []);

Modify our fetchWeather function to convert the response into a JSON object and then assign the response value to the responseObj variable in our state. The inner workings of asynchronous programming are beyond the scope of this article, but the then function is what happens after we get our data from the API.

Live App :https://weather-app-ebon-sigma.vercel.app/ github_repositorie : https://github.com/shubhthakre/weather_app