Formation React
| 2400€ HT / personne |
| 4 jours (28 heures) |
Présentation
Avec notre formation React, maîtriser pleinement le Web afin de maximiser l’expérience de vos utilisateurs et améliorer la fluidité et la qualité de vos Web Apps.
Grâce à la formation React, vous apprendrez comme exploité l’une des bibliothèques JavaScript les plus utilisées par les développeurs du monde entier. Des concepts de base comme ES6, ESNext, ou encore le DOM virtuel, jusqu’à Reactjs et ses composants : cette formation vous aidera à maîtriser React.
Apprenez à optimiser vos produits digitaux grâce à la mémoïsation et la notion de pureté, vous saurez également gérer l’authentification, ainsi que les contextes.
Notre formation React vous permettra en outre de créer efficacement des Web Apps modernes, notamment grâce aux bonnes pratiques de testing et de debugging.
Comme tous nos programmes, notre cours porte sur la toute dernière version en date de cette librairie à savoir ReactJS 19.
Objectifs
- Maîtriser les fonctionnalités de la dernière version de React, la technologie JavaScript de Meta
- Développer des applications web avec React
- Créer des composants web complexes rapidement
- Application SinglePage avec React.JS et TypeScript
- Optimiser les performances d’une application React
- Utiliser Redux pour la gestion d’état
Public visé
- Développeurs web
- Lead Developer
Pré-requis
- Connaissance de base en HTML / CSS / JS
Pré-requis logiciel
- Machine
- Au minimum 8 Go de RAM (16 Go recommandés)
- Windows 11, MacOS ou Linux
- La dernière version de React installée
- Un IDE tel que Visual Studio Code
Programme de notre formation React
Introduction
- Rappels, de ES6 à ESNext
- JavaScript, DOM et VirtualDOM
- Limitations des applications JavaScript
- Écosystème des frameworks web JavaScript modernes
- La nouvelle vision de ReactJS
- Environnement de développement : IDE, outils et plug-ins
Présentation de ReactJS
- Virtual Dom, un choix de performance
- Create-react-app VS Vite
- Composants à état, fonction de rendu simple, performance
- JavaScript ou JSX
- Comprendre le JSX
- Création de composants de vue
- Initialisation des props
- Comprendre le passage de props
- Lifting up state – intérêts et inconvénients
- React et CSS: css-in-js, modules CSS ou styled-component et portée du style
ESNEXT, ES2015 et TypeScript
- TypeScript: Création et configuration avec ESLint (TSLint)
- Conserver les mêmes normes et qualités de code au sein du projet
- Mise en place de husky et lint-staged
Composants
- Fragments
- Découper une application par composants
- Props VS state
- Component Data Flow : circulation des informations entre composants
- Composants réutilisables : contrôle et transfert de propriété
- Contrôle des composants de formulaire : solution propriétaire ou utilisation de librairies (Formik, react-hook-form)
- Validation de formulaire avec yup
- Manipulation du DOM
- Portals
Hooks
- useState
- useEffect – comprendre le cycle de vie et les désabonnements
- useLayoutEffect
- useReducer
- Séparer la logique d’un composant pour augmenter sa réutilisation
- Création d’un customHook
- useRef
Optimisation des performances
- Comprendre la mémoïsation et la notion de pureté
- useCallback
- useMemo
- React Memo
- Suspense, dans la partie Composants
- Server Components, dans la partie Composants
- useTransition, dans la partie Hooks
- useDeferredValue, dans la partie Optimisation des performances
NOUVEAUTÉS DE REACT 19
- Prise en charge des balises HTML de métadonnées
- Prise en charge des <link> de feuilles de styles
- <Context> en tant que provider
- Prise en charge des <scripts> async
- Amélioration du Compilateur React
- Composants Serveur (Server Components)
- Actions
- Intégration des Web Components
- Chargement des Ressources (Asset Loading)
- Nouveaux Hooks : use(), useFormStatus(), useActionState() et useOptimistic()
- Passage de ref en tant que Prop
ROUTING AVEC REACT ROUTER
- Principe d’une SPA
- Installation de react-router (v7)
- Création des routes
- Configuration et organisation des routes
- Les différents modes de navigation
- Redirection et Historique
- Page 404
- Data Fetching avec React-Router
- mise à jour de v6 à v7, flag v7_startTransition, imports react-router et react-router/dom
Authentification
- Route Privée et Redirection
- Création d’un layout selon le rôle utilisateur
- Persistance d’un token via la création d’un customHook
REACT CONTEXT
- Définition et cas d’utilisation
- Création de plusieurs contextes
- Utilisation des différents contextes
LIBRAIRIES DE COMPOSANTS
- Utilisation d’une librairie SemanticUI/MaterialUI/AntDesign/React-Bootstrap
- Comment utiliser une librairie sans créer de dette technique ?
Animation
- React Transition Group
- Animations et Transitions
Internationalisation
- Intégration du i18n avec React-intl (la librairie la plus populaire pour la gestion des langues)
REDUX
- Comprendre Redux
- Installer redux-toolkit
- Les actions, creators et dispatchers
- Utilisation des providers et de l’injection des composants pour organiser un Store
- DataFetching avec RTK Query
- Intégration de redux à notre projet
- Redux VS Context ? Quand utiliser lequel ?
Pourquoi choisir React ?
Si vous souhaitez en savoir davantage sur cette technologie, vous pouvez consulter nos articles sur React.
La formation est-elle dispensée en présentiel ou à distance ?
Cette formation se déroule en présentiel ou en distanciel.
Comment puis-je financer cette formation ?
Contactez-nous pour trouver une solution de financement sur mesure ! Nous vous aiderons à choisir parmi les options suivantes :
- OPCO (opérateurs de compétences) de votre entreprise
- Le plan de développement des compétences
- Les actions collectives pour les formations Big Data
- Le dispositif FNE-Formation
- Dispositif TPE / PME
- Pôle Emploi
- L’AIF (Aide Individuelle à la Formation pour les demandeurs d’emploi)
- L’ARE (Allocation chômage d’aide au retour à l’emploi)
- Le dispositif CPF (MonCompteformation)
- Contrat cadre
Qu'est-ce que le CPF ?
Le Compte Personnel de Formation est un dispositif régi par l’état français pour permettre aux salariés de disposer d’un financement mobilisable uniquement pour la formation.
Sur votre compte “Moncompteformation”, vous pouvez recevoir jusqu’à 500 euros par an cumulable. Les avantages qu’offre le CPF :
- Une formation finançable jusqu’à 100%
- Une formation de qualité approuvée par l’instance gouvernementale France Compétences
- L’obtention d’une certification délivrée par France Compétences
Pour aller plus loin
Formation React Avancé
Formation React Native
Formation ReactXP
Formation Angular Avancé
Formation Angular
Formation Vue.js
Autour du sujet
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Nos Formateurs Référents
Sydney
Alexandre
Témoignages
Les + : Le formateur est vraiment pédagogue, j’ai beaucoup aimé les échanges qui m’ont permis de mieux apprendre et comprendre les concepts que je n’avais pas saisis dans React. j’ai beaucoup apprécié le programme présenté pour React.
Les – : Elle est trop courte.
Je souhaite suivre : Next.Js et une sur l’IA
Afficher tous les témoignages
Les + : Le formateur est vraiment pédagogue, j’ai beaucoup aimé les échanges qui m’ont permis de mieux apprendre et comprendre les concepts que je n’avais pas saisis dans React. j’ai beaucoup apprécié le programme présenté pour React.
Les – : Elle est trop courte.
Je souhaite suivre : Next.Js et une sur l’IA
Les + : Projet fil rouge, pédagogie
Les – : On a mis du temps à trouver le chauffage 🙂
Je souhaite suivre : Vue
Les + : Technicité
Les – : rapide
Je recommande la formation
Je recommande la formation
Les + : Beaucoup de pratique,
Autonomie.
Les – : Organisation de la pratique:
Le fait de passer d’un chapitre à l’autre sur la même solution (même code) écrase les acquis de la veille.
Je souhaite suivre : Angular!
En synthèse : Locaux très sympas.
Les + : Le temps dédié à la pratique, indispensable pour maitriser les différentes concepts de React.
Les – : beaucoup trop de choses à voir dans le temps donné, on ne peut pas tout maitriser. React demande beaucoup de pratique avant de pouvoir maitriser chaque concept.
Je souhaite suivre : il y’a quoi comme formation ?
Des formations en conception logiciel, et des formations en management.
En synthèse : Chaque concept de React prends du temps à être maitrisé et nécessiterai 2 cas d’exercice chacun.
Les + : Tour d’horizon sur React.
Les – : Trop de trucs à voir en pas assez de temps, certains points sans TP, du coup ca reste abstrait.
Je souhaite suivre : Pas d’avis
Les + : Programme complet et très bien fait.
Les – : Pas eu le temps de tout mettre en pratique. Un jour de plus aurait été nécessaire.
Je souhaite suivre : Je ne sais pas, je n’ai pas regardé les autres formations disponibles.
Les + : Cohérence entre pratique et théorie
Les + : Bonne présence et accompagnement du formateur
Les – : Manque d’exemple théorique
Je souhaite suivre : non
Je recommande la formation
Noter la formation
| 2400€ HT / personne |
| 4 jours (28 heures) |
UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?
Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.
ILS SE SONT FORMÉS CHEZ NOUS
