Qu'est-ce que React ?

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 1 sur 42.

React est la bibliothèque la plus populaire au monde pour créer des interfaces utilisateur. Facebook, Netflix, Airbnb : les parties interactives du web que vous utilisez chaque jour sont conçues avec cette bibliothèque.

L’idée principale est simple : au lieu d’écrire une page gigantesque, tu construis de petites pièces réutilisables appelées composants. Un bouton est un composant. Une carte de profil est un composant. Une page entière n’est que des composants imbriqués dans d’autres composants.

A component n’a rien d’effrayant : c’est une fonction JavaScript qui renvoie ce qui doit apparaître à l’écran :

function App() {
    return <h1>Hello, React!</h1>;
}

Cette chose à l’apparence HTML à l’intérieur de JavaScript s’appelle JSX. Elle te permet de décrire l’écran là où se trouve la logique. React prend ce que tes composants renvoient et maintient la page réelle synchronisée. Tu décris ce que tu veux, React détermine comment mettre à jour le navigateur.

Dans ce cours, tu modifieras App.jsx, le composant principal d’une petite application React. L’aperçu à droite affiche ton application en temps réel pendant que tu saisis du texte. Construisons quelque chose.

Défi

Débutant

Voici votre premier composant React, déjà écrit pour vous.

Que faire :

Lisez App.jsx : c’est une function qui returns JSX.
Appuyez sur le bouton Run.
Observez l’aperçu à droite render ce que le component a retourné.

C’est toute la boucle React : un component returns JSX, et React l’affiche à l’écran. À partir de la prochaine leçon, vous écrirez vous-même le JSX.

Essayez vous-même

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>