React avancé
Organised by :
Training partners :
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
What are the aims of the training?
→ 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
What do you need to know to follow the training?
Connaissances préalables de Javascript.
Avoir suivi une formation de base sur React ou disposer d’une expérience équivalente
Training programme
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