Creating a Weather App with React JS in 2024: A Step-by-Step Guide to Using Weather API in Your React Project

In this tutorial, we will be creating a weather app using React JS and a Weather API. React JS is a popular JavaScript library for building user interfaces, and it is known for its simplicity and reusability. The Weather API we will be using provides current weather information for any city around the world. By the end of this tutorial, you will have a fully functional weather app that displays the current weather conditions of a given city.

Step 1: Set up your environment
Before we begin building our weather app, make sure you have Node.js and npm installed on your computer. If you don’t have these installed already, you can download and install them from the official Node.js website.

To create a new React app, run the following command in your terminal:

npx create-react-app weather-app
cd weather-app

Step 2: Install Axios
We will be using Axios to make API requests in our React app. To install Axios, run the following command in your terminal:

npm install axios

Step 3: Get API key
To use the Weather API, you will need to sign up for an API key. Visit the Weather API website and sign up for a free account to get your API key.

Step 4: Create Weather component
Inside the src folder of your React app, create a new component called Weather.js. This component will fetch weather data from the Weather API and display it on the screen. Add the following code to Weather.js:

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

const Weather = () => {
    const [weatherData, setWeatherData] = useState(null);
    const [city, setCity] = useState('');
    const API_KEY = 'YOUR_API_KEY';

    const getWeather = async () => {
        const response = await axios.get(`http://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}`);
        setWeatherData(response.data);
    }

    return (
        <div>
            <input 
                type="text" 
                placeholder="Enter city name"
                value={city}
                onChange={(e) => setCity(e.target.value)}
            />
            <button onClick={getWeather}>Get Weather</button>
            {weatherData && (
                <div>
                    <h2>{weatherData.location.name}</h2>
                    <p>{weatherData.current.condition.text}</p>
                    <p>Temperature: {weatherData.current.temp_c}°C</p>
                    <img src={weatherData.current.condition.icon} alt="weather icon" />
                </div>
            )}
        </div>
    );
}

export default Weather;

Step 5: Import Weather component
In your App.js file, import the Weather component and add it to the render method:

import React from 'react';
import Weather from './Weather';

function App() {
  return (
    <div>
      <h1>Weather App</h1>
      <Weather />
    </div>
  );
}

export default App;

Step 6: Test your app
Now that you have created the Weather component and added it to your App component, run your React app by running the following command in your terminal:

npm start

Once your app is running, open it in your browser and enter a city name into the text input. Click the Get Weather button to make an API call and display the current weather conditions for the given city.

Congratulations! You have successfully created a weather app using React JS and a Weather API. You can further enhance this app by adding more features such as a 5-day forecast, weather charts, or user authentication. Experiment with different API endpoints and React components to create a more robust weather application.