Formation React complète
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
12h43
de formation
141
leçons vidéo
9
formations
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

Formation React complète

Promo -31%
4.8/5 Trustpilot (1384 avis) Satisfait ou remboursé
12h43
de formation
141
leçons vidéo
9
formations

Bienvenue sur cette formation complète dédiée à React !

Que vous soyez un développeur débutant cherchant à maîtriser les fondamentaux ou un professionnel expérimenté désireux de rester à jour avec les dernières avancées de React, cette formation en ligne est conçue pour vous.

React 18 apporte de nouvelles fonctionnalités passionnantes et des améliorations de performance qui révolutionnent la façon dont nous concevons et développons des applications web modernes.

Au programme de cette formation React complète

Dans cette formation React, nous plongerons dans les concepts essentiels de React, depuis la mise en place initiale d'un projet jusqu'à la création d'applications web robustes et interactives.

Nous couvrirons en détail les concepts clés tels que les composants, les états, les props, le routage, la gestion des données, et bien plus encore.
Nous travaillerons autour des nouvelles fonctionnalités introduites dans React 18.

En combinant des explications théoriques claires avec des exemples pratiques et des projets réels, cette formation vous fournira les compétences et la confiance nécessaires pour construire des applications React puissantes et évolutives.

Que vous souhaitiez développer des applications web simples ou des applications d'entreprise complexes, cette formation vous fournira les bases solides dont vous avez besoin pour réussir.

Rejoignez-moi dès aujourd'hui et plongez dans le monde passionnant de React 18 !

Cours dans ce bundle

Les bases de React JS #1/9 : La découverte du framework Cours 1

Les bases de React JS #1/9 : La découverte du framework

Les bases de ReactJS #2/9 : Composant à base de classe Cours 2

Les bases de ReactJS #2/9 : Composant à base de classe

Les bases de ReactJS #3/9 : Etat et cycle de vie d'un composant Cours 3

Les bases de ReactJS #3/9 : Etat et cycle de vie d'un composant

Les bases de ReactJS #4/9 : Les hooks Cours 4

Les bases de ReactJS #4/9 : Les hooks

Les bases de ReactJS #5/9 : Maper des éléments HTML Cours 5

Les bases de ReactJS #5/9 : Maper des éléments HTML

Les bases de ReactJS #6/9 :: Manipuler des datas depuis un JSON Cours 6

Les bases de ReactJS #6/9 :: Manipuler des datas depuis un JSON

Les bases de ReactJS #7/9 : Créer une Single Page Application (SPA) Cours 7

Les bases de ReactJS #7/9 : Créer une Single Page Application (SPA)

Les bases de ReactJS #8/9 : Traitement des formulaires Cours 8

Les bases de ReactJS #8/9 : Traitement des formulaires

Les bases de ReactJS #9/9 : Exercice d'application Cours 9

Les bases de ReactJS #9/9 : Exercice d'application

Plan détaillé des cours

 

Chapitre 1 : Introduction à React

1h08
 
Leçon 1Découvrir la philosophie de React
Leçon 2Installer le framework React
Leçon 3Mettre en place une page web
Leçon 4Afficher un élément dans un autre élément
Leçon 5Ajouter des propriétés
Leçon 6Ajouter un nouvel élément dans un élément
Leçon 7Découvrir le langage JSX
Leçon 8Passer du JavaScript à JSX
Leçon 9Créer notre premier Composant
Leçon 10Passer un props d'un Composant parent à un composant enfant
Leçon 11Passer plusieurs props d'un composant parent à un composant enfant
Leçon 12Le site de Babel

Chapitre 2 : Application

29m14
 
Leçon 1Mise en place des bases du travail
Leçon 2Ecrire et afficher le composant Parent
Leçon 3Déclarer le composant Enfant
Leçon 4Recevoir et afficher les props
Leçon 5Attention aux noeuds !

Chapitre 3 : Pour la prochaine fois

02m09
 
Leçon 1Pour la prochaine fois
 

Chapitre 1 : Installer ReactJS en ligne de commande

46m32
 
Leçon 1Avant de commencer
Leçon 2Installer React
Leçon 3Lancer le projet React
Leçon 4Retour sur la fonction render utilisée dans React
Leçon 5Afficher notre composant
Leçon 6Créer un fichier JS pour le composant
Leçon 7Passer des props
Leçon 8Ajouter du CSS

Chapitre 2 : Les composants à base de classe

21m24
 
Leçon 1Déclarer un composant à base de classe
Leçon 2Récupérer les props
Leçon 3Mettre en place un événement

Chapitre 3 : Application

41m09
 
Leçon 1Créer le fichier index.js
Leçon 2Créer le fichier ProduitListe.js
Leçon 3Créer les fichiers index.css et ProduitListe.css
Leçon 4Créer le fichier ProduitItems.js
Leçon 5Envoyer des props
Leçon 6Définir un état par défaut

Chapitre 4 : Conclusion

01m42
 
Leçon 1Pour la prochaine fois
 

Chapitre 1 : Théorie

30m44
 
Leçon 1Théorie sur les états d'un composant
Leçon 2Le cycle de vie
Leçon 3Changer la valeur d'un état
Leçon 4Etude du cycle de vie d'un composant monté
Leçon 5Etude du cycle de vie d'un composant démonté

Chapitre 2 : Application: Afficher l'heure en temps réel

21m23
 
Leçon 1Ecrire les fichiers index.js et index.css
Leçon 2Ecrire le fichier Heure.js
Leçon 3Incrémenter l'heure toutes les secondes

Chapitre 3 : Pour la prochaine fois

02m22
 
Leçon 1Pour la prochaine fois
 

Chapitre 1 : Les états

39m02
 
Leçon 1Retour sur les états
Leçon 2Le hook d'état
Leçon 3Plusieurs états
Leçon 4UseState, récapitulatif

Chapitre 2 : Les cycles de vie

15m09
 
Leçon 1Introduction
Leçon 2Comment déclarer useEffect
Leçon 3Application de useEffect
Leçon 4Vérifier le cycle de vie

Chapitre 3 : Application

23m20
 
Leçon 1Créer le fichier index.js
Leçon 2Déclarer un useState
Leçon 3Déclarer un useEffect
Leçon 4Mettre en forme le projet
Leçon 5Petite conclusion

Chapitre 4 : Conclusion

02m18
 
Leçon 1Pour la prochaine fois
 

Chapitre 1 : Répéter, ajouter ou supprimer des éléments HTML

29m40
 
Leçon 1Afficher un élément
Leçon 2Afficher plusieurs éléments
Leçon 3Ajouter un élément aux éléments existants
Leçon 4Identifier un élément HTML

Chapitre 2 : Application

51m46
 
Leçon 1Ce que nous allons faire
Leçon 2Ecrire le fichier index.js
Leçon 3Ecrire le fichier index.css
Leçon 4Ecrire les bases du fichier Clients.js
Leçon 5Mettre en forme le module Clients
Leçon 6Déclarer et afficher la liste des clients
Leçon 7Mettre en place la suppression d'un client
Leçon 8Ecrire le formulaire de création d'un nouveau client
Leçon 9Ajouter un nouveau client

Chapitre 3 : Conclusion

03m05
 
Leçon 1Pour la prochaine fois
 
Leçon 1

Créer le fichier voitures.json

05m04
Leçon 2

Créer le fichier index.js

06m11
Leçon 3

Ecrire une promesse

09m06
Leçon 4

Lire et afficher les infos du JSON

04m51
Leçon 5

Afficher et mettre en forme toutes les datas du JSON

09m35
Leçon 6

Mettre en place la possibilité de suppression d'une section

07m14
Leçon 7

Programmer la fermeture de la section cliquée

05m14
Leçon 8

Pour la prochaine fois

01m37
 

Chapitre 1 : Mise en place des pages

37m03
 
Leçon 1Installer l'extension React Developer Tools
Leçon 2Créer un projet
Leçon 3Structure du projet
Leçon 4Lancer React à partir de Visual Studio Code
Leçon 5Créer le composant fonctionnel Rouge
Leçon 6Aperçu de nos composants dans React Developer Tools
Leçon 7Ajouter du CSS
Leçon 8Créer le composant fonctionnel Vert
Leçon 9Créer le composant fonctionnel Bleu
Leçon 10Créer la Nav

Chapitre 2 : Mise en place des liens

23m45
 
Leçon 1Suite du travail
Leçon 2Installer React Router
Leçon 3Importer BrowserRouter
Leçon 4Créer les routes
Leçon 5Créer les liens
Leçon 6Appliquer une classe aux liens
Leçon 7Définir le lien actif
Leçon 8Retour sur React Developer Tools

Chapitre 3 : Pour la prochaine fois

02m37
 
Leçon 1Pour la prochaine fois
 

Chapitre 1 : Les objets de formulaire

1h32
 
Leçon 1Mise en place du projet
Leçon 2Contrôler un champ de formulaire
Leçon 3Contrôler plusieurs champs de formulaire
Leçon 4Contrôler un textarea
Leçon 5Le menu déroulant
Leçon 6La case à cocher
Leçon 7Plusieurs cases à cocher
Leçon 8Les boutons radios
Leçon 9Champ de formulaire non contrôlé

Chapitre 2 : Exercice d'application

30m29
 
Leçon 1Mettre en place le fichier App.js
Leçon 2Mettre en place le formulaire HTML
Leçon 3Mettre en forme le formulaire
Leçon 4 Mettre en place le contrôle des champs par React

Chapitre 3 : Pour la prochaine fois

03m13
 
Leçon 1Pour la prochaine fois
 

Chapitre 1 : Créer la page d'accueil

11m48
 
Leçon 1Créer le projet react nommé exercice
Leçon 2Lancer React
Leçon 3Créer le composant fonctionnel ClientListe
Leçon 4Créer le fichier css clientListe
Leçon 5Relier tous les fichiers
Leçon 6On vérifie nos composants dans React Developper Tools

Chapitre 2 : Créer la navigation

32m35
 
Leçon 1Créer le composant de navigation
Leçon 2Importer la zone de navigation
Leçon 3Mettre en forme la zone de navigation
Leçon 4Installer la dépendance React Router Dom
Leçon 5Importer React Router Dom
Leçon 6Déclarer le composant AjouterClient
Leçon 7Importer le composant AjouterClient
Leçon 8Mettre en forme le composant AjouterClient
Leçon 9Déclarer les routes
Leçon 10Déclarer les liens
Leçon 11Mettre en forme les liens
Leçon 12Mettre en forme le lien actif
Leçon 13Inspecter le document

Chapitre 3 : Créer des clients

33m36
 
Leçon 1Créer un formulaire d'insertion
Leçon 2Mettre en forme le formulaire d'insertion
Leçon 3Mettre en place le hook useState
Leçon 4Garder les valeurs en mémoire
Leçon 5Créer un tableau de mémoire

Chapitre 4 : Afficher la liste des clients

16m42
 
Leçon 1Déclarer la mémoire dans le composant Parent
Leçon 2Afficher la liste des clients dans le composant ClientListe

Chapitre 5 : Fin de la série

01m21
 
Leçon 1Conclusion

Avis des apprenants

Détail des avis
3
Commentaires
4,7/5
Note moyenne
5/5
2
4/5
1
3/5
0
2/5
0
1/5
0
Cremasl
Cremasl
Publié le 20/11/2024
Bonjour, je reviens un peu en arrière mais cela me permet de mieux comprendre useEffect enfin je crois
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire
Florent Lefevre
Florent Lefevre
Publié le 22/02/2025
Bonjour, la formation est sympa et progressive. Bon pédagogue. Cependant, les explications sont longues à venir, beaucoup de dilution dans les propos... ce qui casse le rythme je trouve. Pour useEffect, il faudrait plus d'explications.
Mathieu St-Germain
Mathieu St-Germain
Publié le 25/05/2024
Tres bien expliqué merci beaucoup
Carl Brison
Carl Brison
Merci beaucoup ;-)

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Bonjour, Je participe à un Datathon de 1 mois, et l'objectif est de développer une application avec des données du service publique qui sont des open data. Je voulais savoir si votre formation me permettrait de développer un prototype d'application et si vous aviez des ressources dans le cours que je pourrais utiliser ? Je n'ai aucune connaissance informatique, mais je souhaite monter en compétence. Bien à vous, Duncan Lohner

Bonjour. Merci pour votre demande. Oui c'est tout à fait possible mais pour cela il faudra enchainer sur la formation nextJS qui vous permettra, par des exercices concrets, de pouvoir communiquer avec une api externe. Cependant vous risquez peut-être de passer quelques nuits blanches, si vous n'avez pas trop de compétences. Maintenant, rien n'est impossible et la fierté que l'on peut ressentir se fait par l'effort ! Je vous souhaite bon courage si vous vous lancez dans ce projet. En attendant, passez un bon week-end. Carl BRISON

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
228,99€ 159€
Promo -31%
Paiement unique, sans abonnement
Accès à vie à cette formation
12h43 de vidéo
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 752 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1420 tutos gratuits

Notre politique de protection des données