Cómo crear una aplicación de clima con React y consumo de API

Crear una aplicación de clima es un excelente proyecto para aprender React porque permite practicar componentes, estados, formularios, peticiones HTTP y consumo de APIs externas. Además, el resultado puede convertirse fácilmente en una aplicación visual y funcional.

☁️ 1. Crear el proyecto

Comenzamos creando una aplicación con Vite:

npm create vite@latest clima-react
cd clima-react
npm install
npm run dev

Selecciona React y JavaScript cuando Vite lo solicite.

Una estructura sencilla podría ser:

src/
├── components/
│   ├── SearchBar.jsx
│   └── WeatherCard.jsx
├── App.jsx
├── App.css
└── main.jsx

Separar la aplicación en componentes facilita su mantenimiento y permite reutilizar partes de la interfaz.

🌐 2. Elegir una API del clima

Necesitamos una API que proporcione información meteorológica. Una opción conocida es OpenWeather, que permite consultar temperatura, humedad, descripción del clima, velocidad del viento y otros datos.

La idea general será enviar una ciudad a la API:

Ciudad → API → Datos del clima → React → Interfaz

La respuesta normalmente contiene información como:

{
  main: {
    temp: 24,
    humidity: 70
  },
  weather: [
    {
      description: "cielo despejado"
    }
  ],
  wind: {
    speed: 3.5
  }
}

⚛️ 3. Crear los estados

En App.jsx podemos utilizar useState para almacenar la ciudad, los datos obtenidos y posibles errores:

import { useState } from "react";

function App() {
  const [city, setCity] = useState("");
  const [weather, setWeather] = useState(null);
  const [error, setError] = useState("");

  return (
    <div>
      <h1>Aplicación del Clima</h1>
    </div>
  );
}

export default App;

Aquí React controla la información que cambia durante la ejecución de la aplicación.

🔎 4. Crear la búsqueda

Podemos agregar un formulario:

<form onSubmit={buscarClima}>
  <input
    type="text"
    placeholder="Escribe una ciudad"
    value={city}
    onChange={(e) => setCity(e.target.value)}
  />

  <button type="submit">
    Buscar
  </button>
</form>

Cada vez que el usuario escribe, setCity actualiza el estado.

Cuando presiona Buscar, se ejecutará buscarClima.

🚀 5. Consumir la API

Para realizar la petición podemos utilizar fetch():

const buscarClima = async (e) => {
  e.preventDefault();

  try {
    const response = await fetch(
      `URL_DE_LA_API`
    );

    if (!response.ok) {
      throw new Error("Ciudad no encontrada");
    }

    const data = await response.json();

    setWeather(data);
    setError("");
  } catch (error) {
    setError(error.message);
    setWeather(null);
  }
};

El proceso es sencillo:

1. React envía la ciudad.
2. fetch() realiza la petición.
3. La API devuelve los datos.
4. response.json() convierte la respuesta en un objeto JavaScript.
5. setWeather(data) guarda la información.
6. React actualiza automáticamente la interfaz.

🌡️ 6. Mostrar los resultados

Cuando tengamos información meteorológica podemos mostrarla:

{weather && (
  <div className="weather-card">
    <h2>{city}</h2>

    <h3>
      {weather.main.temp}°C
    </h3>

    <p>
      Humedad: {weather.main.humidity}%
    </p>

    <p>
      Viento: {weather.wind.speed} m/s
    </p>

    <p>
      {weather.weather[0].description}
    </p>
  </div>
)}

También podemos mostrar diferentes iconos dependiendo del estado del clima.

⚠️ 7. Manejar errores y estados de carga

Una aplicación real debe informar al usuario qué está sucediendo.

Podemos agregar un estado:

const [loading, setLoading] = useState(false);

Antes de realizar la petición:

setLoading(true);

Y después:

setLoading(false);

Así podemos mostrar:

{loading &&
Consultando el clima…
}

También debemos controlar ciudades inexistentes, problemas de conexión y respuestas incorrectas de la API.

🎨 8. Mejorar el diseño

Con CSS podemos crear una tarjeta moderna con:

• Fondo degradado.
• Temperatura grande.
• Iconos meteorológicos.
• Campo de búsqueda.
• Botón moderno.
• Información de humedad y viento.
• Diseño responsive para móviles.

Por ejemplo:

.weather-card {
  max-width: 400px;
  margin: 30px auto;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  background: white;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

🚀 9. Ideas para mejorar el proyecto

Una vez que la aplicación básica funcione, puedes agregar características más avanzadas:

• 🌎 Buscar cualquier ciudad del mundo.
• 📍 Obtener la ubicación mediante geolocalización.
• 📅 Mostrar el pronóstico de varios días.
• 🌡️ Cambiar entre Celsius y Fahrenheit.
• 🌙 Crear modo oscuro.
• 🕐 Mostrar la hora local de la ciudad.
• 💾 Guardar ciudades favoritas.
• 📱 Hacer completamente responsive.

Crear una aplicación de clima con React es un proyecto perfecto para aprender a consumir APIs REST, trabajar con useState, manejar formularios, utilizar fetch() y actualizar interfaces dinámicamente.

Lo importante no es solamente mostrar una temperatura, sino entender el flujo completo:

Usuario → React → API → Datos JSON → Estado → Interfaz.

Una vez que domines este patrón, podrás utilizarlo para desarrollar aplicaciones mucho más completas como dashboards, sistemas de noticias, aplicaciones de películas, tiendas online y sistemas administrativos.