React

1. 1

   Qu'est-ce que React ?

   Bienvenue. Si vous n'avez jamais écrit une ligne de JavaScript et que vous ne savez pas trop ce qu'est un "framework", vous êtes au bon endroit. À la...

   What React isComponents as functionsVirtual DOM intuitionRendering JSXCreating a Vite app
   25 min
2. 2

   JSX et Components

   Dans la leçon précédente, vous avez vu un composant renvoyer quelque chose qui ressemblait à du HTML : return <h1>Hello, React</h1>;. Cela aurait dû...

   JSX syntax rulesSingle root elementClassName vs classEmbedding expressions with {}Defining componentsComposing components
   30 min
3. 3

   Props

   Tous les composants que vous avez écrits jusqu'ici avaient leur contenu écrit en dur. Greeting salue toujours le même nom, Card affiche toujours le...

   Passing props as attributesReceiving props objectDestructuring props in signatureDefault valuesThinking about prop shapes
   30 min
4. 4

   Le State avec useState

   Tous les composants que vous avez écrits jusqu'ici produisent le même résultat pour les mêmes props, systématiquement. C'est très bien pour un titre...

   UseState hookReading stateCalling the setterUpdater function formNever mutate stateCounter pattern
   35 min
5. 5

   Gestion des événements

   Un composant qui ne fait que produire un rendu à partir des props et de l'état n'est pas interactif tout seul : il faut bien que quelque chose...

   OnClick handlerOnChange basicsPassing functions vs calling themEvent objectPassing handlers as props
   30 min
6. 6

   Rendu conditionnel et listes

   Presque tous les écrans que vous avez utilisés affichent une chose plutôt qu'une autre selon une condition : une bannière « vous avez de nouveaux...

   && for show/hideTernary for either/orMapping arrays to JSXThe key propWhy keys need to be stable
   30 min
7. 7

   Formulaires et Controlled Inputs

   Tapez une lettre dans un <input> HTML ordinaire et le navigateur s'en occupe tout seul : l'élément du DOM retient discrètement ce que vous avez tapé,...

   Controlled input patternValue and onChange togetherMulti-field form stateOnSubmit and preventDefaultGathering form data
   35 min
8. 8

   Les Effects avec useEffect

   Jusqu'ici, le rôle d'un composant a été de regarder ses props et son état courants pour répondre à une seule question : que doit-on voir à l'écran en...

   What counts as a side effectUseEffect signatureDependency arrayRunning on mount onlyCleanup functionSubscribe/unsubscribe pattern
   40 min
9. 9

   Récupération des données

   Presque aucune application réelle ne peut se contenter d'afficher les données que l'utilisateur a déjà sous les yeux. À un moment, un composant doit...

   Fetch inside useEffectLoading/error/data statesAbortController cleanupPreventing setState after unmountMention TanStack Query as a next step
   40 min
10. 10

    Composition de Components

    Vous avez construit une carte avec une bordure et une ombre, et le rendu est réussi. Il vous faut maintenant la même carte autour d'une photo, autour...

    Children propWrapping componentsPassing JSX as propsLifting state upThinking in component trees
    35 min
11. 11

    Context et useContext

    Votre application a un interrupteur de mode sombre. Il se trouve dans le panneau des réglages, mais ce qui a besoin d'en connaître l'état, c'est un...

    CreateContextContext.ProviderUseContextWhen context is the right toolContext vs prop drilling tradeoffs
    35 min
12. 12

    useReducer

    Un formulaire de commande commence simplement. Il y a une valeur, donc vous ajoutez useState. Puis il lui faut un message d'erreur, ce qui fait un...

    When to reach for useReducerReducer function shapeAction objectsDispatchCombining useReducer with useContext
    35 min
13. 13

    Hooks personnalisés

    Vous avez écrit un tiroir qui s'ouvre et se ferme. Trois lignes de useState et un gestionnaire qui inverse un booléen. Puis la même chose pour un...

    Extracting stateful logic into a functionUse prefix conventionUseToggle exampleUseLocalStorage exampleHooks rules
    35 min
14. 14

    Performance et Memoization

    Votre application affiche un tableau de deux mille lignes avec un champ de recherche au-dessus. Chaque frappe est laborieuse : vous tapez, et la...

    React.memo for componentsUseMemo for expensive computationsUseCallback for stable function referencesWhen memoization is overkillMeasuring before optimizing
    35 min
15. 15

    Routage avec React Router

    Tout ce que vous avez construit jusqu'ici tient à une seule adresse. Il n'y a qu'une page, et ce que vous voulez montrer à l'utilisateur, vous...

    Installing react-router-domBrowserRouterRoutes and RouteLink for navigationUseParamsUseNavigate
    40 min
16. 16

    Tester les Components React

    Vous changez une ligne dans un composant partagé, puis vous passez vingt minutes à cliquer partout dans l'application pour vérifier que rien d'autre...

    Vitest + React Testing Library setupRender and screenGetByRole queriesUserEvent for interactionsWriting one good button test
    40 min
17. 17

    Projet final : Application de liste de tâches

    Jusqu'ici, chaque leçon vous a présenté une idée à la fois, avec un petit exemple autour. Les vraies applications ne fonctionnent pas ainsi. Dans une...

    Combining state, lists, controlled inputsCustom hook for localStorage persistenceSmall routing setupPutting it together
    60 min

Chaque leçon, quiz et réponse du tuteur s’affiche dans votre langue. Le tuteur IA répond dans la langue que vous utilisez.

See how hiring teams interview engineers on React, in production-like environments.