Développement React (ancienne version)
Un séminaire de trois heures que j’ai coécrit avec Jamel Eddine Jridi pour le cours IFT3225 – Technologie de l’Internet, qui présente React dans son style d’origine, fondé sur les classes.
- Type
- Séminaire
- Durée
- 3 h - 1 bloc/séance
- Coauteur
- Jamel Eddine Jridi
- Cours
- IFT3225 – Technologie de l’Internet
- Matériel
- 2 présentations (PDF) : théorie et code
- Langue
- Français
Ce que couvre le séminaire
La première moitié situe React dans son contexte : ses origines (une bibliothèque développée chez Facebook et maintenue en source libre), le rôle du DOM virtuel dans le rendu des pages, ses points forts, ses limites (par exemple l’écriture du CSS par composant, dite CSS-in-JS) et sa comparaison avec les principaux concurrents.
La seconde moitié passe au code et suit une méthode en quatre étapes : découper l’interface en composants, bâtir une version statique avec les props, la rendre dynamique avec le state, puis mettre en place le flux de données bidirectionnel pour que l’ensemble fonctionne. Le cycle de vie d’un composant y est aussi expliqué : montage, mise à jour et démontage.
Un exemple guidé
La méthode est appliquée à une petite liste de cours avec recherche. À partir d’une maquette, la page est découpée en composants, affichée de façon statique, puis rendue interactive pour qu’une barre de recherche filtre la liste. Les diapositives montrent où placer le state et pourquoi.
Pourquoi « ancienne version »
Les exemples reposent sur les composants de classe, setState() et ReactDOM.render(), le style de React à l’époque où ce séminaire était le plus donné. Je le garde accessible pour les architectures qui en dépendent encore ; mes cours sur Next.js abordent les composants fonctionnels et les hooks.