Image de cours gratuite Apprendre ReactJS

Cours en ligne gratuitApprendre ReactJS

Durée du cours en ligne : 7 heure et 20 minutes

Nouveau

Développez des interfaces modernes avec ce cours ReactJS gratuit : JSX, composants, hooks et outils pro pour créer des apps web performantes.

Dans ce cours gratuit, découvrez

  • Comprendre React, ses objectifs et la notion d’UI déclarative
  • Écrire du JSX et comprendre le rôle de Babel dans sa transpilation
  • Créer et organiser des composants, props et composition de composants
  • Gérer les événements (onClick, etc.) et l’interaction utilisateur
  • Manipuler les formulaires via composants contrôlés et gestion d’état
  • Réaliser des mini-projets: convertisseur C/F et liste de produits
  • Optimiser les rendus avec composants purs, mémoïsation et bonnes pratiques
  • Utiliser refs pour accéder au DOM/valeurs d’inputs et useRef
  • Déboguer avec React Developer Tools
  • Démarrer un projet avec Create React App et comprendre l’intérêt de Parcel
  • Maîtriser les hooks: useState, useEffect, useMemo, useLayoutEffect, useReducer
  • Créer des hooks personnalisés pour factoriser de la logique réutilisable
  • Partager des données globales avec Context et utiliser les Portals
  • Gérer erreurs, validation des props, et bases des tests d’app React

Descriptif du cours

ReactJS est devenu un standard pour créer des interfaces rapides, modulaires et faciles à faire évoluer. Dans ce cours en ligne gratuit, vous partez de zéro pour comprendre la logique de React et adopter les bons réflexes de développement côté front. L’objectif est de vous rendre autonome pour construire une application, structurer votre UI en composants réutilisables et gagner en productivité grâce à un workflow moderne.

Vous commencerez par les bases essentielles : la philosophie de React, l’idée de composants et la manière dont on pense une interface en briques indépendantes. Vous découvrirez ensuite JSX et son rôle dans l’écriture d’un rendu lisible, puis la gestion des événements et des formulaires, un passage clé pour créer des interfaces interactives. Des exercices pratiques vous aideront à passer rapidement de la théorie à une vraie mise en application, avec des mini-projets qui donnent du sens à chaque concept et vous obligent à raisonner comme un développeur React.

Au fil de votre progression, vous apprendrez à composer des composants de manière propre, à éviter les rendus inutiles et à diagnostiquer votre application avec les bons outils. Vous verrez aussi comment interagir avec le DOM lorsque c’est nécessaire via les refs, et comment mettre en place un environnement de développement efficace avec des solutions courantes de démarrage de projet. L’ensemble vous prépare à travailler dans des conditions proches de celles rencontrées en entreprise.

Une large partie du cours est consacrée aux hooks, indispensables pour gérer l’état, les effets de bord, les références, la mémoïsation et des logiques plus avancées. Vous comprendrez quand utiliser useState, useEffect, useMemo, useRef, useLayoutEffect ou useReducer, et comment créer vos propres hooks pour factoriser une logique et garder un code clair. Vous aborderez aussi des notions qui aident à structurer une application à mesure qu’elle grandit, comme les contextes, ainsi que des techniques utiles au quotidien : portails, manipulation de composants enfants, capture d’erreurs, validation des propriétés et bonnes pratiques pour tester.

À la fin, vous aurez acquis une base solide pour continuer vers des projets plus ambitieux : création d’applications complètes, consommation d’API, gestion d’état plus poussée, routage et tests avancés. Que vous souhaitiez renforcer vos compétences en programmation web, préparer un projet personnel ou viser une opportunité professionnelle en front-end, ce parcours vous donne une fondation pratique et durable sur ReactJS.

Contenu du cours

  • Leçon vidéo : React : Chapitre 1, Introduction 06m
  • Exercice: _Qu'est-ce que ReactJS ?
  • Leçon vidéo : React : Chapitre 2, Nos premiers pas avec React 12m
  • Exercice: Quel est l'objectif principal de cette vidéo concernant React ?
  • Leçon vidéo : React : Chapitre 3, La syntaxe JSX 13m
  • Exercice: Quel est le principal avantage de Babel dans le développement React?
  • Leçon vidéo : React : Chapitre 4, Notre premier composant 20m
  • Exercice: Qu'est-ce qu'un composant dans React selon la vidéo décrite ?
  • Leçon vidéo : React : Chapitre 5, Les évènements 14m
  • Exercice: _Qu'est-ce que la propriété "onclick" permet de faire dans ReactJS ?
  • Leçon vidéo : React : Chapitre 6, Les formulaires 29m
  • Exercice: Comment React gère-t-il les formulaires de manière différente par rapport au DOM classique ?
  • Leçon vidéo : React : Chapitre 7, TP : Convertisseur Celsius / Fahrenheit 27m
  • Exercice: _Quel est l'objectif du petit exemple proposé dans ce chapitre de "Apprendre ReactJS avec Grafikart.fr" ?
  • Leçon vidéo : React : Chapitre 8, La composition 06m
  • Exercice: Quelle est l'approche recommandée pour créer des composants en React ?
  • Leçon vidéo : React : Chapitre 9, TP : Liste de produit 32m
  • Exercice: _Quels sont les composants principaux de l'interface décrite dans le texte ?
  • Leçon vidéo : React : Chapitre 10, Composant pur 19m
  • Exercice: Quel concept est essentiel pour éviter les rendus inutiles des composants en React?
  • Leçon vidéo : React : Chapitre 11, Les refs et le DOM 13m
  • Exercice: _Quel est le but de l'utilisation des références dans ReactJS?
  • Leçon vidéo : React : Chapitre 12, React Dev Tool 08m
  • Exercice: Quelle est la principale utilité de l'extension React Developer Tools lors du développement avec React ?
  • Leçon vidéo : React : Chapitre 13, Create React App 14m
  • Exercice: _Quelle commande est utilisée pour créer une application React avec le template create-react-app ?
  • Leçon vidéo : React : Chapitre 14, React avec Parcel 10m
  • Exercice: Quel est l'avantage principal de Parcel selon la vidéo ?
  • Leçon vidéo : React : Chapitre 15, Le hook useState 17m
  • Exercice: _Qu'est-ce que les hooks en ReactJS et quel problème résolvent-ils ?
  • Leçon vidéo : React : Chapitre 16, Le hook useEffect 09m
  • Exercice: Quel hook React permet de gérer les effets de bord dans un composant ?
  • Leçon vidéo : React : Chapitre 17, Créer un hook personnalisé 25m
  • Exercice: _Qu'est-ce que la méthode "use state" permet de faire dans ReactJS?
  • Leçon vidéo : React : Chapitre 18, Les hook useMemo 09m
  • Exercice: Quel est le rôle principal du hook React 'useMemo' ?
  • Leçon vidéo : React : Chapitre 19, Le hook useRef 04m
  • Exercice: _Comment récupérer la valeur d'un champ input sans utiliser React ?
  • Leçon vidéo : React : Chapitre 20, Le hook useLayoutEffect 05m
  • Exercice: Quelle est la principale différence entre 'useEffect' et 'useLayoutEffect' dans le contexte de React selon la vidéo ?
  • Leçon vidéo : React : Chapitre 21, Le hook useReducer 09m
  • Exercice: _Quel est l'intérêt du "look nude reduces" dans ReactJS ?
  • Leçon vidéo : React : Chapitre 22, Récapitulatif des hooks 04m
  • Leçon vidéo : React : Chapitre 23, Les contextes 39m
  • Exercice: _Qu'est-ce que les contextes en ReactJS permettent de faire ?
  • Leçon vidéo : React : Chapitre 24, Les portails 04m
  • Leçon vidéo : React : Chapitre 25, Manipuler les composants enfants 18m
  • Exercice: _Comment peut-on extraire la liste des titres des onglets dans notre composant "taps" ?
  • Leçon vidéo : React : Chapitre 26, Capturer les erreurs 08m
  • Leçon vidéo : React : Chapitre 27, Valider les propriétés 10m
  • Exercice: _Comment peut-on vérifier les propriétés reçues par un composant dans ReactJS ?
  • Leçon vidéo : React : Chapitre 28, Comment tester ? 26m
  • Leçon vidéo : React : Chapitre 28, TP Recettes: Introduction 13m
  • Exercice: _Quel est le composant principal de l'application proposée dans ce chapitre ?
  • Leçon vidéo : React : Où est la suite des TP ? 00m
  • Leçon vidéo : React : Chapitre 36, Conclusion 04m
  • Exercice: _Quels sont les deux pistes que vous pouvez adopter après avoir acquis les bases de ReactJS?

Ce cours gratuit comprend:

7 heure et 20 minutes du cours vidéo en ligne

Certificat numérique de réussite du cours (gratuit)

Exercices pour développer vos connaissances

100% gratuit, du contenu au certificat

Prêt à commencer ?Téléchargez l’application et commencez dès aujourd’hui !

Installez l'application

dès maintenant pour accéder au cours
Icône représentant les cours de technologie et de commerce

Plus de 5000 cours gratuits

Programmation, anglais, marketing digital et bien plus encore ! Apprenez ce que vous voulez, gratuitement.

Icône de calendrier avec cible représentant la planification des études

Plan d'études avec IA

L'intelligence artificielle de notre application peut créer un planning d'études pour le cours que vous choisissez.

Icône professionnelle représentant la carrière et le commerce

De débutant à professionnel accompli

Améliorez votre CV grâce à notre certificat gratuit, puis utilisez notre intelligence artificielle pour trouver l'emploi de vos rêves.

Vous pouvez également utiliser le code QR ou les liens ci-dessous.

Code QR - Télécharger Cursa - Cours en ligne

Plus de cours gratuits sur Programmation web

Ebook + livres audio gratuits ! Apprenez en écoutant ou en lisant !

Téléchargez l'application dès maintenant pour avoir accès à + 5000 cours gratuits, exercices, certificats et de nombreux contenus sans rien payer !

  • Cours en ligne 100% gratuits du début à la fin

    Des milliers de cours en ligne en vidéo, livres électroniques et livres audio.

  • Plus de 60 000 exercices gratuits

    Pour tester vos connaissances lors de cours en ligne

  • Certificat numérique gratuit et valide avec code QR

    Généré directement à partir de la galerie de photos de votre téléphone portable et envoyé à votre adresse e-mail

Application Cursa sur l'écran du livre électronique, l'écran du cours vidéo et l'écran des exercices du cours, ainsi que le certificat de fin de cours