Une application React

Pourquoi React ?

Parce qu'il faut bien commencer à créer notre page avec quelque chose.

D'autres choix seraient tout aussi légitimes. Mais nous voulons aller vite.

Mono-repo

Mais mieux ne vaut pas tout mélanger. Gardons précautionneusement notre code React à l'écart de notre App. Séparons donc les 2 environnements, comme s'il s'agissait de 2 dépôt de code distincts. Pour cela, nous allons utiliser les workspaces du gestionnaire de packages yarn.

NB : là aussi,d'autres choix seraient tout aussi légitimes. Faisons juste en sorte que ces outils soient faciles à remplacer.

A la racine de notre projet, écrivons ce fichier package.json :

{
  "name": "projet-booking",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

Avec ces quelques lignes, nous avons juste signifié à yarn que le répertoire packages contenait plusieurs dépôts de code indépendants.

Puis transférons notre code du backend dans un sous-répertoire core de packages. Notre aborescence ressemble désormais à cela :

projet-booking
 |- package.json   <-- celui que nous venons de créer
 |- packages
    |- core
        |- package.json   <-- celui qui existait déjà (avec 1 dépendance : vitest)
        |- domain
            |- app
            |- App.js
            |- Context.js
            |- tests
            |- book.test.js
            |- usecases
            |- book.js
            |- login.js
        |- infra
            |- MemoryBookingRepository.js
            |- MemoryUserRepository.js
            |- testDependencies.js

Important : supprimons le fichier yarn.lock et le répertoire node_modules. Ils serton ré-créées automatiquement.

Nous allons en profiter pour modifier un peu notre fichier package.json dans le répertoire packages/core. Attribuons-lui un nom @booking/core pour le distinguer :

{
  "name": "@booking/core",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "test": "vitest"
  },
  "devDependencies": {
    "vitest": "^1.6.0"
  }
}

Création du package React

Créons désormais notre package React avec la commande :

cd packages
npx create-vite@latest webapp --template react
cd webapp
yarn

Cette commande va ajouter un 2nd répertoire webapp dans packages.

projet-booking
 |- package.json   <-- celui que nous venons de créer
 |- packages
    |- core
        |- package.json   <-- celui qui existait déjà (avec 1 dépendance : vitest)
        |- domain
        |- infra
    |- webapp
        |- package.json   <-- nouveau, l'application React
        ...

Entrez dedans, et lancer yarn dev : l'application React se lance et le navigateur s'ouvre sur la page par défaut.

Ensuite, nous indiquons à notre package webapp qui va utiliser core.

Et surtout pas l'inverse ! C'est tout le principe d'une clean architecture : le coeur de l'application (le "domaine") est au centre. Les couches qui se trouvent autour, comme l'UI, utilisent le domaine. Mais le domaine ne dépend jamais de quelque chose situé dans une couche supérieure.

dans les dépendances du package de la webapp, ajoutons "@booking/core" : "*".

Le fichier package.json devrait contenir à peu près cela :

{
  "name": "@booking/webapp",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "@booking/core" : "*"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.2",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "vite": "^5.3.1"
  }
}

Ouf, ça fait pas mal de changements dans l'organisation de notre dépôt de code. Pour vous aider, le code complet de ce passage en monorepo est disponible ici (opens in a new tab).

Nous voila prêts à faire le premier écran de notre application !

21 UI 23 Loader