Apprendre React: Cours Code
Apprendre React: Cours Code — Apprenez la programmation React en écrivant du JSX et en l’exécutant sur votre téléphone
Apprendre React: Cours Code est une application iOS et Android gratuite au départ qui enseigne la programmation React aux débutants ayant quelques notions de HTML, CSS ou JavaScript, ainsi qu’aux développeurs qui passent d’un autre framework. Écrivez du JSX dans un éditeur de code, appuyez sur Exécuter et regardez votre composant s’afficher dans un aperçu en direct intégré à l’application. 88 cours et 324 leçons vous accompagnent de votre premier composant jusqu’aux hooks et à la gestion de l’état, puis à Next.js, avec 20 projets guidés tout au long du parcours.
- Prix
- Gratuit, mise à niveau Pro
- Plateformes
- iOS et Android
- Langues
- 22
- Classification par âge
- 4+
- Version
- 82.6.1
- Configuration requise
- iOS 15.1 ou version ultérieure
- App Store
- 3.8 ★ (4)
Votre composant s’affiche sur le téléphone, pas sur un serveur.
L’environnement d’exécution, ReactDOM et Babel sont intégrés à l’application : le JSX que vous écrivez est donc compilé et affiché sur l’appareil. Vous pouvez appuyer sur le bouton que vous venez de créer, saisir du texte dans votre formulaire et voir l’interface réagir : c’est cette boucle de rétroaction qui permet de vraiment comprendre les hooks.
Ce que c’est
Apprendre React: Cours Code est un cours React gratuit au départ pour iOS et Android, avec 88 cours et 324 leçons interactives, de la première ligne de JSX aux hooks, à la gestion de l’état, à React 19 et à l’App Router de Next.js. L’éditeur intégré compile votre code sur l’appareil et affiche le composant dans un aperçu en direct, tandis que 20 projets guidés vérifient chaque étape avant de vous laisser poursuivre. Il s’agit d’une application d’apprentissage indépendante, sans affiliation avec Meta ou Vercel.
Dans l’application
À quoi elle ressemble
Le cours
Ce que couvre le cours React
88 cours tirés de la liste de l’app, organisés dans l’ordre habituel d’une première découverte de React.
React Kickoff, JSX et Props & Composition
Les composants, l’interface utilisateur déclarative et la façon dont React met à jour le DOM, puis les règles de JSX, l’affichage de listes et la transmission de données avec les props.
State, Events, Forms et useRef
useState et la gestion des événements, les formulaires contrôlés avec validation, ainsi que useRef pour les valeurs et l’accès au DOM qui ne déclenchent pas de rendu.
useEffect, Data Fetching et Custom Hooks
Le moment où les effets s’exécutent, les tableaux de dépendances, les états de chargement et d’erreur pour les appels API, ainsi que l’extraction d’une logique réutilisable dans vos propres hooks.
Context, Redux Toolkit et Zustand
Partager l’état sans prop drilling avec Context et useReducer, puis découvrir Redux Toolkit avec RTK Query, Zustand et Jotai pour les applications plus importantes.
Routing, React Query et Forms at Scale
Le routing côté client et les approches de React Router, l’état serveur avec TanStack Query et SWR, React Hook Form et l’interface utilisateur optimiste.
Performance, Testing et TypeScript
Le rendu et la mémorisation, le code splitting, les listes virtualisées, les tests avec React Testing Library, ainsi que le typage des composants et des hooks.
React 19, Server Components et Next.js
Les Server Components et les Actions, le SSR et l’hydratation, puis le App Router de Next.js avec la récupération des données, la mise en cache et l’authentification.
Fonctionnement
Comment fonctionne une leçon
Une leçon présente un concept court, immédiatement suivi par du code que vous écrivez et exécutez : l’idée et le résultat apparaissent ainsi sur le même écran.
Lisez un concept
Ouvrez un cours depuis le parcours d’apprentissage et lisez une courte leçon, par exemple sur la mise à jour de l’état ou sur la nécessité des keys dans une liste. La présentation du cours indique quelles leçons sont gratuites, afin que vous puissiez découvrir le format avant de vous engager.
Écrivez du JSX et appuyez sur Exécuter
Saisissez le composant dans l’éditeur de code et exécutez-le. L’aperçu en direct affiche votre composant dans l’application : vous pouvez donc cliquer sur le bouton, saisir du texte dans le champ et voir ce que fait le code.
Vérifiez-le, puis développez-le
Les quiz, missions de programmation et projets guidés vérifient que vous avez bien assimilé le concept, tandis que le mentor IA explique un hook ou une erreur que vous ne parvenez pas à comprendre. Bug Hunt et UI Match vous permettent de mettre à nouveau le concept en pratique.
Contenu
Ce que l’application comprend
88
Cours, 324 leçons
Du JSX, des props et de l’état aux hooks personnalisés, aux formulaires, à Context et à Redux Toolkit, puis aux Server Components, au SSR et à l’App Router de Next.js, le tout regroupé des niveaux A1 à C1.
En direct
Éditeur avec aperçu en direct
Un éditeur de code conçu pour le JSX, avec le composant affiché dans l’application. Les projets multi-fichiers vous permettent d’importer un composant dans un autre, comme dans les véritables applications.
20
Projets guidés
Créez un bouton J’aime, des cartes de profil, une calculatrice de pourboire, un jeu de quiz, un panier d’achat et bien plus encore, étape par étape. Chaque étape vérifie que le composant fonctionne réellement.
Laboratoire
Hooks Lab et réglages des props
Observez chaque changement d’état et chaque nouveau rendu au moment où ils se produisent, et modifiez une prop avec un curseur pour voir le composant se mettre à jour. Un profileur de rendu et une chronologie de l’état sont inclus dans Pro.
30
Missions de programmation
Des missions de niveaux facile, intermédiaire et difficile sur les hooks, le rendu, les formulaires, le contexte et les performances, ainsi que UI Match, Bug Hunt et Component Recall avec répétition espacée.
IA
Mentor IA
Demandez une explication, laissez l’IA relire votre code et suggérer une correction, ou générez une leçon personnalisée sur n’importe quel sujet. Le mentor et l’examen de certification sont inclus dans Pro.
Contexte
Que devez-vous réellement comprendre pour écrire du React, et dans quel ordre ?
React est une bibliothèque JavaScript permettant de créer des interfaces utilisateur à partir de petits composants réutilisables qui se redessinent lorsque leurs données changent. La plupart des débutants ne bloquent pas sur la syntaxe, mais sur le modèle sous-jacent : ce qu’est un rendu, ce qui constitue un état et le moment où les effets s’exécutent. Apprendre ces notions dans l’ordre, avec quelque chose à l’écran pour mettre chacune d’elles à l’épreuve, est plus rapide que de tout lire en même temps.
Composants et propsl’unité réutilisable
Un composant est une fonction qui renvoie une partie de l’interface, et les props sont les entrées qu’il reçoit de son parent. Comme les données descendent via les props, vous pouvez lire un composant et prévoir ce qu’il affichera.
Étatce qui évolue avec le temps
L’état correspond aux données qu’un composant conserve entre les rendus, comme le texte d’un champ ou l’indication qu’un menu est ouvert. La mise à jour de l’état planifie un nouveau rendu : c’est le mécanisme à l’origine de presque tous les écrans interactifs.
Hooks et effetslà où les débutants bloquent
Les hooks comme useState, useRef et useReducer permettent à un composant de conserver un état et d’accéder au DOM. useEffect exécute du code après un rendu, et un tableau de dépendances incorrect est la source la plus fréquente de boucles et de valeurs obsolètes.
Rendu et nouveau rendupourquoi l’application semble lente
Un composant est à nouveau rendu lorsque son état ou ses props changent, tout comme les composants qu’il contient. Savoir ce qui a déclenché un rendu est le point de départ de toute optimisation des performances, de la mémorisation au découpage du code.
Pour qui
À qui elle s’adresse — et à qui elle ne s’adresse pas
Cette application vous convient si vous
- Vous connaissez un peu HTML, CSS ou JavaScript et souhaitez commencer React sur de bonnes bases
- Vous êtes développeur dans un autre framework et devez passer rapidement à React
- Vous apprenez mieux lorsque le résultat apparaît à l’écran dès que le code s’exécute
- Vous créez un portfolio de petits projets et souhaitez être guidé étape par étape
- Vous préparez un entretien frontend et souhaitez vous entraîner avec des questions
Ce n’est pas le bon outil si vous
- Vous n’avez jamais vu JavaScript, car le cours en suppose une connaissance minimale
- Vous voulez créer et déployer un projet complet, ce qui nécessite toujours un ordinateur portable
- Vous vous attendez à ce que tout soit gratuit, alors que le premier cours est gratuit et que Pro déverrouille le reste
- Vous voulez un cours officiel de l’équipe React, car cette app est indépendante
Questions
Foire aux questions
Peut-on apprendre la programmation React sur un téléphone ?
Les idées fondamentales, les composants, les props, l’état et les hooks peuvent s’apprendre sur un téléphone si vous pouvez exécuter ce que vous écrivez. Apprendre React: Cours Code intègre ReactDOM et Babel, afin que votre JSX soit rendu dans un aperçu en direct sur l’appareil. Un ordinateur portable devient utile dès que vous créez et déployez un projet plus important.
Dois-je connaître JavaScript avant d’apprendre React ?
En connaître un peu est utile. Apprendre React: Cours Code s’adresse aux personnes qui connaissent déjà un peu HTML, CSS ou JavaScript, notamment les variables, les fonctions et les tableaux. Si vous n’avez jamais écrit de JavaScript, commencez par l’apprendre, car les leçons React supposent que vous savez le lire.
Quelle est la différence entre les props et l’état ?
Les props sont des entrées qu’un composant reçoit de son parent et ne devraient pas être modifiées, tandis que l’état correspond aux données que le composant possède et met à jour au fil du temps. Dans Apprendre React: Cours Code, vous pouvez l’observer dans le Hooks Lab, qui affiche chaque changement d’état et chaque nouveau rendu, ainsi qu’avec les boutons de réglage des props, qui permettent de modifier une prop avec un curseur.
L’app enseigne-t-elle des hooks comme useEffect ?
Oui. Apprendre React: Cours Code couvre useState, useEffect, useRef, useReducer, les hooks personnalisés et useLayoutEffect. Des leçons distinctes expliquent quand les effets s’exécutent, les tableaux de dépendances et les erreurs courantes, avec un mode Bug Hunt pour trouver les bugs dans des composants défectueux.
React est-il identique à React Native, et l’app enseigne-t-elle les deux ?
Non. React est la bibliothèque destinée à créer des interfaces utilisateur, tandis que React Native reprend les mêmes concepts pour créer des applications mobiles. Apprendre React: Cours Code enseigne d’abord React pour le web, et un cours de fondamentaux de React Native aide les développeurs web à transposer ces compétences au mobile.
Apprendre React: Cours Code couvre-t-il Next.js et React 19 ?
Oui. Les cours couvrent les fonctionnalités de React 19 et les Server Components, le SSR et l’hydratation, le streaming, ainsi que le App Router de Next.js avec la récupération des données, la mise en cache et l’authentification. Un cours de fondamentaux de React Native est également proposé aux développeurs web.
Quels types de projets puis-je créer ?
20 projets guidés sont proposés, construits progressivement, une petite étape à la fois : un bouton J’aime, des cartes de profil, une calculatrice de pourboire, un jeu de quiz, un chronomètre, un formulaire d’inscription, un panier d’achat, un carrousel d’images, une liste paginée et une application de tâches. Chaque étape vérifie que votre composant fonctionne avant de vous laisser continuer.
Apprendre React: Cours Code est-elle gratuite ?
Son téléchargement est gratuit. La version gratuite comprend le premier cours, un projet guidé, deux missions de programmation, l’éditeur de code avec aperçu en direct, Hooks Lab, les boutons de réglage des props, Bug Hunt et trois vérifications UI Match par jour, et affiche des publicités. Pro déverrouille tous les cours, projets et missions, le mentor IA, le profileur de rendu, l’examen de certification et supprime les publicités.
Y a-t-il un certificat ou une préparation aux entretiens ?
La réussite de l’examen final permet d’obtenir un certificat partageable, inclus dans Pro. Pour les entretiens, 50 questions d’entretien, un quiz de 50 questions et une fiche récapitulative permettent de réviser les concepts fondamentaux.
Le code s’exécute-t-il sur un serveur ?
Non. Le runtime est intégré à l’app : votre code est donc compilé et rendu sur l’appareil. C’est pourquoi vous pouvez appuyer sur le bouton que vous avez créé et voir l’interface réagir directement dans l’aperçu.
Quels langages et quelles plateformes sont pris en charge ?
Apprendre React: Cours Code fonctionne sur iOS et Android et est disponible en 22 langues. L’app est classée 4+ et nécessite iOS 15.1 ou une version ultérieure sur iPhone.
Commencer
Affichez votre premier composant dès aujourd’hui
Gratuit pour commencer sur iOS et Android, en 22 langues.
Plus de CoddyKit
Disponible sur iOS et Android.