React avancé
Organisé par :
Partenaires de la formation :
Description
Affiner ses compétences React pour développer des interfaces
utilisateur avancées et performantes.
cette formation s'adresse aux développeurs React intermédiaires.
Les contenus techniques vus au cours de cette formation sont:
→ concepts avancés de React
→ Optimisation des performances
et gestion des données
→ Applications monopages, isomorphiques et routage
Quels sont les buts de la formation ?
→ Approfondir leur compréhension de la bibliothèque
React
→ Explorer des concepts avancés tels que JSX et et ES2015+
→ Maîtriser l'architecture "One Way data flow" et ses implications
pour la gestion des données
→ Optimiser les performances des applications React
en utilisant la notion d'immutabilité
→ Comprendre les différentes approches pour styliser
les composants React
→ Mettre en oeuvre des fonctionnalités avancées
telles que la gestion d'Ajax et des formulaires
→ Apprendre à créer des applications monopages
et isomorphiques avec ReactJS et Next.js
Que devez vous connaître pour suivre la formation ?
Connaissances préalables de Javascript.
Avoir suivi une formation de base sur React ou disposer d’une expérience équivalente
Programme de la formation
FONDAMENTAUX DE REACT JS
↘ Introduction à React JS
• Philosophie de React
• Comparaison avec d'autres Frameworks JavaScript
• Mise en place de l'environnement de développement et des outils de debug
↘ Nouveautés ECMAScript
• Présentation d'ECMAScript
• Les nouveautés ES2015+
• Introduction aux fonctions "async" d'ES2017
↘ Approfondissement des Composants React
• Les composants fonctionnels et de classe
• Utilisation des Hooks dans les composants fonctionnels
• Composition de multiples composants
• Cycle de vie d'un composant de classe
• Interaction de l'utiliateur avec les composants
• Manipulation du DOM virtuel
• Ajouter du Typage sur les composants React avec TypeScript
OPTIMISATION DES PERFORMANCES
ET GESTION DES DONNÉES
↘ Stylisation des Composants React
• Différentes approches pour styliser un composant
• Présentation de bibliothèques de style (styled-components, Emotion)
• Présentation de bibliothèques de composant (Material UI, React Bootstrap, Mantine)
•
↘ Gestion centralisée des données
• Présentation des différentes technologies de gestion (Redux, MobX, context, Recoil, etc...)
• Présentation du fonctionnement du store de Redux
• Rôle du « Dispatcher » du Store, du Reducer et des Actions
APPLICATIONS MONOPAGES, ISOMORPHIQUES ET ROUTAGE
• Applications Monopages avec React JS
○ Mise en place de Redux avec React
○ Création des Reducers, des Actions
○ Architectures « One way data flow » avec Redux
○ Utilisation du « Redux Toolkit »
• Le routage des applications React
○ Présentation des différents librairies de Routage
○ Mise en place du routing avec React-Router
○ Conséquences du routage sur le déploiement
• Développement isomorphique
○ Présentation des différents framework React (Next.js, Remix, Gatsby)
○ Objectif du développement isomorphique ○ Introduction au Framework Next.js
○ Next.js : App Router vs Pages Router
EXERCICES PRATIQUES
● Mise en place d'un environnement de développement
● Réalisation d'un générateur de formulaires en JSX
● Création d'un ensemble de composants UI
● Manipulation des stores de données avec Redux ou d'autres technologies de gestion