Web

5$/h – React JS – Avancé

Objectifs:

Ce cours avancé en React JS approfondit les compétences des développeuses et développeurs dans l’utilisation des Hooks, la gestion d’état avec Redux, l’intégration d’API externes et les design patterns essentiels. En mettant l’accent sur l’optimisation des performances et l’application de bonnes pratiques, il prépare les personnes participantes à créer des applications frontend robustes et évolutives, tout en renforçant leur compréhension des concepts avancés de React pour des développements efficaces et modernes.

Contenu du cours:

Préparation de l’environnement

• Installation de Visual Studio Code, Node.js
• Extensions recommandées (Prettier, React Snippets)
• Création et exécution d’une application React (CREATE-REACT-APP)

Concepts de base de React (rappel)

• Composants fonctionnels
• Hooks fondamentaux : useState, useEffect, useContext
• Cycle de vie des composants
• Rendu conditionnel et gestion d’événements
• Exercices : compteur, connexion utilisateur

Composants avancés et Hooks personnalisés

• useReducer pour états complexes
• useRef pour références DOM et stockage
• useCallback, useMemo pour optimisation
• Création de useFetch, useProductSearch
• Mémoïsation avec React.memo
• Exercices : recherche optimisée de produits avec API fakestoreapi

Routage avancé avec React Router

• Configuration de base avec BrowserRouter, Routes, Route
• Routage dynamique avec useParams
• Protection des routes (RouteProtegee, redirection)
• Gestion des erreurs 404
• Exercice : application avec pages protégées, routage dynamique et page d’erreur

Gestion d’état avancée avec Redux Toolkit

• Concepts Redux : magasin (store), actions, réducteurs (reducers), flux unidirectionnel
• Intégration avec React : useSelector, useDispatch, Provider
• Création de tranches (slices) avec createSlice
• Exercices : application de gestion de tâches (add, toggle, delete)
• Code source fourni via GitHub

Formulaires avancés avec Formik, Yup et Styled-Components

• Création de formulaires contrôlés avec Formik (Field, ErrorMessage)
• Validation avec Yup (validationSchema)
• Stylisation des formulaires avec Styled-Components
• Exercice : formulaire complet (nom d’utilisateur, courriel, mot de passe)

Appels API et intégration de services avec Axios

• Requêtes HTTP : GET, POST, PUT, DELETE
• Intercepteurs (auth token), gestion des erreurs
• Annulation des requêtes avec AbortController
• Exercices :
  • Affichage de posts via JSONPlaceholder
  • Formulaire interactif de commentaires

Tests avancés et bonnes pratiques

• Introduction à Jest et React Testing Library
• Tests unitaires de composants React
• Bonnes pratiques
  • Modularité
  • Réutilisabilité
  • Structure de dossier
  • Accessibilité et performance

 Mini-projet final : application complète React

• Application
  • Authentification avec redirection
  • Routage dynamique et routes protégées
  • Consommation d’API externe (ex. JSONPlaceholder)
  • Gestion d’état locale et globale (Redux)
  • Optimisations (React.memo, useMemo)
• Structure finale de projet fournie
• Démonstration et code disponible sur GitHub

Préalables

• Posséder une bonne compréhension des concepts de JavaScript Moderne (ES6+).

• Avoir suivi la formation React JS ou en maîtriser les concepts de base, les composants, les propriétés (props) et les états (state).