Cours 01 - React / Next.js

React - Introduction

Côté client seulement (sans Next.js)

React est une librarie ayant été développée par Meta afin de faire un rendu UI réactif à partir de données changeantes. Assemblée à certains modules afin d’en faire un cadriciel côté client, ce dernier demeure peu prescriptif et contribue à l’amélioration de nos connaissances en JS par l’omniprésence de ce langage du début à la fin de la production.

Pour obtenir un projet pré-configuré, prêt à l’utilisation, il est possible d’utiliser l’outil Vite (développé par l’équipe de Vue.js et récemment acquis par Cloudflare).

  npm create vite

En plus d’effectuer le rendu pour du UI (html), React est aussi utilisé comme renderer dans d’autres projets:

Remotion pour faire le rendu de vidéos (mp4);
React-Three-Fiber pour faire de la 3d;

Les RSC (React Server Components)

Les React Server Components (RSC) permettent d’optimiser les échanges client/serveur ainsi que de donner davantage de contrôle au développeur. Avec les RSC, la limite entre le serveur et les navigateurs peut sembler davantage floue, mais l’expérience la précisera.

Développée par Vercel en impliquant l’équipe de React, la version 13 de Next.js, introduisant son nouveau app router a permis d’exploiter les nouvelles fonctionnalités de React en plus d’autres concept déja établis comme le Server Side Rendering (SSR) et le Static Site Generation (SSG). Next.js sera donc utilisé dans le cours afin de développer des projets full-stack.

D’autres cadriciels ont depuis intégré les RSC à leur façon dont:

Un premier projet Next.js

Création du projet

Support vidéo

Assurez-vous premièrement qu’une version récent de Node.js est installé sur votre poste (la version LTS suffira).

Depuis la ligne de commande, dans un dossier approprié, créer votre projet à l’aide de l’invite suivante:

  npx create-next-app
  ::  1. Nommer votre projet
  ::  2. Choisir "No, customize settings"
  ::  3. Ne pas utiliser Typescript (nous avons trop peu de temps pour l'apprendre) - "no"
  ::  4. Nous n'utiliserons pas de Linter - "none"
  ::  5. Utiliser le React Compiler - "yes"
  ::  6. Nous utiliserons Tailwind CSS à quelques reprises - "yes" ou "no"
  ::  7. Insérer le code dans un dossier /"src - "yes"
  ::  8. Utiliser l'App Router - "yes"
  ::  9. Il n'est pas nécessaire de modifier les alias d'importation - "no"
  ::  10. Il n'est pas nécessaire d'utiliser de fichier AGENTS.md - "no"

Démarrage: À l’aide de la ligne de commande, depuis le dossier du projet
Fenêtre de terminal
```
  npm run dev
```
Par défaut, le port utilisé pour afficher le projet devrait être :3000, surveillez la ligne de commande (le site serait donc accessible sur http://localhost:3000)

Après la création du projet, assurez-vous d’avoir navigué à l’intérieur de ce dernier avec la commande cd pour pouvoir le démarrer. Voir la Ligne de commande en références.

  cd [nom-du-projet]

Structure d’un projet

En fonction des choix qui auront été effectués lors de la création du projet, la structure de départ sera semblable à la suivante et sera évidemment amenée à être modifiée durant la session.

Répertoirenode_modules/ contient toutes les dépendances du projet
- …
Répertoirepublic/ fichiers statiques accessibles par l’url /
- …
Répertoiresrc/
- Répertoireapp/ app router
  - globals.css css général du site
  - layout.jsx portion permanente de l’interface
  - page.jsx page d’accueil
package.json registre des dépendances et commandes du projet

Pour alléger un projet ou pour simplifier son transport, il peut être utile de supprimer le dossier node_modules. Il pourra ensuite être simplement reconstuit grâce à la commande:

  npm install