Créer une météo React avec Weatherstack

Une application météo constitue un excellent projet pour apprendre React sur un cas concret. Elle combine la gestion d’état, les effets asynchrones, les formulaires, l’affichage conditionnel et l’intégration d’une API REST. En quelques écrans, il devient possible de transformer une saisie utilisateur en données météorologiques lisibles.

Weatherstack fournit les informations nécessaires pour afficher la température actuelle, la pression atmosphérique, l’humidité, la vitesse du vent et une icône représentant les conditions observées. Son API accepte une ville, une adresse ou des coordonnées géographiques comme paramètre de recherche.

Ce projet permet également de travailler avec Vite, l’outil de démarrage rapide recommandé pour de nombreuses applications React modernes. Le choix de React est particulièrement adapté lorsque l’interface doit se mettre à jour immédiatement après chaque recherche. Pour comparer ses caractéristiques avec d’autres frameworks populaires, consultez ce comparatif des frameworks.

L’objectif est de construire une interface simple, robuste et facilement extensible. Elle pourra ensuite accueillir une prévision sur plusieurs jours, la géolocalisation du navigateur, la sauvegarde des villes favorites ou un thème sombre adapté aux conditions météorologiques.

Préparer le projet React

Commencez par créer une application avec Vite et le modèle JavaScript de React :

npm create vite@latest meteo-react -- --template react
cd meteo-react
npm install
npm run dev

Supprimez le contenu d’exemple fourni par Vite afin de conserver une structure claire. Le composant principal pourra gérer la ville recherchée, les données retournées par Weatherstack, l’état de chargement et les éventuelles erreurs. Une organisation minimale peut contenir App.jsx, App.css et un dossier components pour séparer le formulaire et la carte météo.

Créez ensuite un compte Weatherstack pour obtenir une clé d’accès. Pour un prototype local, une variable d’environnement peut être déclarée dans un fichier .env :

VITE_WEATHERSTACK_KEY=votre_cle_api

Dans Vite, les variables préfixées par VITE_ sont accessibles au code client. Elles ne doivent donc jamais être considérées comme secrètes. Pour une application publiée, la meilleure approche consiste à appeler Weatherstack depuis un serveur Node.js ou une fonction serverless. Le navigateur communique alors avec votre backend, qui conserve la clé hors du bundle JavaScript.

Construire le formulaire de recherche

Le formulaire doit contrôler la valeur saisie et empêcher l’envoi d’une requête vide. useState suffit pour mémoriser le nom de la ville, tandis qu’une seconde variable d’état recevra la réponse de l’API.

import { useState } from "react";

export default function App() {
  const [ville, setVille] = useState("");
  const [meteo, setMeteo] = useState(null);
  const [chargement, setChargement] = useState(false);
  const [erreur, setErreur] = useState("");

  async function rechercherMeteo(event) {
    event.preventDefault();

    if (!ville.trim()) {
      setErreur("Saisissez une ville.");
      return;
    }

    setChargement(true);
    setErreur("");

    try {
      const cle = import.meta.env.VITE_WEATHERSTACK_KEY;
      const url = `https://api.weatherstack.com/current?access_key=${cle}&query=${encodeURIComponent(ville)}&units=m`;
      const reponse = await fetch(url);
      const donnees = await reponse.json();

      if (donnees.error) {
        throw new Error(donnees.error.info);
      }

      setMeteo(donnees);
    } catch (error) {
      setErreur(error.message || "Impossible de récupérer la météo.");
      setMeteo(null);
    } finally {
      setChargement(false);
    }
  }

  return (
    <main className="application">
      <h1>Météo locale</h1>

      <form onSubmit={rechercherMeteo}>
        <label htmlFor="ville">Ville</label>
        <input
          id="ville"
          value={ville}
          onChange={(event) => setVille(event.target.value)}
          placeholder="Paris, Lyon, Montréal..."
        />
        <button type="submit">Rechercher</button>
      </form>

      {chargement && <p>Chargement des données...</p>}
      {erreur && <p role="alert">{erreur}</p>}
    </main>
  );
}

encodeURIComponent protège la requête lorsque le nom contient des espaces ou des caractères accentués. L’attribut role="alert" améliore l’accessibilité en signalant l’erreur aux technologies d’assistance. Le bouton doit également rester compréhensible lorsque la requête est en cours, par exemple en affichant « Recherche... » et en le désactivant temporairement.

Afficher les données de Weatherstack

La réponse Weatherstack contient généralement les informations de localisation dans location, les mesures dans current et l’illustration dans current.weather_icons. Ajoutez un rendu conditionnel après le formulaire pour présenter les données uniquement lorsqu’une réponse valide est disponible :

{meteo && (
  <section className="carte-meteo" aria-live="polite">
    <h2>
      {meteo.location.name}, {meteo.location.country}
    </h2>

    <img
      src={meteo.current.weather_icons[0]}
      alt={meteo.current.weather_descriptions[0]}
    />

    <p className="temperature">
      {meteo.current.temperature} °C
    </p>

    <p>{meteo.current.weather_descriptions[0]}</p>
    <dl>
      <div>
        <dt>Ressenti</dt>
        <dd>{meteo.current.feelslike} °C</dd>
      </div>
      <div>
        <dt>Humidité</dt>
        <dd>{meteo.current.humidity} %</dd>
      </div>
      <div>
        <dt>Vent</dt>
        <dd>{meteo.current.wind_speed} km/h</dd>
      </div>
    </dl>
  </section>
)}

L’utilisation de dl, dt et dd donne une structure sémantique aux mesures. Vérifiez toutefois les unités réellement renvoyées par votre formule Weatherstack et par le paramètre units=m. Les descriptions peuvent être fournies en anglais selon la configuration du compte ; une couche de traduction côté interface peut remplacer certaines valeurs par des libellés français.

Pour éviter les erreurs d’affichage, contrôlez l’existence de chaque propriété avant de l’utiliser. Certaines offres ou certains endpoints peuvent ne pas fournir toutes les informations. Un rendu défensif avec une valeur par défaut, comme meteo.current.humidity ?? "—", rend l’application plus fiable.

Gérer les erreurs et les performances

Une application météo doit distinguer plusieurs problèmes : ville inconnue, clé invalide, limite de requêtes dépassée, absence de réseau ou réponse mal formée. Le bloc try...catch couvre les erreurs réseau, mais les messages provenant de l’API doivent aussi être transformés en texte compréhensible pour l’utilisateur.

Évitez d’envoyer une requête à chaque frappe dans le champ. Le formulaire déclenché par onSubmit limite les appels et donne à l’utilisateur le contrôle de la recherche. Pour une saisie instantanée, utilisez plutôt un debounce de quelques centaines de millisecondes et annulez les anciennes requêtes avec AbortController.

Les performances ne dépendent pas uniquement du nombre d’appels. La taille du bundle, le temps de réponse du serveur et le rendu des composants influencent aussi l’expérience. Les outils de diagnostic réseau de Chrome DevTools et Lighthouse permettent d’observer les requêtes lentes, les erreurs HTTP et les ressources inutiles.

Ajoutez enfin un cache simple avec sessionStorage pour éviter de solliciter l’API lorsqu’une ville vient d’être recherchée. En production, un cache côté serveur est plus pertinent, car il protège mieux la clé et peut mutualiser les réponses entre plusieurs utilisateurs.

Améliorer l’interface et l’architecture

Une feuille de style courte suffit pour donner une identité visuelle à la carte météo. Utilisez une largeur maximale, des espacements réguliers et un contraste élevé entre le texte et l’arrière-plan. Les valeurs importantes, comme la température, doivent être visibles au premier regard sur un écran mobile.

La géolocalisation peut compléter la recherche manuelle. Après accord de l’utilisateur, navigator.geolocation.getCurrentPosition fournit latitude et longitude, que Weatherstack peut accepter comme valeur du paramètre query. Prévoyez toujours une solution de repli lorsque le navigateur refuse l’autorisation ou que le signal est indisponible.

Pour une version plus avancée, déplacez l’appel Weatherstack dans une route Express ou une fonction cloud. Cette couche peut valider les paramètres, limiter le trafic, journaliser les erreurs et masquer la clé d’API. Elle devient aussi un emplacement naturel pour normaliser les données avant de les envoyer à React.

L’interface peut ensuite être enrichie par des favoris, une prévision quotidienne, une détection automatique du thème et des recommandations adaptées au contexte. Les projets qui combinent données publiques et génération de contenu peuvent trouver des pistes complémentaires dans cette veille sur l’intelligence artificielle, à condition de conserver une validation humaine et de ne pas exposer de données personnelles.

Publiez le projet avec un dépôt Git propre, un fichier .env.example sans clé réelle et un README expliquant l’installation. Cette petite application constitue une base concrète pour pratiquer React, les API REST, la gestion des erreurs et les principes essentiels d’une interface web accessible.