How to Use a Weather Api in a React.js Application?

The integration of real-time data into web applications has become increasingly important in today's digitally-driven world. Among the various types of real-time data available, weather information holds an important place, especially for apps and websites related to traveling, event planning, and outdoor activities. This is where React.js becomes a key player, as it's a popular JavaScript library known for its efficiency and flexibility. In this article, we'll delve into the process of integrating a React weather API into a React.js application.

Setting Up the React.js Environment

To start, you must first set up your React.js environment. Make sure you have Node.js installed on your system, as it includes `npm` (Node Package Manager), which is necessary for managing packages in your React.js project. In case you haven't installed Node.js, you can find the installer on their official website.

Then, start by creating a new React application with the following command:

npx create-react-app weather-app

Once the setup is complete, you can navigate to your project with the command below:

cd weather-app

Integrating the Weather API

The first step to integrating the React weather API is to create an account with Tomorrow.io. After creating the account, you can find your weather API under the API Management Section. You will need this API Key later to develop your React.js application.

Then, once you're done, simply paste the following code in the App.js file and save it to run it in your browser.

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

function App() {
  // Using the useState hook for storing weather data and errors
  const [weatherData, setWeatherData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Setting the fetch options
    const options = { method: 'GET', headers: 
{ accept: 'application/json' } };

    // Fetching weather data
    fetch('https://api.tomorrow.io/v4/weather/
forecast?location=new%20york&apikey=YOUR_APY_KEY', options)
      .then(response => response.json())
      .then(data => {
        // Set the weather data to state
        setWeatherData(data);
      })
      .catch(err => {
        // Set the error to state if there is an error
        setError(err);
        console.error(err);
      });
  }, []);

  return (
    <div>
      <main>
        {weatherData && (
          <div>
            <h2>Weather Data:</h2>
            <pre>{JSON.stringify(weatherData, null, 2)}</pre>
          </div>
        )}
        {error && <p>Error fetching data: {error.message}</p>}
      </main>
    </ div>
  );
}

export default App;

The code above starts with the import of the `useState` and `useEffect` hooks from React, which will be used for managing the state in your component. Then, we define state variables to store the weather data and handle any potential error. Once we're done, we display the fetched data or any error message in the JSX.

Just remember to replace the `YOUR_API_KEY` field in the `options` constant with the API Key of your account.

Understanding the Output

Let's take a look at the shortened version of the output:

{
  "timelines": {
    "minutely": [
      {
        "time": "2024-01-09T14:02:00Z",
        "values": {
          "cloudBase": 0.49,
          "cloudCeiling": 0.49,
          "cloudCover": 100,
          "dewPoint": 0.81,
          "freezingRainIntensity": 0,
          "humidity": 75,
          "precipitationProbability": 0,
          "pressureSurfaceLevel": 1025.56,
          "rainIntensity": 0,
          "sleetIntensity": 0,
          "snowIntensity": 0,
          "temperature": 4.88,
          "temperatureApparent": 4.88,
          "uvHealthConcern": 0,
          "uvIndex": 0,
          "visibility": 16,
          "weatherCode": 1001,
          "windDirection": 20.31,
          "windGust": 2.19,
          "windSpeed": 1.38
        }
      },
  },
  "location": {
    "lat": 40.71272659301758,
    "lon": -74.00601196289062,
    "name": "City of New York, New York, United States",
    "type": "administrative"  }
}

As we can see, the response is structured with two main objects: `timelines` and `location`. The timelines object contains weather data at different intervals, in this case, minutely. Each entry in the `minutely` array represents weather data for a specific minute, indicated by the time field in UTC format.

The `values` object within each minutely entry includes various weather parameters such as cloudBase, cloudCeiling, cloudCover, temperature, and more. We can then use any one of these values in our weather API React.js app and show it to the user if needed.