Formation React

Mise à jour : 2024
90 heures
Projets
Quiz

Devenez expert en React JS et créez des interfaces web dynamiques avec les meilleures librairies, comme Recoil et React Router, pour des applications web modernes et fluides.

4.9

850 avis

5 832

inscrits

Les notions abordées dans la formation

Maîtrisez JSX, indispensable pour utiliser React
Créez et validez des formulaires avec react-hook-form et Yup
Simulez plusieurs pages avec React Router
Explorez les nouvelles API de React qui utilisent les hooks
Apprenez les bases de React : les composants et les props
Gérez des requêtes Ajax vers des API avec Fetch
Gérez l'état de vos applications complexes avec Recoil
Déployez une application React en production
Créez des formulaires complexes avec react-hook-form
Réalisez un projet complet jusqu'à sa mise en production avec React

Qu'est-ce que React ?

Créé en 2013 par Facebook, React a été conçu pour résoudre les problèmes de performance des sites web de l'époque. C'est un framework léger et optimisé pour gérer un trafic très important. En 2024, React reste le framework le plus populaire en France et dans le monde, adopté par des géants tels que Facebook, Instagram, Airbnb, Netflix, Paypal, Uber, le New York Times, WhatsApp, et Leboncoin.

Le cœur de React JS se concentre sur la gestion réactive de la partie visuelle de vos applications. Pour compléter votre application, il est essentiel de maîtriser diverses librairies. L'écosystème de React, très riche en solutions open-source, vous permet d'intégrer les meilleures librairies disponibles, notamment Recoil et React Router.

Notre formation React JS est spécialement conçue pour vous fournir les compétences nécessaires à la création d'applications modernes, performantes et évolutives, adaptées aux besoins actuels du marché. Rejoignez-nous pour maîtriser le framework le plus utilisé au monde en 2024 et transformer vos projets web.

Les prérequis pour suivre cette formation

Des connaissance en HTML & CSS sont nécessaires.
Des connaissance en JavaScript sont nécessaires.

Obtenez un certificat de réussite

Pour chaque formation que vous accomplirez, vous obtiendrez une certification que vous pourrez partager sur Linkedin.

Projets réalisés pendant la formation

Nous mettrons en pratique toutes les fonctionnalités de React pour créer un moteur de recherche de recettes avec un gestionnaire de favoris. Nous utiliserons React-hook-form, Yup et Fetch, et d'autres librairies !

Plan de la formation

Afficher tout

Chapitre 1 : Introduction
6 leçons 01:42:07
- A l'abordage
- Qu'est-ce que React ?
- vite, swc et JSX
- Environnement Windows
- Environnement GNU/Linux
- Environnement MacOS
Chapitre 2 : Création d'une application React
5 leçons 01:54:20
- Utilisation de create-vite et structure d'une application React
- Comment fonctionne React ?
- createRoot, render et le JSX
- Le langage JSX
- Utilisation alternative de React
Chapitre 3 : Introduction aux composants
4 leçons 01:23:12
- Introduction aux composants
- Exporter et importer des composants
- Passer des props aux composants
- Passage de props et propriété children
Chapitre 4 : React, les styles, le CSS et Sass
4 leçons 00:57:30
- JSX et attribut style
- Utilisation de CSS avec React
- React et les modules CSS
- React et Sass
Chapitre 5 : Projet Cookchef - partie 1
6 leçons 03:10:31
- Initialisation du projet
- Mise en place des styles Sass de base
- Mise en page de l'application
- Mise en place du Header et du Footer
- Mise en place du contenu
- Mise en place des recettes
Chapitre 6 : Rendu conditionnel et liste
5 leçons 01:33:26
- Affichage avec les ternaires et AND
- Affichage avec les if et les variables
- Afficher des listes avec map
- Utilisation de filter, des clés et des fragments
- Introduction au chapitre et Emmet
Chapitre 7 : Rendre les composants réactifs
6 leçons 03:38:39
- Composants et fonctions purs
- Écouter des évènements
- Événements, composant et paramètres
- Présentation de useState()
- useState, batch et fonctions de mise à jour
- Exemple d'utilisation des évènements et de useState
Chapitre 8 : Projet Cookchef - partie 2
5 leçons 02:22:55
- Présentation des fonctionnalités et react devtools
- Ajouter des recettes dans une wishlist
- Rendre l'application responsive
- Ajouter une barre de menu
- Ajouter une barre de recherche
Chapitre 9 : Gestion d'état et communication des composants
12 leçons 06:30:35
- Introduction à la gestion d'état et aux communications des composants
- Communication d'un composant enfant vers un composant parent
- Communication d'un composant parent vers un composant enfant
- Valider et éditer une todo
- Implémentation de l'édition
- Selectionner une todo
- Présentation du hook useContext() et de createContext()
- Exemple d'utilisation du hook useContext()
- Présentation de useReducer()
- Exemple d'utilisation de useReducer()
- Architecture avec les hooks useContext() et useReducer()
- Amélioration de l'architecture
Chapitre 10 : Les hooks pour les références, les effets et les mémoïsations
10 leçons 04:10:39
- Introduction aux hooks useRef(), useEffect(), useMemo() et useCallback()
- Présentation du hook useRef()
- useRef() et le DOM
- useRef() et les composants
- Présentation du hook useEffect()
- useEffect() en détail
- Présentation de useLayoutEffect()
- Mise en cache d'un composant avec memo
- Mise en cache d'un calcul avec useMemo()
- Mise en cache d'une référence avec useCallback()
Chapitre 11 : Utilisation API REST et requêtes AJAX avec fetch
5 leçons 02:26:42
- Introduction aux requêtes AJAX
- Configuration d'une requête POST
- Configuration d'une requête GET et useEffect
- Configuration d'une requête PATCH
- Configuration d'une requête DELETE et useReducer
Chapitre 12 : Projet Cookchef - partie 3
5 leçons 02:24:01
- Présentation des fonctionnalités et refactorisation
- Seed des articles et gestion du chargement
- Chargement des articles et context
- Persister la wishlist
- Mise en place de la pagination
Chapitre 13 : Création de hooks personnalisés
4 leçons 00:59:20
- Qu'est ce qu'un hook personnalisé
- Extraction de logique avec un hook
- Utilisation d'un hook avec fetch
- Rendre un hook générique pour le réutiliser
Chapitre 14 : Gestion des formulaires avec react-hook-form et yup
8 leçons 04:12:21
- Introduction à la gestion des formulaires
- Création d'un formulaire et introduction à useForm()
- Les options de register() et de useForm()
- Validation avec Yup
- Utilisation de checkbox, radio et select et structure du formulaire
- Gestion de la soumission du formulaire
- trigger(), setFocus() et criteriaMode
- Gestion de champs dynamiques
Chapitre 15 : Projet Cookchef - partie 4
5 leçons 02:09:45
- Introduction aux fonctionnalités et refactorisation
- Utilisation d'un hook personnalisé
- Suppression d'une recette
- Mise en place du formulaire
- Ajouter une recette
Chapitre 16 : Introduction aux fonctionnalités concurrentes
3 leçons 00:50:05
- Introduction aux fonctionnalités concurrentes
- Le composant natif Suspense
- Suspense avancé, useTransition et startTransition
Chapitre 17 : La librairie React Router
14 leçons 05:40:43
- Introduction à la navigation et à React Router
- Aperçu du système de navigation de React Router
- Options index et caseSensitive et gestion des erreurs
- useMatch, Link et NavLink
- Les routes imbriquées
- Segments dynamiques et queryParams
- useNavigate, useLocation et scroll
- Introduction aux loaders et useLoaderData
- Loaders : chargement et gestion d'erreur
- Loaders : request, json et context
- Loaders : redirections et gardes
- Les actions
- React Router et chargement différé des composants
- Loaders asynchrones
Chapitre 18 : Projet Cookchef - partie 5
10 leçons 03:37:19
- Présentation des fonctionnalités
- Mise en place de React Router
- Refactorisation de la page d'accueil et du composant recette
- Création du dossier apis et refactorisation du hook data
- Mise en place des API
- Ossature du panel admin
- Barre de navigation du panel admin
- Liste des recettes du panel admin
- Suppression d'une recette et refactorisation du formulaire des recettes
- Édition d'une recette
Chapitre 19 : Authentification avec JWT
10 leçons 04:39:36
- Introduction au protocole JWT
- Mise en place de l'application et router
- Implémentation du formulaire d'inscription
- API - Création d'un utilisateur
- Mise en place du formulaire de connexion
- API - Création du token JWT et connexion
- Récupération de l'utilisateur et page de profil
- API - Extraction de l'utilisateur depuis le token JWT
- Gestion de l'utilisateur connecté
- Protéger une route et déconnexion
Chapitre 20 : Mise en production d'une application React
4 leçons 00:54:44
- Présentation de la mise en production
- Base du code pour la production
- Mise en place d'un serveur chez OVH
- Création d'un répertoire Github et lancement de l'application
Chapitre 21 : Test partie 1 - Jest
9 leçons 03:18:00
- Introduction aux tests
- Mise en place de l'environnement Jest avec Vite
- Les fonctions test() et expect()
- Les types jest, expect() et les matchers
- Les tests asynchrones
- Préparation et nettoyage
- Mocker des fonctions
- Mocker des modules
- Mocker des timers
Chapitre 22 : Test partie 2 - React Testing Library
8 leçons 02:06:58
- Introduction à React Testing Library
- Présentation de la fonction render()
- Présentation des méthodes getBy
- Les variantes du préfixe des requêtes
- Les actions asynchrones avec waitFor
- Gestion des évènements
- Cleanup, rerender et unmount
- Présentation des snapshots
Chapitre 23 : Test partie 3 - End-to-end avec Cypress
8 leçons 02:29:00
- Introduction aux tests e2e avec Cypress
- Présentation de Mocha et Chai
- Les sélections avec contains, get et findBy
- Les assertions avec should
- Les commandes parent-enfant évènement, trigger, wait, wrap, its et invoke
- Autres commandes filter, check, uncheck, log et select
- Les fixtures, intercept et alias
- Exemple de test avec l'édition d'une todo
Chapitre 24 : Gestion d'état avec Recoil
9 leçons 03:20:03
- A quoi sert Recoil ?
- Installation et mise en place de Recoil
- Récupération des todos avec useRecoilValue
- Mise à jour des todos avec useSetRecoilState
- Présentation et utilisation des sélecteurs
- Autre exemple de sélecteurs
- Présentation de selectorFamily
- Utilisation des effets
- L’initialisation asynchrone des atomes et sélecteurs asynchrones
Chapitre 25 : Projet Cookchef - partie 6
6 leçons 02:18:05
- Introduction aux fonctionnalités
- Mise en place de Recoil
- Refactorisation du panel admin avec Recoil
- Mise en place du composant Wishlist
- Implémentation de la wishlist
- Amélioration du header et application responsive
Chapitre 26 : Les animations avec React Transition Group
5 leçons 01:40:09
- Introduction à React Transition Group
- Présentation du composant CSSTransition
- Fonctions avancées du composant CSSTransition
- Animations alternées avec SwitchTransition
- Animations multiples avec TransitionGroup
Chapitre 27 : Utiliser TypeScript avec React
4 leçons 01:24:19
- À quoi sert TypeScript ?
- Installation et configuration de TypeScript
- Migrer Cookchef sur TypeScript partie 1
- Migrer Cookchef sur TypeScript partie 2

Également inclus dans cette formation

JSX

JSX est un langage qui a été spécialement créé pour React. Avec React tout est JavaScript, même les templates. JSX permet de remplacer le HTML par une syntaxe similaire mais qui permet une intégration avec le JavaScript optimale. Nous aborderons toutes les subtilités au début de la formation pour partir sur de bonne bases.
Recoil

Les applications front-end sont de en plus dynamiques et complexes. Avec Recoil, vous allez apprendre à dompter cette complexité en apprenant la notion de gestion d'état. Recoil est une librairie éprouvée et robuste qui s'intégrera parfaitement avec React.
React Router

Dans une application React, le système de routes se fait également avec une librairie externe. Nous vous apprendrons react-router qui est la plus connue et la plus utilisée pour mettre en place un système de routing complet sur vos applications.

Évaluations et avis sur la formation React

4.9

850 avis

Une formation React js en ligne exceptionnelle ! Chaque chapitre est structuré de manière à rendre les concepts clairs et faciles à comprendre, même pour les débutants. J'ai particulièrement apprécié les projets pratiques comme Cookchef qui m'ont permis d'appliquer directement ce que j'apprenais. C'est un must pour quiconque souhaite maîtriser React.
Lucas P.Étudiant(e) vérifié(e)
Après avoir suivi plusieurs formations en ligne, celle-ci sur React se distingue vraiment. Le formateur explique non seulement les bases, mais aussi les fonctionnalités avancées comme les hooks personnalisés et la gestion d'état complexe. Grâce à cette formation, je me sens prêt à développer des applications React performantes.
Sophie R.Étudiant(e) vérifié(e)
Cette formation React est extrêmement complète et bien organisée. Les leçons sur la gestion des formulaires avec react-hook-form et la création de hooks personnalisés étaient particulièrement utiles. Les exercices pratiques m'ont permis de renforcer mes compétences et d'acquérir une réelle expertise. Je recommande fortement à ceux qui veulent se perfectionner en React JS.
Antoine M.Étudiant(e) vérifié(e)

Ces entreprises offrent cette formation à leurs collaborateurs

Questions fréquemment posées sur la formation React

À quoi sert React ?

React est une bibliothèque JavaScript puissante conçue pour créer des interfaces utilisateur dynamiques et réactives. Elle permet de développer des applications web performantes en gérant efficacement l'affichage des composants en réponse aux changements d'état. React est la base de nombreuses applications modernes et est utilisé par des géants comme Facebook, Instagram, et Netflix pour gérer les interfaces utilisateur de manière réactive et scalable.

La formation est-elle accessible aux débutants ?

Oui, la formation est conçue pour être accessible aux débutants. Elle commence par les bases de React, y compris la mise en place de l'environnement de développement avec Vite, et progresse vers des concepts plus avancés comme la gestion de l'état, les hooks, et la communication entre composants. Seules des connaissances de base en JavaScript, HTML et CSS sont nécessaires pour suivre cette formation.

La formation est-elle en ligne ou en présentiel ?

La formation React est entièrement en ligne et peut être suivie à votre propre rythme. Vous avez la flexibilité d'apprendre où et quand vous le souhaitez, ce qui vous permet de concilier facilement vos études avec vos autres engagements. Chaque leçon est accompagnée de ressources pratiques et de projets concrets pour vous permettre d'appliquer immédiatement ce que vous apprenez.

Quelles compétences vais-je acquérir grâce à cette formation en ligne ?

Utilisation de React avec JSX pour créer des interfaces utilisateur réactives.
Création et gestion de composants réutilisables en React.
Gestion de l'état avec des hooks comme useState et useEffect pour des applications dynamiques.
Intégration de styles avec CSS, Sass et modules CSS dans une application React.
Développement d'applications React complètes jusqu'à leur mise en production sécurisée.

La formation est-elle à jour de la dernière version de React ?

Oui, la formation est régulièrement mise à jour pour inclure les dernières fonctionnalités de React, y compris celles introduites dans les versions récentes de la bibliothèque. Vous apprendrez à utiliser les dernières syntaxes et les meilleures pratiques de développement en React, telles que les hooks, la gestion des états complexes avec Recoil, et les fonctionnalités concurrentes.

Y a-t-il des travaux pratiques dans la formation ?

Oui, la formation inclut de nombreux travaux pratiques pour consolider vos compétences. Vous travaillerez sur plusieurs projets, dont le projet Cookchef, où vous développerez une application complète de gestion de recettes. Vous apprendrez également à manipuler des API REST, à gérer l'état des composants, et à rendre votre application réactive et responsive, ce qui vous prépare à des scénarios réels en développement web.

Comment cette formation m'aidera-t-elle dans ma carrière ?

Maîtriser React vous ouvrira de nombreuses opportunités professionnelles en tant que développeur front-end ou full-stack. React est l'une des compétences les plus demandées dans le développement web aujourd'hui. Cette formation vous permettra également d'acquérir des connaissances essentielles qui vous prépareront à travailler avec des frameworks et bibliothèques connexes, comme Next.js pour le rendu côté serveur ou Recoil pour la gestion d'état avancée.

Le contenu de la formation est-il suffisant pour un projet complet ?

Absolument, la formation React est conçue pour vous guider étape par étape dans la création d'applications web dynamiques et performantes en utilisant React JS. Vous apprendrez à construire des interfaces utilisateur réactives avec React, en utilisant des outils modernes comme React Router pour la navigation, et des hooks pour gérer l'état de manière efficace. Les cours incluent des projets pratiques où vous développerez des applications React complètes, en intégrant des pratiques de développement avancées comme l'utilisation de Recoil (remplaçant de Redux) pour la gestion d'état globale. Grâce à cette formation, vous serez équipé pour le développement d'applications modernes, en suivant les meilleures pratiques.