Create a Weather App in React js

In this tutorial, you will learn how to build a weather app in React using weather API and display the weather data in it.

How to Build a Weather App in React

Steps to create a weather app and consume the Web API to fetch and display weather data using an HTTP client:

• Step 1 – Create React App
• Step 2 – Install Bootstrap and Icons
• Step 3 – Get API KEY From WeatherMap
• Step 4 – Create a Weather Component
• Step 5 – Use the Weather Component
• Step 6 – Style the Weather App
• Step 7 – Run React Weather App

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Bootstrap and Icons

In this step, execute the following command to install boostrap 4 library into your react app:

npm install bootstrap --save
npm i bootstrap-icons

Then import bootstrap library and icons in app.js file:

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/bootstrap-icons/font/bootstrap-icons.css";

Step 3 – Get API KEY From WeatherMap

Use the following steps to get an API key.

• Visit this url :- OpenWeatherMap API
• Create a new account.
• Visit Profile>My API Key and copy API Key or create a new one
• Visit API>Current Weather Data>API Doc and get code of API Call

Once you have your API key, create a new file called .env in the root directory of your app and add the following line:

REACT_APP_API_KEY=<your API key>

Make sure to replace <your API key> with your actual API key.

Step 4 – Create a Weather Component

In your src directory, create a new file called Weather.js, and add the following code to display the weather data in it.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import moment from 'moment';
import { WiDaySunny, WiRain, WiSnow, WiCloudy, WiDayCloudy, WiFog } from 'react-icons/wi';
const Weather = ({ location }) => {
  const [weatherData, setWeatherData] = useState(null);
  useEffect(() => {
    const fetchWeatherData = async () => {
      const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${process.env.REACT_APP_API_KEY}&units=metric`);
      setWeatherData(response.data);
    };
    fetchWeatherData();
  }, [location]);
  if (!weatherData) {
    return null;
  }
  const temperature = Math.round(weatherData.main.temp);
  const description = weatherData.weather[0].description;
  const iconCode = weatherData.weather[0].icon;
  const icon = getIcon(iconCode);
  const date = moment().format('dddd, MMMM Do YYYY');
  return (
    <div className="weather">
      <div className="weather-header">
        <h2 className="weather-location">{location}</h2>
        <p className="weather-date">{date}</p>
      </div>
      <div className="weather-body">
        <div className="weather-temperature">{temperature}°C</div>
                <div className="weather-icon">{icon}</div>
                <div className="weather-description">{description}</div>
                </div>
                </div>
                );
                };
                const getIcon = (iconCode) => {
                switch (iconCode) {
                case '01d':
                return <WiDaySunny />;
                case '01n':
                return <WiDaySunny />;
                case '02d':
                return <WiDayCloudy />;
                case '02n':
                return <WiDayCloudy />;
                case '03d':
                case '03n':
                return <WiCloudy />;
                case '04d':
                case '04n':
                return <WiCloudy />;
                case '09d':
                case '09n':
                return <WiRain />;
                case '10d':
                case '10n':
                return <WiRain />;
                case '11d':
                case '11n':
                return <WiThunderstorm />;
                case '13d':
                case '13n':
                return <WiSnow />;
                case '50d':
                case '50n':
                return <WiFog />;
                default:
                return null;
                }
                };
export default Weather;

Step 5 – Use the Weather Component

Now that you have created our Weather component, In the App.js file, replace the existing code with the following:

import React from 'react';
import './App.css';
import Weather from './Weather';
function App() {
return (
<div className="App">
<Weather location="New York" />
<Weather location="London" />
<Weather location="Sydney" />
</div>
);
}
export default App;

Step 6 – Style the Weather App

To make our weather app look good, you need to add some styles. In the App.css file, add the following code:

.App {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.weather {
display: flex;
flexdirection: column;
justify-content: center;
align-items: center;
margin: 20px;
padding: 20px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
.weather-location {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.weather-date {
font-size: 16px;
margin-bottom: 10px;
}
.weather-temperature {
font-size: 64px;
font-weight: bold;
margin-bottom: 10px;
}
.weather-icon {
font-size: 48px;
margin-bottom: 10px;
}
.weather-description {
font-size: 20px;
}
@media screen and (max-width: 600px) {
.App {
flex-direction: column;
}
.weather {
margin: 20px 0;
width: 100%;
}
}

Step 7 – Run React Weather App

To test our weather app, you can run the following command in the terminal:

npm start

Open the following URL in your web browser window:

http://localhost:3000/

Conclusion

In this tutorial, you have learned the process of building a weather app in React using the OpenWeatherMap API.

Recommended React JS Posts