Qu'est-ce que React? Un guide en langage simple pour les non-développeurs

React est une bibliothèque JavaScript pour construire des interfaces utilisateur, c'est-à-dire la partie de l'application que les gens voient et sur laquelle ils cliquent. Vous créez les écrans à partir de pièces réutilisables appelées composants, comme un bouton, une fiche de produit ou une page complète, et React garde l'écran synchronisé avec vos données : lorsque les données changent, React met à jour les parties de la page qui en dépendent. Elle a été créée chez Facebook (aujourd'hui Meta), est open source, et constitue l'une des façons les plus répandues de construire 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 bonnes chances qu'elle soit écrite en React. De nombreux générateurs d'applications par IA utilisent React par défaut, parce que la bibliothèque est populaire, bien documentée et qu'il existe une quantité considérable de code React sur laquelle les modèles d'IA ont appris.

Vous n'avez pas besoin 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. « Modifie le composant ProductCard pour que le prix soit en gras » 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 de premier chargement. Le savoir vous aide à décider quand demander une autre configuration.
• Travailler avec des développeurs plus tard. React est une compétence courante, donc un développeur peut généralement reprendre une base de code React sans peine.

Une analogie du quotidien

Pensez aux blocs LEGO. Au lieu de sculpter un modèle complet dans un seul bloc, vous le construisez avec des briques standard. Quelques briques font une roue; quatre roues et d'autres pièces font une voiture. Si vous voulez que toutes les voitures aient des roues rouges, vous modifiez la conception de la 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. Modifiez Button une seule fois, et chaque bouton de l'application change.

L'autre moitié de l'analogie : imaginez que le modèle LEGO se reconstruise lui-même chaque fois que vous changez les instructions. C'est l'autre astuce 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 de base

Les composants

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

JSX

Les composants sont habituellement écrits en JSX, une syntaxe qui ressemble à du HTML mêlé à 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 ordinaire avant d'être exécuté dans le navigateur.

Les props

Les props sont les données que vous transmettez à un composant, un peu comme les réglages d'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 fonctionne : si un menu est ouvert, ce qui est tapé dans une zone de recherche, le nombre d'articles dans le panier. Lorsque 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.

Exemple concret : un compteur de panier

Supposons que votre boutique en ligne comporte 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 client 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 transmettant count={1} à CartIcon.
4. La page affiche maintenant « Cart (1) ». Personne n'a écrit de code disant « trouve le texte du panier et change-le » : l'écran suit les données.

Notez aussi les limites. Ce compteur vit dans la mémoire du navigateur. Si vous actualisez la page, il revient à 0. Pour conserver un panier, il faudrait l'enregistrer quelque part de durable : un témoin (cookie), le stockage du navigateur, ou une base de données par l'intermédiaire de votre backend. React gère l'écran; il ne stocke pas vos données.

Où se situe React dans une application web

Une application « Vite + React » s'affiche dans le navigateur (une application à page unique). 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 de premier chargement.

Termes courants expliqués

Erreurs courantes et idées fausses

• « React est un langage de programmation. » C'est une bibliothèque écrite et utilisée avec JavaScript (ou TypeScript).
• « React conserve mes données. » L'état vit dans le navigateur et disparaît à l'actualisation. Les données durables exigent 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 qui y figurent sont publiques. Gardez-les sur le serveur.
• « Les applications React ne peuvent pas se classer dans les moteurs de recherche. » Le rendu uniquement côté client est moins efficace pour la recherche, mais le pré-rendu ou le rendu serveur règle la plus grande partie 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-en de plus petits.
• Croire qu'une application web React est une application mobile. Elle s'exécute dans le navigateur, y compris sur les téléphones, mais ce n'est pas une application de l'App Store.

Quoi demander à votre générateur d'applications

• « Découpe cette page en petits composants nommés, et dis-moi dans quel fichier se trouve chacun. »
• « Rends le composant ProductCard réutilisable, avec le nom, le prix et l'image en tant que 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 provenant du serveur. »
• « Si la visibilité dans les moteurs de recherche compte pour ces pages, pré-rends-les ou utilise une configuration à rendu serveur. »
• « Explique en langage simple ce que signifie cette erreur et de quel composant elle provient. »

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

React dans Mythex

Sauf si vous demandez autre chose, Mythex démarre les nouveaux projets sur Vite + React + TypeScript + Tailwind, avec un aperçu en direct qui fonctionne pendant que vous clavardez. Vous pouvez nommer une autre configuration dans votre premier prompt, par exemple « Utilise Next.js » ou « page d'accueil statique en HTML simple »; Mythex la choisit à partir de ce que vous écrivez, et il n'existe pas d'écran de réglages pour cela. La page de documentation sur le choix des technologies explique les options. L'éditeur de code est en lecture seule dans le forfait gratuit; avec Pro, vous pouvez modifier directement le code React et exporter le projet pour continuer à le travailler ailleurs.

Questions