Qu'est-ce que React ? Guide en langage clair pour les non-développeurs

React est une bibliothèque JavaScript pour créer des interfaces utilisateur, c'est-à-dire la partie de l'application que les personnes voient et sur laquelle elles cliquent. On construit les écrans à partir de morceaux réutilisables appelés composants, comme un bouton, une fiche produit ou une page entière, et React garde l'écran synchronisé avec vos données : quand les données changent, React met à jour les parties de la page qui en dépendent. Créé chez Facebook (aujourd'hui Meta), open source, React est l'une des méthodes les plus utilisées pour développer des applications web.

Pourquoi c'est important quand on crée avec l'IA

Si vous créez une application web avec un outil d'IA, il y a de fortes chances qu'elle soit écrite en React. De nombreux générateurs d'applications par IA utilisent React par défaut, car il est populaire, bien documenté, et il existe une quantité considérable de code React sur laquelle les modèles d'IA ont pu apprendre.

Il n'est pas nécessaire d'écrire du React pour créer avec l'IA. Mais en connaître un peu vous aide à :

• Décrire les modifications avec précision. « Mets le prix en gras dans le composant ProductCard » est plus clair que « fais ressortir les prix quelque part ».
• Comprendre les erreurs. Des messages comme « Cannot read properties of undefined » ou « Too many re-renders » deviennent plus parlants.
• Faire des choix judicieux. Les applications React simples s'affichent dans le navigateur, ce qui influe sur la visibilité dans les moteurs de recherche et sur la vitesse du premier chargement. Le savoir vous aide à décider quand demander une autre configuration.
• Travailler plus tard avec des développeurs. React est une compétence courante : un développeur peut en général prendre en main une base de code React sans difficulté.

Une analogie du quotidien

Pensez aux LEGO. Au lieu de sculpter un modèle entier dans un seul bloc, vous le construisez avec des briques standard. Quelques briques forment une roue ; quatre roues et quelques autres pièces forment une voiture. Si vous voulez que chaque voiture ait des roues rouges, vous modifiez le modèle de roue une seule fois.

Les composants React sont les briques. Un composant Button est utilisé dans un ProductCard, lui-même utilisé dans une ProductGrid, qui fait partie de la ShopPage. Vous modifiez Button une seule fois, et chaque bouton de l'application change.

Il y a aussi l'autre moitié de l'analogie : imaginez que le modèle LEGO se reconstruise tout seul chaque fois que vous changez la notice. C'est l'autre tour de React : vous décrivez à quoi doit ressembler l'écran pour les données actuelles, et React détermine ce qu'il faut modifier sur la page.

Les idées centrales

Les composants

Un composant est une fonction JavaScript qui renvoie un morceau d'interface. La documentation de React décrit un composant comme une partie de l'interface qui a sa propre logique et son propre aspect. Les noms de composants commencent par une majuscule.

JSX

Les composants sont en général écrits en JSX, qui ressemble à du HTML mélangé à du JavaScript :

function Greeting() {
  return <h1>Welcome back!</h1>;
}

Le JSX est facultatif, mais la documentation de React précise que la plupart des projets l'utilisent. Il est converti en JavaScript classique avant d'être exécuté dans le navigateur.

Les props

Les props sont les données que l'on transmet à un composant, comme des réglages sur une pièce réutilisable :

<ProductCard name="Lavender Candle" price={24} />

Le même ProductCard peut afficher n'importe quel produit.

L'état (state)

L'état est l'information qu'un composant retient et qui peut changer pendant que l'application tourne : si un menu est ouvert, ce qui est saisi dans une zone de recherche, le nombre d'articles dans le panier. Quand l'état change, React réaffiche le composant pour que l'écran corresponde.

Les hooks

Les hooks sont des fonctions dont le nom commence par use, comme useState (retenir une valeur) et useEffect (exécuter du code après l'affichage, par exemple pour charger des données). Vous les verrez partout dans le code React généré par l'IA.

Un exemple concret : un compteur de panier

Imaginons que votre boutique en ligne possède un bouton « Ajouter au panier » et une icône de panier affichant le nombre d'articles. En React, cela ressemble à peu près à ceci :

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

Ce qui se passe quand un acheteur clique sur « Ajouter au panier » :

1. Le onClick du bouton appelle onAdd, qui appelle setCartCount.
2. React met à jour l'état cartCount de 0 à 1.
3. React réaffiche Shop, en passant count={1} à CartIcon.
4. La page affiche désormais « Cart (1) ». Personne n'a écrit de code disant « trouve le texte du panier et change-le » : l'écran suit les données.

Remarquez aussi les limites. Ce compteur vit dans la mémoire du navigateur. Si vous actualisez la page, il repart de 0. Pour conserver un panier, il faudrait le sauvegarder quelque part de durable : un cookie, le stockage du navigateur, ou une base de données via votre backend. React gère l'écran ; il ne stocke pas vos données.

Où React se situe dans une application web

Une application « Vite + React » s'affiche dans le navigateur (c'est une single-page app). Une application Next.js peut d'abord générer les pages sur le serveur, ce qui aide les moteurs de recherche et la vitesse du premier chargement.

Termes courants expliqués

Erreurs courantes et idées reçues

• « React est un langage de programmation. » C'est une bibliothèque écrite et utilisée avec JavaScript (ou TypeScript).
• « React stocke mes données. » L'état vit dans le navigateur et disparaît à l'actualisation. Des données durables nécessitent un backend et une base de données.
• Mettre des secrets dans le code React. Tout ce qui se trouve dans une application React est envoyé au navigateur du visiteur. Les clés d'API y sont donc publiques. Gardez-les sur le serveur.
• « Les applications React ne peuvent pas être bien référencées. » Le rendu uniquement côté client est moins favorable au référencement, mais le pré-rendu ou le rendu serveur corrigent l'essentiel du problème.
• Des composants géants. Un composant de 1 000 lignes est difficile à modifier en toute sécurité, pour les humains comme pour l'IA. Demandez des composants plus petits.
• Croire qu'une application web React est une application mobile. Elle s'exécute dans le navigateur, y compris sur téléphone, mais ce n'est pas une application de l'App Store.

Que demander à votre générateur d'applications IA

• « Découpe cette page en petits composants nommés, et indique-moi dans quel fichier se trouve chacun. »
• « Rends le composant ProductCard réutilisable, avec le nom, le prix et l'image en props. »
• « Enregistre le panier dans la base de données pour qu'il survive à une actualisation. »
• « Garde toutes les clés d'API sur le serveur ; le code React doit appeler notre propre API. »
• « Ajoute des états de chargement et d'erreur pour les données qui viennent du serveur. »
• « Si la visibilité dans les moteurs de recherche compte pour ces pages, pré-rends-les ou utilise une configuration à rendu serveur. »
• « Explique-moi en langage simple ce que signifie cette erreur et de quel composant elle provient. »

Pour une vue d'ensemble, voir frontend et backend, et pour relire le code écrit par l'IA, comment relire le code généré par l'IA.

React dans Mythex

Sauf demande contraire, Mythex démarre les nouveaux projets sur Vite + React + TypeScript + Tailwind, avec un aperçu en direct qui tourne pendant que vous discutez. Vous pouvez nommer une autre configuration dans votre premier prompt, par exemple « Utilise Next.js » ou « une simple page d'accueil en HTML statique », et Mythex la choisit d'après ce que vous écrivez ; il n'existe pas d'écran de réglages pour cela. La page de documentation sur le choix de la technologie présente les options. L'éditeur de code est en lecture seule sur la formule gratuite ; sur Pro, vous pouvez modifier directement le code React et exporter le projet pour continuer à travailler dessus ailleurs.

Questions