Create a Weather App in React js

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.

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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