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

Mode 1

Du premier écran à la maîtrise

Le parcours complet découpé en quatre niveaux. Pour chacun : l'objectif, les compétences à acquérir et ce que tu sauras faire à la fin.

« Agis comme un tuteur expert. Crée une feuille de route qui amène un débutant jusqu'à la maîtrise avancée, en étapes claires avec les compétences à acquérir à chaque niveau. »

  1. NIVEAU1

    Mondes 1 et 2

    Des composants qui décrivent l'interface

    Afficher

    Écrire des composants en JSX, les paramétrer par des props, et afficher des listes à partir des données.

    0/6

    Compétences à acquérir

    • JSXclassName, accolades, un parent unique, fragments.
    • ComposantsDes fonctions en majuscule, utilisées comme des balises.
    • PropsDes paramètres en lecture seule, avec valeurs par défaut.
    • Listesmap, key, classes calculées.

    À la fin, tu sauras

    • Découper une page en composants
    • Afficher une carte par joueur
    • Mettre en avant le joueur connecté dans un classement
    S1 · JSX et composantsS2 · Props et listes
  2. NIVEAU2

    Mondes 3 et 4

    L'état, les événements, les formulaires

    Interagir

    Faire réagir l'interface aux clics et à la saisie, avec un état minimal dont tout le reste se calcule.

    0/6

    Compétences à acquérir

    • useStateUne valeur qui survit aux rendus et en déclenche.
    • ÉvénementsonClick, onChange, onSubmit.
    • Champs contrôlésvalue et onChange, cases et listes déroulantes.
    • ImmutabilitéDe nouvelles listes, jamais push.

    À la fin, tu sauras

    • Un panier qui calcule son total
    • Un formulaire qui valide avant d'envoyer
    • Une inscription à trois champs contrôlés
    S3 · L'état et les événementsS4 · Les formulaires
  3. NIVEAU3

    Mondes 5 et 6

    Effets et patterns

    Structurer

    Synchroniser un composant avec le monde extérieur, et organiser une application qui grandit.

    0/6

    Compétences à acquérir

    • useEffectMinuteries, chargements, et leur nettoyage.
    • DebounceAttendre la fin de la frappe.
    • Remonter l'étatUne source de vérité, des fonctions en props.
    • Hooks et réducteursuseBascule, useReducer.

    À la fin, tu sauras

    • Un chronomètre qui s'arrête vraiment
    • Un chargement qui gère l'échec
    • Une liste pilotée par un réducteur
    S5 · Les effetsS6 · Des composants qui tiennent