- Durée
- 3 jours
- Niveau
- Intermédiaire
- Modalités
- Présentiel / Distanciel
Description de la formation React
React est une bibliothèque JavaScript développée par Facebook pour créer des interfaces utilisateur interactives et dynamiques. Dans les documentations plus anciennes on l’appelle ReactJS pour clarifier que l’on parle d’une technologie JavaScript mais React est le terme le plus courant et celui de la documentation officielle. Elle permet de construire des applications web modernes en facilitant la gestion des états et le rendu de composants indépendants et réutilisables. React est devenu un outil incontournable pour les développeurs front-end.
Cette formation vous apportera les bases essentielles de React, vous guidant de la prise en main de la bibliothèque à la création d'applications interactives. À travers une combinaison équilibrée de théorie et de pratique, vous serez en mesure de maîtriser les concepts fondamentaux de React et de les mettre en œuvre.
Objectifs pédagogiques
Concrètement, à l'issue de cette formation React, vous aurez acquis les connaissances et compétences nécessaires pour :
- Comprendre les concepts clés de ReactJS et ses spécificités
- Créer des composants fonctionnels
- Maîtriser la syntaxe JSX
- Utiliser Flux et gérer les bugs
Objectifs opérationnels
Savoir développer des interfaces utilisateurs avec React.
Programme
Contenu du cours, module par module
9 modules
Révisions ES6
- Déclaration de variables (const, let).
- Différence entre programmation déclarative et impérative.
- Utilisation des fonctions fléchées.
- Spread operator, rest et destructuration.
- Gestion des types primitifs et références.
- Introduction à l'asynchronisme avec async/await.
- Les limites de JavaScript dans le développement d’interfaces utilisateur.
- Historique et philosophie de React.
- Le Virtual DOM : définition et avantages.
- JSX : syntaxe et intégration du HTML dans JavaScript.
- Initialiser un projet React.
Travaux pratiques
Description : Initialisation d’un projet React avec Create React App ou Vite, et création de premiers composants simples utilisant JSX.
Les composants React
- Création et définition de composants.
- Cycle de vie d’un composant.
- Création de composants réutilisables.
- Utilisation des props pour passer des données entre composants.
- Gestion des listes et affichage conditionnel.
- Styliser les composants avec CSS, Tailwind, CSS-in-JS, et Modules.
Travaux pratiques
Description : Développement de composants utilisant les props, la gestion de listes, l'affichage conditionnel et différents styles.
- Comprendre l’importance du state et ses différences avec les props.
- Gestion des événements et interactions utilisateurs.
- Gestion des formulaires et validation.
- Utilisation de React DevTools pour déboguer les composants.
- Introduction à Redux (Flux).
Travaux pratiques
Description : Création d’une Todo List interactive avec ajout, modification et suppression de tâches via un formulaire.
- Introduction aux hooks React.
- Utilisation de useEffect pour gérer les effets de bord.
- Appels API avec useEffect.
- Création de hooks personnalisés pour réutiliser la logique entre composants.
- Introduction à des librairies comme TanStack Query et SWR pour la gestion des données asynchrones.
Travaux pratiques
Description : Conception d’un catalogue de films en utilisant TanStack Query.
Gestion du Routing dans React
- Gestion manuelle du routing et ses limitations.
- Introduction à React Router : création de routes et navigation.
- Navigation côté client avec le composant Link.
- Pages dynamiques et layouts
Travaux pratiques
Description : Création d’un blog minimaliste où chaque page représente un voyage, avec navigation dynamique entre les pages.
- Utilisation de useReducer pour la gestion d'état local.
- Comprendre et utiliser le Context API pour éviter le "props drilling".
- Introduction à Redux et Zustand pour la gestion du state global.
Travaux pratiques
Description : Conception d’une mini application e-commerce avec panier d’achat et bascule de thème (clair/sombre) via Redux ou Zustand.
- Différences entre les types de tests (unitaires, fonctionnels, end-to-end)
- Introduction à Jest
- React Testing Library avec Jest
- Tests de composants et hooks
- Introduction à Cypress
- Tests end-to-end avec Cypress
Travaux pratiques
Description : Tester les composants de la Todo List avec Jest et React Testing Library.
- Choisir un framework React adapté à la production : Next.js, React Router (framework) et Tanstack Start
- Introduction à Next.js : optimisation des images, routing, Server-Side Rendering (SSR).
- Analyse des différents frameworks pour choisir le plus adapté à vos besoins
Programme mis à jour le 11/12/2025
Public concerné
Ce cours s’adresse aux développeurs (principalement JavaScript) recherchant comment faciliter la création d’une application web monopage tout en maintenant un niveau élevé de flexibilité et de performances. Les développeurs concernés possèdent du recul et de l’expérience sur le langage JavaScript et son environnement et sont sensibles au motif d’architecture logicielle MVC.
La formation intéressera également les architectes et chefs de projet web en cours de réflexion sur les types d’architectures possibles pour développer une nouvelle application ou souhaitant prioriser les problématiques de référencement, vitesse mobile et tout autre indicateur de positionnement web à l’aide de la haute performance de React JS.
Prérequis
Les participants à cette formation possèdent obligatoirement de solides connaissances des technologiques web (HTML, CSS) et de JavaScript validées à travers le développement de projets web préalables. Ils sont également sensibilisés à la problématique de performance, au cœur de cette formation.
Des notions d’architecture logicielle modérées à avancées leurs permettront de mieux comprendre la complémentarité des différentes bibliothèques JavaScript ainsi que l’adéquation entre React JS et d’autres frameworks entrant en consonance (Vue ou AngularJS par exemple).
J’évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant le test de prérequis.
Faire le testFinancement
Cette formation peut être prise en charge par votre entreprise, seule ou avec l’appui de son opérateur de compétences. Nous fournissons le devis et les pièces attendues par l’OPCO.
4,6/5
121 avis
« Mon avis sur le contenu du stage : "J'ai beaucoup apprecie le documentation des concepts principale et pour les exercices" Mon avis sur le formateur : "C'etait sympa de voir les examples et le maniere dont Matthieu a chercher les infos lui meme dans son site de formation et dans les docs officiels, et comment il a utiliser VS Code et les astuces de programmation. Pour plus d'engagement Matthieu aurais pu mettre sa camera meme si j'ai aussi apprecie de pouvoir reflechir de mon cote. " Ce que j'ai le plus apprécié : "Pouvoir observer la maniere que Matthieu code, pose des questions, consulte le doc, et test les resultats. " Ce que j'ai le moins apprécié : "10 personnes dans le salle virtuelle sans possibilite d'interagir individuellement, ne permet pas de gerer les personnes avec les niveaux differents. Je savais que le cours n'aller pas etre a mon niveau parce que je ne pratique pas le code JS au quotidienne, mais j'ai quand meme appris des choses en cherchant les definitions en en essayant des choses a peu different du cursus. " »
MJCIE IBM FRANCE « Mon avis sur le contenu du stage : "La librairie React ayant beaucoup évolué ces derniers temps, et n'ayant eu aucune formation/connaissance de cette technologie en amont de la formation, cette dernière aurait mérité d'être allongée, par exemple à 5 jours, afin de bien mettre en opposition l'avant/après React 16.8 (je pense notamment à la confrontation Redux/Context API). Autrement, et même si le niveau et le rythme sont soutenus, avec un baggage technique décent, la formation reste abordable, et est très enrichissante et permet d'avoir les bonnes bases pour évoluer dans la bonne direction par la suite." Mon avis sur le formateur : "RAS, vraiment un plaisir d'avoir pu côtoyer les 2 animateurs rencontrés lors de la formation, aussi bien d'un point de vue expertise que d'un point de vue humain. TOP!" Mon avis sur la salle de formation : "RAS" Ce que j'ai le plus apprécié : "Le cadre, les locaux, les goodies (café, fruit, encas, etc...)" Ce que j'ai le moins apprécié : "RAS" »
KA « Mon avis sur le contenu du stage : "Je pense qu'une journée supplémentaire nous aurait permis de voir plus en détail la fin de la formation. Concernant ce que nous avons pu apprendre, ce fut fort agréable." Mon avis sur le formateur : "L'animateur maîtrise le sujet. Si un souci arrive, l'animateur sait le résoudre, et auquel cas il n'y arrive pas, il y travaille pendant une pause et revient sur le sujet par la suite pour ne pas perdre trop de temps durant la formation." Ce que j'ai le plus apprécié : "Disponibilité de l'animateur et sa pédagogie" Ce que j'ai le moins apprécié : "Comme précisé plus haut, le manque de temps pour la fin de la formation" »
LA
Les avis figurant ci-dessus sont issus des fiches d’évaluation que remplissent les participants à la fin de la formation. Ils sont ensuite publiés automatiquement si les personnes ont explicitement accepté que nous les diffusions.
Formations liées
- React Native : Développer une application mobile native multi-plateformesRéf. REAN3 joursIntermédiaireProchaine session : 30 nov.2 090 €
- React Native AvancéeRéf. RENA2 joursAvancéProchaine session : 22 oct.1 590 €
- RemotionRéf. REMO2 joursIntermédiaireProchaine session : 12 oct.1 590 €
- Spring Boot et Angular : Développer des applications Web avec Spring Boot et AngularRéf. JDSA3 joursIntermédiaireProchaine session : 19 oct.2 090 €