DEV Community

Cover image for 🌤 Build a Simple Weather App with React
Vijay Kumar
Vijay Kumar

Posted on

🌤 Build a Simple Weather App with React

#webdev #reactjsdevelopment #javascript #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
Enter fullscreen mode Exit fullscreen mode

🧱 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;
Enter fullscreen mode Exit fullscreen mode

🔐 Replace YOUR_API_KEY with your OpenWeatherMap API key.

✅ Done!

Now run:

npm start
Enter fullscreen mode Exit fullscreen mode

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! 🌦

Top comments (0)