Tutorial paso a paso para crear una app de clima en tiempo real con React y la API de OpenWeather

En este tutorial aprenderás cómo construir una aplicación web de clima en tiempo real utilizando React para el frontend y la API de OpenWeather para obtener datos meteorológicos actualizados. Este proyecto es ideal para desarrolladores principiantes e intermedios interesados en el desarrollo frontend con React y el consumo de APIs REST.

Introducción

La aplicación mostrará el clima actual de una ciudad que el usuario podrá ingresar. Usaremos React para crear una interfaz limpia y dinámica, y consumiremos la OpenWeather API para obtener la información meteorológica. A lo largo del tutorial, aprenderás a:

Configurar un proyecto React desde cero.
Crear y organizar componentes funcionales.
Realizar solicitudes HTTP con fetch.
Manejar datos con Hooks: useState y useEffect.
Mostrar la información de manera intuitiva.
Desplegar la aplicación para acceso público.

¡Manos a la obra!

1. Configuración del entorno React

Requisitos previos

Tener instalado Node.js (versión 14 o superior recomendada).
Tener un editor de código (por ejemplo, Visual Studio Code).

Paso 1: Crear el proyecto React

Ejecuta el siguiente comando en terminal para crear una nueva app React usando create-react-app:

npx create-react-app app-clima-tiempo-real
cd app-clima-tiempo-real
npm start

npx create-react-app app-clima-tiempo-real

cd app-clima-tiempo-real

npm start

Esto iniciará el servidor de desarrollo y abrirá tu navegador en http://localhost:3000 con la plantilla básica.

Tips: Puedes usar yarn en lugar de npm si prefieres.

Paso 2: Limpiar el proyecto

Elimina los archivos y contenido innecesarios para partir con una base limpia. Borra de src/ los archivos: App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Modifica src/App.js para que quede así:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>App Clima Tiempo Real</h1>
    </div>
  );
}

export default App;

import React from 'react';

function App() {

return (

<h1>App Clima Tiempo Real</h1>

</div>

);

}

export default App;

Con esto tienes un entorno listo para seguir desarrollando.

2. Creación de componentes funcionales

Vamos a construir dos componentes principales:

Search: para ingresar el nombre de la ciudad.
WeatherDisplay: para mostrar los datos climáticos.

Paso 1: Crear componente Search

Crea un archivo nuevo src/components/Search.js:

import React, { useState } from 'react';

function Search({ onSearch }) {
  const [city, setCity] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (city.trim()) {
      onSearch(city);
      setCity('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Ingresa una ciudad"
        value={city}
        onChange={(e) => setCity(e.target.value)}
      />
      <button type="submit">Buscar</button>
    </form>
  );
}

export default Search;

import React, { useState } from 'react';

function Search({ onSearch }) {

const [city, setCity] = useState('');

const handleSubmit = (e) => {

e.preventDefault();

if (city.trim()) {

onSearch(city);

setCity('');

}

};

return (

<input

type="text"

placeholder="Ingresa una ciudad"

value={city}

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

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

</form>

);

}

export default Search;

Explicación: usamos estado local para controlar el input y enviamos el valor al padre mediante la función onSearch.

Paso 2: Crear componente WeatherDisplay

Crea src/components/WeatherDisplay.js:

import React from 'react';

function WeatherDisplay({ weather }) {
  if (!weather) return null;

  return (
    <div className="weather-display">
      <h2>{weather.name}, {weather.sys.country}</h2>
      <p>Temperatura: {Math.round(weather.main.temp)} °C</p>
      <p>Clima: {weather.weather[0].description}</p>
      <p>Humedad: {weather.main.humidity}%</p>
      <p>Viento: {weather.wind.speed} m/s</p>
    </div>
  );
}

export default WeatherDisplay;

import React from 'react';

function WeatherDisplay({ weather }) {

if (!weather) return null;

return (

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

<p>Temperatura: {Math.round(weather.main.temp)} °C</p>

<p>Clima: {weather.weather[0].description}</p>

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

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

</div>

);

}

export default WeatherDisplay;

Este componente recibe los datos de clima y muestra información básica.

3. Consumo de la API REST de OpenWeather

Para obtener datos reales, registraremos una cuenta gratuita en OpenWeather y usaremos su API.

Paso 1: Obtener API Key

Ingresa a https://openweathermap.org/api
Regístrate o inicia sesión.
Genera una clave API para “Current Weather Data”.

Paso 2: Crear función para llamada API

En src/ crea un archivo api.js:

const API_KEY = 'TU_API_KEY_AQUI'; // reemplaza con tu API key real
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

export async function fetchWeather(city) {
  try {
    const response = await fetch(
      `${BASE_URL}?q=${city}&appid=${API_KEY}&units=metric&lang=es`
    );
    if (!response.ok) {
      throw new Error('Ciudad no encontrada');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    throw error;
  }
}

const API_KEY = 'TU_API_KEY_AQUI'; // reemplaza con tu API key real

const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

export async function fetchWeather(city) {

try {

const response = await fetch(

`${BASE_URL}?q=${city}&appid=${API_KEY}&units=metric&lang=es`

);

if (!response.ok) {

throw new Error('Ciudad no encontrada');

}

const data = await response.json();

return data;

} catch (error) {

throw error;

}

Aquí definimos la función fetchWeather que consulta la API con la ciudad indicada, usando unidades en Celsius y lenguaje español.

4. Manejo de estados y efectos con Hooks

Vamos ahora a conectar todo en App.js para manejar el ciclo completo de búsqueda y despliegue.

import React, { useState } from 'react';
import Search from './components/Search';
import WeatherDisplay from './components/WeatherDisplay';
import { fetchWeather } from './api';

function App() {
  const [weather, setWeather] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleSearch = async (city) => {
    setLoading(true);
    setError(null);
    try {
      const data = await fetchWeather(city);
      setWeather(data);
    } catch (err) {
      setError(err.message);
      setWeather(null);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="App">
      <h1>App Clima Tiempo Real</h1>
      <Search onSearch={handleSearch} />

      {loading && <p>Cargando...</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <WeatherDisplay weather={weather} />
    </div>
  );
}

export default App;

import React, { useState } from 'react';

import Search from './components/Search';

import WeatherDisplay from './components/WeatherDisplay';

import { fetchWeather } from './api';

function App() {

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

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

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

const handleSearch = async (city) => {

setLoading(true);

setError(null);

try {

const data = await fetchWeather(city);

setWeather(data);

} catch (err) {

setError(err.message);

setWeather(null);

} finally {

setLoading(false);

}

};

return (

<h1>App Clima Tiempo Real</h1>

{loading && <p>Cargando...</p>}

{error && <p style={{ color: 'red' }}>{error}</p>}

</div>

);

}

export default App;

Explicación paso a paso

Estados usados:

weather: guarda los datos del clima.
error: para mostrar mensajes si la ciudad no se encuentra o falla la API.
loading: para informar que la consulta está en proceso.

La función handleSearch recibe la ciudad desde el componente Search y llama a fetchWeather.
Se actualizan los estados de forma adecuada según el éxito o error de la llamada.
Se renderizan mensajes condicionales.

5. Presentación de datos climáticos

Para mejorar la experiencia visual, podemos agregar un poco de estilo CSS básico.

Paso 1: Agregar estilos globales

En src/App.css sobrescribe con:

.App {
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin: 2rem auto;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

input[type="text"] {
  padding: 0.5rem;
  width: calc(100% - 110px);
  font-size: 1rem;
}

button {
  padding: 0.5rem 1rem;
  margin-left: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
}

.weather-display {
  margin-top: 1rem;
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.weather-display h2 {
  margin-bottom: 0.5rem;
}

.App {

font-family: Arial, sans-serif;

max-width: 400px;

margin: 2rem auto;

padding: 1rem;

border: 1px solid #ddd;

border-radius: 8px;

background: #f9f9f9;

}

input[type="text"] {

padding: 0.5rem;

width: calc(100% - 110px);

font-size: 1rem;

}

button {

padding: 0.5rem 1rem;

margin-left: 0.5rem;

font-size: 1rem;

cursor: pointer;

}

.weather-display {

margin-top: 1rem;

background: white;

padding: 1rem;

border-radius: 8px;

box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

}

.weather-display h2 {

margin-bottom: 0.5rem;

}

No olvides importar el CSS en App.js:

import './App.css';

1 2	import './App.css';

Paso 2: Opcional – Mostrar iconos del clima

La API también devuelve weather[0].icon, un código que podemos usar para mostrar un ícono.

Modifica WeatherDisplay.js para incluir la imagen:

function WeatherDisplay({ weather }) {
  if (!weather) return null;

  const iconUrl = `https://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png`;

  return (
    <div className="weather-display">
      <h2>{weather.name}, {weather.sys.country}</h2>
      <img src={iconUrl} alt={weather.weather[0].description} />
      <p>Temperatura: {Math.round(weather.main.temp)} °C</p>
      <p>Clima: {weather.weather[0].description}</p>
      <p>Humedad: {weather.main.humidity}%</p>
      <p>Viento: {weather.wind.speed} m/s</p>
    </div>
  );
}

function WeatherDisplay({ weather }) {

if (!weather) return null;

const iconUrl = `https://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png`;

return (

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

<p>Temperatura: {Math.round(weather.main.temp)} °C</p>

<p>Clima: {weather.weather[0].description}</p>

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

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

</div>

);

}

6. Despliegue básico

Una vez terminada tu app, puedes desplegarla fácilmente usando GitHub Pages, Netlify, o Vercel.

Despliegue con GitHub Pages (opcional)

Instala el paquete:

npm install gh-pages --save-dev

1 2	npm install gh-pages --save-dev

En package.json, añade estas líneas:

"homepage": "https://tuusuario.github.io/app-clima-tiempo-real",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

"homepage": "https://tuusuario.github.io/app-clima-tiempo-real",

"scripts": {

"predeploy": "npm run build",

"deploy": "gh-pages -d build"

}

Ejecuta

npm run deploy

1 2	npm run deploy

Tu app estará disponible en la URL indicada.

Para otros servicios como Netlify o Vercel, simplemente sube el repositorio y ellos detectarán automáticamente la app React.

Conclusión y buenas prácticas

En este tutorial has aprendido a crear una app clima en tiempo real con React y OpenWeather API desde cero. Al seguir estos pasos, no solo construiste una aplicación funcional sino que también practicaste:

Configuración del entorno React.
Creación de componentes funcionales altamente reutilizables.
Consumo de APIs RESTful con manejo adecuado de estados y errores.
Uso efectivo de Hooks (useState, useEffect).
Presentación clara y atractiva de datos dinámicos.
Opciones para el despliegue básico.

Buenas prácticas recomendadas:

No exponer la API Key en el frontend para producción (usar variables de entorno y backend).
Manejar posibles errores y estados de carga para mejor UX.
Diseñar una interfaz responsive y accesible.
Usar librerías como axios para un mejor manejo de solicitudes si la app crece.

Próximos pasos sugeridos

Implementar búsqueda con autocompletado.
Agregar pronósticos extendidos.
Incorporar localización automática por GPS.

Si te gustó este tutorial, no olvides compartir y seguir explorando el mundo del desarrollo frontend React con APIs en tiempo real.

¡Feliz codificación!