Programmation Frontend 2 : frameworks

Cours de programmation frontend avec React et Next.js (L2 et L3, ESP/UCAD) : sept labs, du JavaScript moderne à la consommation d’une API Django.

Niveaux : L2, L3 · Domaine : Programmation, Web & Mobile

Objectifs

  • Écrire du JavaScript moderne
  • Construire une interface en composants React, avec état et effets
  • Gérer la navigation d’une application monopage
  • Passer à Next.js et son App Router
  • Consommer une API REST, jusqu’à une API Django

Prérequis

  • Programmation Frontend 1 : HTML, CSS, JavaScript (bientôt en ligne)
  • HTML, CSS et JavaScript de base

Séances

Ce cours est fait de labs : chaque séance est un lab, et son énoncé complet est la page elle-même. Le PDF que chacune porte en ressource est ce même lab, tel qu’il est distribué en salle.

Séance Contenu Format
Des fonctions JS à React les trois formes de fonction en JavaScript, l’asynchrone avec fetch, et une première application React. TP (146 Ko)
Composants, Props et CSS Modules découper une interface en composants, passer des props, et styliser avec les CSS Modules. TP (122 Ko)
L’état React en profondeur le re-rendu, l’immutabilité et la gestion des données dans l’état React. TP (111 Ko)
useEffect et Cycle de Vie useEffect, le cycle de vie d’un composant et le chargement des données. TP (132 Ko)
Formulaires et React Router les formulaires contrôlés, la validation, et la navigation avec React Router. TP (149 Ko)
Next.js App Router l’App Router de Next.js, la frontière serveur/client et le rendu. TP (213 Ko)
Consommer une API Django consommer une API Django depuis React — CORS, authentification par jeton et CRUD. TP (142 Ko)
Retour au sommet