Public visé
Développeurs ayant à réaliser des applications Web.
Prérequis
- Avoir une très bonne connaissance de JavaScript et de ses aspects avancés
Objectifs pédagogiques
À l’issue de cette formation, vous serez capable de :
- Maîtriser la syntaxe et les fonctionnalités ES6
- Expliquer les principes du framework ReactJS
- Décrire la syntaxe JSX et les fondamentaux des composants
- Implémenter la navigation avec react-router-dom
- Appliquer les Hooks efficacement
- Gérer les événements et le rendu conditionnel
- Conceptualiser la gestion d’état Redux
Programme
Jour 1 - Matin : Introduction et ES6
ES6 et outils
- Outils de dev, IDE, React DevTools, npm, bundlers, Babel
- Syntaxe ES6+
ReactJS
- Principes, comparaison Vue/Angular
- Philosophie composants, Virtual DOM, Vite
JSX et Composants
- Éléments React, createRoot (React 18)
- Syntaxe JSX, composants fonctionnels avec Hooks, imbrication
Jour 1 - Après-midi : Props, routage et Hooks
Props
- Définition, transmission de données, props.children
Routage
- SPA avec react-router-dom v6, routes, liens, paramètres URL
Hooks
- useState, useEffect, règles des Hooks, Hooks personnalisés
Jour 2 - Matin : Événements et listes
Événements JSX
- Gestion d’événements, contenu conditionnel
Listes et raccourcis
- Gestion des clés, Virtual DOM, Fragments
- Composants contrôlés, formulaires, refs
Jour 2 - Après-midi : State Management
Redux
- Immutabilité, actions, reducers, store
- react-redux, Provider, Redux/Zustand
- useSelector, useDispatch
Jour 3 - Matin : Tests et React Native
Tests unitaires
- Jest, React Testing Library
React Native et Expo
Jour 3 - Après-midi : SSR et bonnes pratiques
Rendu côté serveur (SSR)
- Principes, avantages et contraintes
- Ateliers de revue de code bonnes pratiques
Modalités d’évaluation des acquis
- En cours de formation, par des travaux pratiques
- Et, en fin de formation, par un questionnaire d’auto-évaluation