Formation React à la carte | Modules complémentaires
Prochaines dates
Modalités d’accès :
- en Intra – compter 8 semaines de délai (nous consulter)
8 au 12 Janvier 2024 – Inscrivez-vous vite
Objectifs
Maîtriser les outils nécessaires à la mise en œuvre d’une application React
Encapsuler et réutiliser son code grâce à des hooks personnalisés
Maîtriser l’interfaçage avec des API externes
Maîtriser les techniques de flux unidirectionnel avec Redux
Adopter une stratégie de tests unitaires
Partager du code avec d’autres projets React
Optimiser le référencement SEO avec Next.js 13
Public
Développeurs et architectes web
Prérequis
Pratique d’HTML, CSS et Javascript
Méthodes pédagogiques
50 % théorie / 50 % pratique
Description
React s’impose aujourd’hui comme l’une des principales librairies pour la création d’applications riches, rapides et agréables à développer.
Elle a su innover en apportant une approche « hiérarchie de composants » permettant la réutilisation de briques logicielles facilement.
Elle offre la richesse de pouvoir composer son propre framework sur-mesure (système de routing, gestion des requêtes Http, gestion d’état applicatif par flux unidirectionnel, outillage de tests unitaires) ou d’en utiliser un comme Next.js.
Nous aborderons durant ces 5 jours les concepts clés autour de React, à travers la réalisation d’une Single Page Application complète.
Programme
Concepts
- Architecture de React
- JSX
- Hiérarchie de composants
- ES Modules
- Virtual DOM
Outils
- Transpilage du code avec Babel
- Gestion des dépendances avec NPM
- Gestion des ressources statiques avec les bundlers
Les composants
- Création d’un composant
- Rappels sur les fonctions JavaScript
- Passage de paramètres avec Props
- Composition, projection et interpolation de contenu
- Rappels sur les tableaux JavaScript
- Cycle de vie d’un composant
- Gestion d’état d’un composant
- Gestion des événements
- Gestion du style CSS
Hooks
- Gestion des hooks
- Création de hooks personnalisés
Formulaires
- Composants contrôlés
- Composants non contrôlés
- Gestion des formulaires avec React-hook-form
- Gestion des formulaires avec Formik
- Validation avec Yup
Flux unidirectionnel REDUX
- Présentation du modèle « machine à état » avec useReducer
- Mise à disposition dans un context
- Présentation de l’architecture REDUX
- Présentation de REDUX-TOOLKIT
Gestion des données externes avec REACT-QUERY
- Création de requête
- Gestion de la mise en cache
- Mutations et invalidation du cache
- Requêtes infinies
Router avec REACT-ROUTER
- Définir ses routes et sous-routes
- Méthodes de redirection
- Pré-chargement de données
- Gestion des actions
- Gestion de l’état de navigation
- Affichage d’interface de transition
Adopter une stratégie de tests avec react-testing-library et cypress
- Jest et langage d’assertion
- Jest et mocks
- Manipulation du JSX avec react-testing-library
- Tests de bout en bout avec Cypress
Industrialiser ses développements avec Typescript
- Typage des variables et des fonctions
- Types complexes et union
- Programmation orientée objet
Optimiser le SEO avec Next.js 13
- Améliorer le temps d’accès aux pages grâce au rendu côté serveur (SSR)
- Générer des pages statiques
- Gestion de la disposition des pages
- Gestion des erreurs contextuelles
Évaluation
Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de quizz, mises en situation, travaux pratiques…
En fin de formation, il est également demandé aux participants de mesurer leur satisfaction vis-à-vis de de la formation suivie.
Néosoft Training dispose d’un processus qualité qui prend en considération les éventuels dysfonctionnements rencontrés par les participants afin d’être proactif quant à la solution corrective adaptée tant sur le contenu de la formation elle-même que les conditions de son déroulement.
Accès
-
Métro
Bibliothèque François Mitterand
Quai de la Gare
-
RER
Bibliothèque François Mitterand
-
Bus
Pont de Tolbiac
François Mitterand
-
Tramway
Avenue de France
-
Adresse
- 3 rue de Tolbiac 75013 Paris