How to Build a Weather App in ReactJS (API Integration Project) | React Tutorial: Building a Live Weather App with React JS

Creating a Weather App is a perfect real-world project to understand API integration in ReactJS. In this tutorial, you’ll learn how to connect a React application with a public weather API, handle user input, and display dynamic weather data like temperature, location, and condition.

The OpenWeatherMap API, which is free and provides real-time weather information for a specific city, will be used. The Fetch API, useState, and useEffect will be combined to create a completely functional micro weather application from the ground up.

This project is great for practicing:

🔑 Key Concepts:

Handling user input through forms
Managing async API calls with fetch()
Displaying data conditionally
Error handling and UX best practices

Let’s build it!

✅ Example: Simple Weather App using ReactJS

🧩 React Functional Component (HTML + JavaScript)

🌐 Note: Replace YOUR_API_KEY with your real OpenWeatherMap API key.

  import React, { useState } FROM 'react';

```
 
```
```
FUNCTION WeatherApp() {
```
```
  const [city, setCity] = useState('');
```

  const [weather, setWeather] = useState(NULL);

  const [error, setError] = useState('');

```
 
```
```
  const fetchWeather = () => {
```
```
    IF (!city) RETURN;
```
```
 
```
```
    fetch(
```

      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&units=metric`

```
    )
```
```
      .then((res) => {
```

        IF (!res.ok) throw NEW Error('City not found');

```
        RETURN res.json();
```
```
      })
```
```
      .then((DATA) => {
```
```
        setWeather(DATA);
```
```
        setError('');
```
```
      })
```
```
      .catch((err) => {
```

        setError('❌ Unable to fetch weather. Check city name.');

```
        setWeather(NULL);
```
```
      });
```
```
  };
```
```
 
```
```
  RETURN (
```

    <div STYLE={{ fontFamily: 'Arial', padding: '20px', maxWidth: '400px', margin: 'auto' }}>

      <h2>🌦️ React Weather App</h2>

```
 
```
```
      <INPUT
```
```
        TYPE="text"
```
```
        placeholder="Enter city name"
```
```
        VALUE={city}
```

        onChange={(e) => setCity(e.target.value)}

        STYLE={{ padding: '10px', width: '70%' }}

```
      />
```

      <button onClick={fetchWeather} STYLE={{ padding: '10px 15px', marginLeft: '10px' }}>

```
        GET Weather
```
```
      </button>
```
```
 
```

      {error && <p STYLE={{ color: 'red', marginTop: '10px' }}>{error}</p>}

```
 
```
```
      {weather && (
```

        <div STYLE={{ marginTop: '20px' }}>

          <h3>{weather.name}, {weather.sys.country}</h3>

          <p>🌡️ Temperature: {weather.main.temp} °C</p>

          <p>☁️ Condition: {weather.weather[0].description}</p>

```
        </div>
```
```
      )}
```
```
    </div>
```
```
  );
```
```
}
```
```
 
```
```
export DEFAULT WeatherApp;
```

💡 Key Concepts Used:

Input control using useState
API call with fetch() and query parameters
Conditional rendering for data and errors
Use of OpenWeatherMap API with dynamic city input

This Weather App project shows how to use ReactJS to create a live, user-driven application that integrates with an external API. You discovered how to record user input, use that input to retrieve external data, and then dynamically display that data in the user interface. Features like temperature toggles (°C/°F), weather icons, auto-suggestions, and even map integrations can improve this even further!

FAQ (Frequently Asked Questions)

How to integrate weather API in React JS?

Set up React project using the below command in VSCode IDE. Step 2: Navigate to the newly created project folder by executing the below command. Step 3: As we are using various packages for the project, we need to install them. Use the below command to install all the packages that are specified in package.

How to use API for weather app?

You must include an API key with every Weather API request. In the following example, replace YOUR_API_KEY with your API key. HTTPS is required for requests that use an API key.

What is the simplest weather API?

Visual Crossing Weather API is the easiest-to-use and lowest-cost weather API available. Our single-call API provides unified access to historical weather data, current conditions, forecasts, and climate statistics.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

How to Build a Weather App in ReactJS (API Integration Project) | React Tutorial: Building a Live Weather App with React JS | Weather Application using ReactJS