Vite

L'outil de compilation que nous allons utiliser s'appelle Vite. Comme pour dire qu'il permet d'aller plus vite en produisant de meilleurs résultats.

Le résultat final que nous attendons d'un outil de compilation est que :

Nous pouvons séparer les fichiers pour l'organisation du code et disposer d'un outil pour les assembler pour nous
Nous pouvons inclure des bibliothèques externes tierces de npm (comme React !)
L'outil optimisera le code pour nous

Il existe d'autre compilateur comme Parcel ou Webpack. Nous avons fini par passer à Vite parce que la communauté React l'a sélectionné comme outil de choix pour le moment et ce cours vise à vous donner les normes communautaires de React.

Premièrement installons les fichiers pour Vite :

Terminal

npm install -D vite@4.2.1 @vitejs/plugin-react@3.1.0

Ensuite, nous devons modifier notre fichier index.html :

./crypto-app/index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crypto Images</title>
</head>
<body>
  <div id="app">Pas de rendu de l'application</div>
  <!-- delete the two unpkg script lines -->
  <script type="module" src="./App.js"></script>
</body>
</html>

Nous avons ajouté module pour expliquer au navigateur qu'il travaille avec des nouveaux navigateur. Ce qui nous permet en développement de pouvoir utiliser directement des modules au lieu de compiler à chaque fois. C'est ce qui permet à Vite de s'exécuter rapidement.

A présent, nous pouvons créer le fichier de configuration pour Vite et l'appeler vite.config.js et rajouter le texte suivant :

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  root: "./",
});

Nous ajoutons le plugin react à Vite et nous définissons notre répertoire de travail comme étant le dossier actuel. Il peut arriver que vous mettiez le fichier index.html dans un autre répertoire. Dans ce cas, vous pouvez changer la valeur de root. Même si vous ne spécifier pas où se trouve le fichier index.html, Vite va le retrouver pour vous et retrouver toutes les dépendances. Nous n'avons pas besoin d'ajouter d'autres paramètres, Vite va s'occuper du reste.

Ajoutons à notre projet, React et React-dom

Terminal

npm install react@18.2.0 react-dom@18.2.0

Nous n'avons pas inclus "-D" parce que React n'est pas une dépendances de développement mais de production. Il fait partie de l'application.

React et react-dom ont toujours la même version.

A présent, aller dans le fichier App.js et modifier les lignes suivantes :

./App.js

// add to the top
import React from "react";
import { createRoot } from "react-dom/client";

// modify the createRoot call, delete "ReactDOM"
const root = createRoot(container);

Mettons à jour notre fichier package.json pour utiliser Vite:

package.json

{
  ...
  "scripts": {
    ...
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
    ...
  },
  ...
}

dev démarrera le serveur de développement, généralement sur http://localhost:5173/.
build préparera les fichiers statiques à déployer (vers un endroit comme GitHub Pages, Vercel, Netlify, AWS S3, etc.)
preview vous permet de prévisualiser votre fichier final de production localement.

Veuillez fermer les onglets du navigateur file:/// que vous avez ouverts et n'utilisez que ceux de localhost:1234. Maintenant que nous utilisons Vite, le premier ne fonctionnera plus ! Si vous voyez quelque chose à propos des erreurs CORS dans votre console, c'est parce que vous regardez probablement toujours la version file:/// et non le serveur de développement local.