🌤 Build a Simple Weather App with React

#reactjsdevelopment #javascript #webdev #beginners

Want to practice React with a hands-on mini project? Let’s build a minimal weather app using React and the OpenWeatherMap API. No fancy setups—just clean, functional code.

🧰 Tools Needed

React (via create-react-app)
OpenWeatherMap API key: Get one here

🛠 1. Create the App

npx create-react-app weather-app
cd weather-app
npm start

🧱 2. Basic Structure

`App.js`

import React, { useState } from 'react';

const App = () => {
  const [city, setCity] = useState('');
  const [weather, setWeather] = useState(null);

  const getWeather = async () => {
    const res = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&units=metric`
    );
    const data = await res.json();
    setWeather(data);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    getWeather();
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h2>Weather App</h2>
      <form onSubmit={handleSubmit}>
        <input
          value={city}
          onChange={(e) => setCity(e.target.value)}
          placeholder="Enter city"
        />
        <button type="submit">Search</button>
      </form>

      {weather && weather.main && (
        <div style={{ marginTop: '20px' }}>
          <h3>{weather.name}</h3>
          <p>{weather.weather[0].description}</p>
          <p>{weather.main.temp} °C</p>
        </div>
      )}
    </div>
  );
};

export default App;

🔐 Replace YOUR_API_KEY with your OpenWeatherMap API key.

✅ Done!

Now run:

npm start

Type a city name and see real-time weather data appear!

🧠 Extras (Optional)

Add error handling
Show a loading state
Style it with basic CSS or Tailwind

🎯 Final Thoughts

This mini React app is a great starting point. It teaches:

Component state with useState
API calls with fetch
Basic conditional rendering

Simple, effective, and practical. Happy coding! 🌦

DEV Community