Formation React : Développez des Applications Web Performantes
| 2400€ HT / personne |
| 4 jours (28 heures) |
Présentation
Avec notre formation React, l’une des plus complètes du marché, vous découvrirez comment exploiter pleinement cette technologie Web afin d’optimiser l’expérience de vos utilisateurs et améliorer la fluidité et la qualité de vos Web Apps.
En effet, cette bibliothèque JavaScript est l’une des plus utilisées par les développeurs et l’une des plus performantes. Lors de notre cours, vous allez apprendre à exploiter tout le potentiel de cette librairie open-source soutenue par Facebook et développée par les meilleurs ingénieurs de la planète.
Dans un premier temps, notre formation abordera les concepts de base à savoir : ES6, ESNext, le DOM Virtuel ou encore les limitations des applications JavaScript. Par la suite, vous découvrirez Reactjs et ces composants.
Vous saurez 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 18.
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é 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
NOUVEAUTÉS DE REACT 18 & 17
- useId
- useTransition
- useDeferredValue
- Suspense API
- Lazy loading et code splitting
- Transition facilitée pour les mises à jour futures de React
- Modifications des événements pour mieux supporter les applications hybrides React
- Suppression de certaines API obsolètes
- React Concurrent Mode : composants en parallèle pour améliorer les performances
- React Server Components, permettant un rendu côté serveur avec interaction côté client
- Mise à jour progressive : qui permet aux développeurs de définir des priorités pour les mises à jour de l’interface utilisateur.
- Outils de débogage améliorés
- Meilleure prise en charge de Suspense pour la gestion des chargements de données
ROUTING AVEC REACT ROUTER
- Principe d’une SPA
- Installation de react-router-dom (v6)
- 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
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 ?
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 ?
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 + : Une vue importante de Reactjs et des librairies
Les – : Beaucoup de concept en peu de temps.
Afficher tous les témoignages
Les + : Une vue importante de Reactjs et des librairies
Les – : Beaucoup de concept en peu de temps.
Les + : Explications clair de chaque élément qui compose React ainsi que de ses possibilités.
Les – : La formation aurait mérité un jour de plus pour bien prendre le temps sur des points plus complexe
En synthèse : Très satisfait par cette formation et très bien accueillie par la société Ambient ainsi que le formateur.
Merci pour ces 3 jours
Les + : le formateur
Je souhaite suivre : reactjs avancé
En synthèse : merci à vous !
Je recommande la formation
Les – : une courte durée
Je souhaite suivre : Angular
Je recommande la formation
Les – : La formation est trop courte pour son contenu. Une journée de plus (au moins ) serait un vrai bénéfice pour pouvoirrendre le rythme soutenable et s’occuper de tous les sujets prévus de manière sereine :).
Les + : Le formateur est à l’écoute, il est concis. Il a réponse à tout !
Les – : 3 jours c’est léger pour appréhender facilement toute la complexité de l’outil
Les + : Exercices très complets
Les – : le temps
Les + : Le formateur est pédagogue
Les – : La durée (trop courte) de la formation n’est pas adapté au contenu.
Les + : Formation très complète, formateur très compétent
Les – : Trop complète : pas assez de temps pour digérer les informations présentées (peut-etre en raison de mon niveau débutant en front/javascript), 1 jour de formation supplémentaire aurait été bien utile pour mieux assimiler le volume total (ou bien en présenter un peu moins en 3 jours ? )
Je souhaite suivre : NodeJS, Docker
En synthèse : Si possible pouvoir télécharger le support de formation (j’ai l’impression qu’il n’y a que la version web)
Les + : Alterner très régulièrement entre théorie et pratique est la meilleure méthode, je pense (je rajouterai encore plus de parties pratiques même sur des choses très simples).
Les – : Je ne sais pas si cette formation est conseillée pour des étudiants débutants (2ans d’exp) mais je trouve la durée plutôt courte pour intégrer des concepts parfois un peu complexes.
Noter la formation
| 2400€ HT / personne |
| 4 jours (28 heures) |
