Create React Weather App

Hello Developers, In this tutorial, You will learn to create a live React weather app using OpenWeatherMap API with some basic steps.

If you create a weather app for your website then users can easily know the weather information like temperature & others by typing city name into the Input Field.

Here, for your learning purpose, I have created a simple weather app in react js. Once you learn it, you will get an idea to create any type of weather application according to your project requirement.

react weather app

Table of Contents

Create a Weather App using OpenWeatherMap API in React Js

In this tutorial, I have created a Weather App using React Hooks and functional components. Once, you learn it, you can easily create it yourself using the class component.

Learn Also –

Create React Charts in React Js

Create a Simple React Todo App

How to display Images in React Js

Before getting started, you have to create react app with npm and create the following folders & files within its default folder structure

reactapp/
   |
  src/
   |__weather/
   |   |__WeatherApp.js
   |   |__WeatherInfo.js
   |__App.js
   |__index.js

I have used bootstrap 4 to create a responsive weather app. So, You should install it with the following command

npm install bootstrap

Also, you have to import it into the App.js

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

For more information, you can learn How to use Bootstrap in React Js

Also, I have created a cloud using the bootstrap icon. So, you should also run this command

npm i bootstrap-icons

Then, you will have to import into the App.js file like

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

Now, Let’s start coding to create a react Weather app from the next steps –

1. Get OpenWeatherMap API

First of all, Open the official website of the OpenWeatherMap API
Create a new account. If you have already done it, You can just log in.
Got to Profile>My API Key and copy API Key or create a new one
Got to API>Current Weather Data>API Doc and get code of API Call

2. Create a Weather App Component

To create a weather app component, you will have to do the following things –

Import WeatherInfo component from “./WeatherInfo”
Create a WeatherApp functional component.

File Name – WeatherApp.js

import { useState } from "react";
import WeatherInfo from "./WeatherInfo";
function WeatherApp() {
  const[cityName, setCityName] = useState("");
  const [weatherData, setWeatherData] = useState({})
  const changeCityInput =(e) =>{
     setCityName(e.target.value);
  }
    const fetchWeatherAPI = async() =>{
      const APIurl = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&units={ENTER_API_KEY};
      const resp = await fetch(APIurl);
      const respJson = await resp.json();
      setWeatherData(respJson);
      
       
    }
let handleMouseOut =(e) =>{
  
    fetchWeatherAPI();
}
  return (
    <>
   <div className="container">
   <div className="row">
       <div className="col-sm-4">
       <h3 className="text-center text-success"> React Weather App</h3>
       <div className="form-group">
         <input type="text" className="form-control" placeholder="Enter City Name" onChange={changeCityInput} onMouseOut={handleMouseOut} value={cityName}/>
       </div>
      {/* Weather app info*/}
      <WeatherInfo cityName={cityName} weatherData={weatherData}/>
      {/* Weather app info*/} 
       </div>
      
   </div>
   </div>
   </>
   
  );
}
export default WeatherApp;

3. Create Weather Information Component

To Create a Weather Information component, You will have to implement the following points –

Create the WeatherInfo component and pass two props weatherData and cityName as an object
Create a div with bootsrap grid and return it to display weather information
Print the following weather information with a curly bracket
- weatherData.main.temp – It holds the temperature of the weather
- weatherData.main.temp_max – It holds the maximum temperature of the weather
- weatherData.main.humidity – It holds the minimum temperature of the weather

File Name – WeatherInfo.js

function WeatherInfo({weatherData, cityName}){

    return(
        <>
  <div className="weather-info text-center card bg-light">

  <h3>{cityName}</h3>
  <i className="bi bi-cloud-haze text-center display-2 text-warning"></i>
  {
      typeof weatherData.main=="undefined" ? (
          <p>No data found</p>
      ): (
           <>
  <h3>{weatherData.main.temp}<sup>o</sup> Cel</h3>
  <hr />
 <div className="row">
  <div className="col-sm-4">{weatherData.main.temp_max}<sup>o</sup> Cel<br /><b>Max Temp</b></div>
  <div className="col-sm-4">{weatherData.main.temp_min}<sup>o</sup> Cel<br /><b>Min Temp</b></div>
  <div className="col-sm-4">{weatherData.main.humidity}%<br /><b>Humidity</b></div>
 
</div> 
           </>
      )
  }

 </div>

        </>
    );
}

export default WeatherInfo;

4. Render Weather Component

To render weather components, You should import the WeatherApp component into the App component and return <WeatherApp />.

File Name – App.js

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/bootstrap-icons/font/bootstrap-icons.css";
import WeatherApp from "./weather/WeatherApp";
class App extends React.Component {
  render(){
  return (
    <WeatherApp />
  );
  }
}
export default App;

5. Run React Weather App

After completing the previous step, you will have to start the development server to run the Weather Application

npm start

You can test it by opening the following URL in your web browser

http://localhost:3000/