React, c'est quoi ? La bibliothèque UI JavaScript expliquée

React est une bibliothèque JavaScript pour construire des interfaces utilisateur à partir de composants. Vous décrivez à quoi l'écran doit ressembler pour les données actuelles, et quand les données changent, React met la page à jour pour qu'elle corresponde. React, React JS et ReactJS désignent la même chose : une bibliothèque open source créée chez Facebook (aujourd'hui Meta).

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Cliquez sur les deux boutons. Chaque Counter garde son propre nombre, car chacun est une copie distincte du composant avec son propre état. Ajoutez une troisième ligne, <Counter label="Plums" />, et un nouveau compteur indépendant apparaît.

Ce court exemple montre déjà les trois idées sur lesquelles React repose : les composants (Counter et App sont des fonctions qui renvoient de l'interface), le JSX (la syntaxe proche du HTML à l'intérieur de return) et l'état (count, une valeur qui fait redessiner le composant par React quand elle change).

Le problème que React résout

Une interface utilisateur est une image de certaines données. Quand les données changent, l'image doit changer aussi, et chaque partie de l'écran qui dépend de ces données doit suivre. Sans bibliothèque, vous écrivez ce code à la main : trouver chaque élément, puis régler vous-même son texte, sa classe ou sa visibilité. Chaque nouvelle fonctionnalité ajoute un endroit de plus qu'il faut penser à mettre à jour.

React inverse la logique. Vous écrivez une seule fonction qui dit ce que l'écran doit être pour un état donné, et React détermine quelles parties de la page doivent changer. C'est ce qu'on appelle une interface déclarative, par opposition au code impératif qui énumère chaque modification du DOM étape par étape. Voici les deux styles côte à côte dans un même exemple :

import { useEffect, useRef, useState } from 'react';

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

function Declarative() {
    const [count, setCount] = useState(0);

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

ByHand confie son paragraphe à du code DOM classique (l'effet n'exécute ce code qu'une fois que React a créé le paragraphe). Il garde le nombre dans une variable, trouve chaque élément avec querySelector et règle son texte à la main. Declarative dit seulement « affiche le compteur, et indique s'il est pair ». Supprimez la ligne de handleClick qui règle .parity et cliquez plusieurs fois : la première ligne affirme maintenant que 3 est pair, alors que la seconde ne peut pas se désynchroniser, car le texte est calculé à partir de count à chaque rendu.

Comment React met la page à jour

Quand l'état change, React appelle à nouveau votre fonction composant. Cet appel est un rendu. La fonction renvoie une nouvelle description de l'interface, React la compare à la précédente, puis ne modifie que les parties de la vraie page qui diffèrent. On appelle souvent cette description en mémoire le DOM virtuel.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

Ouvrez la console sous l'aperçu et tapez quelques lettres. Chaque frappe enregistre un rendu avec la nouvelle valeur. Le champ garde le focus et la position du curseur, car React n'a touché qu'au texte du paragraphe et à la valeur du champ, pas à toute la page. La page sur le rendu explique précisément quand un composant refait un rendu.

Composants, JSX et état en un coup d'œil

Les composants sont des fonctions JavaScript dont le nom commence par une majuscule. Ils renvoient ce qui doit apparaître à l'écran, et vous les utilisez comme des balises HTML : <Counter />. Une page est un arbre de composants, des petits comme un bouton aux grands comme un écran de réglages entier. Voir composants.

Le JSX est la syntaxe qui permet d'écrire du balisage dans du JavaScript. Les accolades repassent en JavaScript : {count} affiche une valeur et {items.map(...)} transforme un tableau en liste. Un outil de build compile le JSX en simples appels de fonction avant que le navigateur l'exécute.

L'état est une donnée dont un composant se souvient d'un rendu à l'autre. Vous le créez avec le hook useState, et appeler son setter est la façon de dire à React que quelque chose a changé. Les données descendent des parents vers les enfants grâce aux props, qui sont les arguments d'un composant.

Cet exemple utilise tout cela : une liste rendue à partir d'un tableau dans l'état, et un formulaire qui l'enrichit.

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

Ajoutez une tâche et deux choses changent en même temps : la liste et le compteur en dessous. Vous n'avez jamais demandé au compteur de se mettre à jour. Les deux lisent tasks, donc les deux le suivent. Remplacez le tableau de départ par [] et la liste affiche « Nothing to do. » à la place.

Ce que React n'est pas

React est une bibliothèque, pas un framework complet. Il couvre les composants, l'état et leur transformation en interface, et laisse volontairement de côté plusieurs choses dont une application complète a besoin :

• Le routage. Il n'existe aucun moyen intégré d'associer des URL à des pages. React Router et les routeurs des frameworks comblent ce manque.
• La récupération de données et le rendu serveur. React fournit des outils comme les effets et Suspense, mais n'impose rien sur l'origine des données ni sur la façon dont les pages sont rendues sur un serveur.
• Une configuration de build. Les navigateurs ne comprennent pas le JSX, il vous faut donc un outil comme Vite pour le compiler.

Des frameworks s'appuient sur React pour fournir ces éléments. Next.js et le mode framework de React Router ajoutent le routage, le rendu serveur et le chargement de données, et l'équipe React recommande de démarrer une application complète avec l'un d'eux. Pour une application côté client ou pour apprendre, Vite avec React seul est un point de départ léger et rapide ; voir comment installer React.

React ou React Native

React lui-même décrit seulement les composants et la façon dont ils changent. Un moteur de rendu séparé les transforme en quelque chose de visible. React DOM fait le rendu dans des pages web, et c'est ce qu'utilisent tous les exemples de ce site. React Native fait le rendu du même type de composants en vues natives iOS et Android : vous écrivez <View> et <Text> au lieu de <div> et <p>, et il n'y a aucun fichier HTML ni CSS. Les composants, les props, l'état et les hooks fonctionnent de la même façon dans les deux, donc ce que vous apprenez ici s'applique directement.

Quand apprendre React

Apprenez React après les bases de JavaScript, car tout dans React est du JavaScript. Avant de commencer, vous devriez être à l'aise avec :

• les variables, les fonctions et les fonctions fléchées
• les tableaux et leurs méthodes map et filter
• les objets, la déstructuration et la syntaxe de décomposition (...)
• import et export
• les promesses et async/await, pour charger des données

Si tout cela vous est familier, commencez par le JSX et les composants, puis les props et l'état. Les effets, les refs, le contexte et les outils de performance viennent ensuite, une fois que construire de petits composants interactifs vous semble naturel.