Cadriciel React Nextjs - Côté client
Un cours de 15 séances sur la partie client de Next.js, des bases de React et de TypeScript jusqu’au routage, à l’optimisation des médias et aux tests frontend, avec un déploiement sur Vercel dès les premières semaines.
- Type
- Cours
- Durée
- 45 h - 15 blocs/séances
- Matériel
- 9 présentations (PDF)
- Langue
- Français
Ce que couvre le cours
Le cours commence par l’utilité d’un cadriciel et la place d’un cadriciel côté client dans une architecture Web. Les étudiants installent ensuite leurs outils et déploient tôt sur Vercel, avec les environnements de développement, de prévisualisation et de production, les variables d’environnement publiques et l’intégration GitHub.
Il développe ensuite les compétences React et Next.js : la différence entre le DOM et le DOM virtuel de React, la structure d’un fichier TSX, les hooks useState et useEffect, un rappel de JavaScript et de TypeScript, Tailwind CSS, les composants fonctionnels, le routage par répertoires et ses fichiers spéciaux, les segments dynamiques comme [slug] avec usePathname et useSearchParams, l’optimisation des images avec next/image et WebP, les vidéos hébergées à l’externe, puis les tests unitaires avec Jest (tests de rendu et tests d’instantanés).
Déroulement
- Séance 1 : introduction au cadriciel côté client
- Séance 2 : initialisation du projet
- Séance 3 : déploiement
- Séance 4 : introduction à React
- Séance 5 : programmation et styles (CSS)
- Séance 6 : examen 1
- Séance 7 : composants React
- Séance 8 : routage
- Séance 9 : pages dynamiques
- Séance 10 : examen 2
- Séance 11 : médias (photos et vidéos)
- Séance 12 : tests unitaires
- Séance 13 : période de travail
- Séances 14 et 15 : présentations
Technologies
Next.js, React, TypeScript, Tailwind CSS, Node.js, Vercel, GitHub et Jest.