Front-end · 6 mondes · 18 étapes

React

Composants, état, effets : des interfaces web qui réagissent, rendues pour de vrai.

Progression

0 %

0/18 étapes terminées

← Décryptages

Fondamental · 8 min de lecture

JSX et composants

L'interface comme une fonction des données

1Définition

Un composant React est une fonction dont le nom commence par une majuscule, qui renvoie du JSX : une syntaxe proche du HTML où les accolades insèrent des valeurs JavaScript. On compose une page en assemblant des composants, et l'on affiche selon une condition avec ? : ou &&.

2Principes fondamentaux

className, pas class

class est un mot réservé de JavaScript.

Des expressions dans les accolades

Variables, calculs, appels : pas de if ni de for.

Un parent unique

Un <div> ou un fragment <>…</>.

Une majuscule

<Menu /> est un composant, <menu> une balise HTML.

3Exemples pratiques

Afficher selon une condition

Exemple

1{connecte ? <p>Bonjour, {pseudo} !</p> : <button>Se connecter</button>}2{nouveau && <span className="badge">Nouveau</span>}

Le ternaire choisit entre deux éléments ; && affiche ou n'affiche rien.

Créer un projet

Exemple

1npm create vite@latest mon-appli -- --template react2cd mon-appli && npm install && npm run dev

Vite crée un projet React prêt à l'emploi ; Next.js est l'autre point de départ courant.

4Erreurs courantes

class au lieu de className

À éviter

<div class="carte">

À faire

<div className="carte">

Pourquoi : React avertit et l'attribut n'est pas appliqué comme prévu.

Deux éléments sans parent

À éviter

return <h1/><p/>;

À faire

return <><h1/><p/></>;

Pourquoi : Une fonction ne renvoie qu'une valeur.

Un if dans le JSX

À éviter

{if (connecte) <p/>}

À faire

{connecte && <p/>}

Pourquoi : Les accolades attendent une expression.

5Subtilités à connaître

◆{0 && <p/>} affiche « 0 » : avec un nombre, on écrit {n > 0 && <p/>}.
◆Les commentaires dans le JSX s'écrivent {/* … */}.
◆Le JSX est transformé en appels de fonctions : <h1>Salut</h1> devient un objet que React sait afficher.

6Vérifie ta compréhension

Question 1/3

Score 0

class s'écrit en JSX…

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.