Comment configurer un projet React avec Vite

De Get Docs
Aller à :navigation, rechercher

L'auteur a sélectionné Code.org pour recevoir un don dans le cadre du programme Write for DOnations.

Introduction

En règle générale, vous pouvez créer un nouveau projet à l'aide de Create React App, mais l'installation de plus de 140 Mo de dépendances peut prendre beaucoup de temps. Vite est un outil léger qui occupe 31 Mo de dépendances, ce qui vous fera gagner du temps lors du démarrage d'un nouveau projet. Vite utilise également les modules ES natifs du navigateur (ECMAScript) pour créer des liens vers des fichiers JavaScript, ce qui ne reconstruit pas l'intégralité du bundle après chaque modification de fichier. Ces différences se traduisent par une expérience plus rapide lors de la création, de la mise à jour et de la création d'une application React avec Vite.

Ce didacticiel échafaudera une nouvelle application React à l'aide de l'outil Vite. Vous allez créer une application de base avec un nouveau composant, CSS et un fichier image, et préparer un bundle optimisé pour le déploiement.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

Étape 1 - Création d'un projet Vite

Dans cette étape, vous allez créer un nouveau projet React à l'aide de l'outil Vite à partir de la ligne de commande. Vous utiliserez le gestionnaire de packages yarn pour installer et exécuter les scripts.

Exécutez la commande suivante dans votre terminal pour échafauder un nouveau projet Vite :

yarn create vite

Cette commande exécutera l'exécutable Vite à partir du référentiel distant npm. Il configurera les outils nécessaires pour échafauder un environnement de développement local React. Enfin, il ouvrira un menu de ligne de commande pour les paramètres du projet et le type de langue.

Une fois le script terminé, vous serez invité à saisir un nom de projet :

Outputyarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "[email protected]" with binaries:
      - create-vite
      - cva
? Project name: » vite-project

Tapez le nom de votre projet (ce tutoriel utilisera digital-ocean-vite comme exemple de nom) :

digital-ocean-vite

Après avoir entré le nom de votre projet, Vite vous demandera de sélectionner un framework :

Output? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
    vue
>   react
    preact
    lit
    svelte

Vite vous permet de démarrer une gamme de types de projets, pas seulement React. Actuellement, il prend en charge les projets JavaScript React, Preact, Vue, Lit, Svelte et vanilla.

Utilisez les touches fléchées de votre clavier pour sélectionner react.

Après avoir sélectionné le framework React, Vite vous demandera de choisir le type de langage. Vous pouvez utiliser JavaScript ou TypeScript pour travailler sur votre projet.

Utilisez les touches fléchées pour choisir react :

Output? Select a variant: » - Use arrow-keys. Return to submit.
>   react
    react-ts

Après avoir configuré le cadre, vous verrez une sortie indiquant que le projet a été échafaudé. Vite vous demandera ensuite d'installer les dépendances à l'aide de Yarn :

OutputDone:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

  cd digital-ocean-vite
  yarn
  yarn dev

Done in 129.89s.

Accédez au dossier de votre projet comme indiqué :

cd digital-ocean-vite

Ensuite, utilisez la commande yarn pour installer les dépendances du projet :

yarn

Après avoir installé toutes les dépendances, vous verrez combien de temps il a fallu pour installer les dépendances :

Outputsuccess Saved lockfile.
Done in 43.26s.

Vous avez maintenant configuré un nouveau projet React à l'aide de Vite et installé les packages requis par React et Vite.

Ensuite, vous allez démarrer le serveur de développement pour tester l'application.

Étape 2 - Démarrage du serveur de développement

Dans cette étape, vous allez démarrer le serveur de développement pour vérifier que tout fonctionne.

Depuis le dossier digital-ocean-vite, utilisez la commande suivante pour exécuter le serveur de développement :

yarn run dev

Cette commande est un alias de la commande vite. Il exécutera votre projet en mode développement.

Vous verrez la sortie suivante :

Output vite v2.9.1 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 910ms.

Ensuite, ouvrez votre navigateur et visitez http://localhost:3000/.

Vous verrez le projet React standard s'exécuter sur le port 3000 :

Lorsque vous voyez cette application en cours d'exécution, vous avez installé avec succès React with Vite. Ensuite, vous prévisualiserez votre application depuis votre téléphone mobile.

Étape 3 - Aperçu de votre application à partir d'un téléphone mobile

Vite n'expose pas votre application de développement à votre réseau par défaut. Dans cette étape, vous exposerez l'application à votre réseau local pour la prévisualiser à partir de votre téléphone mobile.

Pour exécuter votre application sur votre réseau local, vous devez d'abord arrêter le serveur actuel. Dans votre terminal, utilisez CTRL+C pour terminer le serveur de développement en cours d'exécution.

Ensuite, utilisez la commande suivante pour exécuter votre projet :

yarn run dev --host

Le drapeau --host indique à Vite d'exposer votre application au réseau local.

Vous verrez cette sortie dans votre terminal :

Outputvite v2.9.1 dev server running at:
  > Network:  `http://ip_address:3000`
  > Network:  `http://ip_address:3000`
  > Local:    http://localhost:3000/
  > Network:  http://network_address:3000/
  ready in 477ms.

Il s'agit d'adresses IP locales propres à votre réseau informatique ou à votre routeur.

Ouvrez un navigateur sur votre téléphone mobile et saisissez l'une des adresses IP ci-dessus pour voir l'aperçu de votre application Vite depuis votre téléphone mobile :

Vous avez maintenant exécuté votre application dans l'environnement de développement et vérifié qu'elle fonctionne.

À l'étape suivante, vous supprimerez le code passe-partout fourni avec Vite.

Étape 4 - Suppression du passe-partout par défaut

Dans cette étape, vous supprimerez les fichiers passe-partout du projet Vite du répertoire src/, ce qui vous permettra de configurer une nouvelle application. Vous vous familiariserez également avec la structure de projet par défaut de l'application actuelle.

Utilisez la commande suivante pour afficher le contenu de votre répertoire src/ :

ls src/

La sortie listera tous les fichiers disponibles :

OutputApp.css
App.jsx
favicon.svg
index.css
logo.svg
main.jsx

Utilisez la commande rm pour supprimer un seul fichier :

rm src/App.css

Supprimez tous les fichiers sauf main.jsx du répertoire src/.

Exécutez à nouveau la commande ls src/ pour voir les fichiers restants :

ls src/

Désormais, le répertoire ne contiendra que le fichier main.jsx :

Outputmain.jsx

Étant donné que vous avez supprimé tous les autres fichiers, vous devez maintenant supprimer une référence à un fichier CSS supprimé dans main.jsx.

Ouvrez main.jsx pour l'éditer avec la commande suivante :

nano src/main.jsx

Supprimez la ligne en surbrillance pour dissocier la référence au fichier CSS :

/src/main.jsx

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import "./index.css"

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Enregistrez et fermez le fichier main.jsx.

Créez un nouveau fichier nommé App.jsx sous le répertoire src/ avec la commande suivante :

nano src/App.jsx

Ajoutez le code suivant dans le fichier App.jsx :

/src/App.jsx

export default function App() {
  return (
    <>
      <div>Hello World</div>
    </>
  );
}

Ce code crée un nouveau composant React fonctionnel appelé App. Le préfixe export default indique à JavaScript d'exporter cette fonction en tant qu'exportation par défaut. Le corps de la fonction contient un <div> avec le texte "Hello World".

Enregistrez et fermez le fichier App.jsx.

Utilisez la commande suivante pour exécuter à nouveau le serveur de développement :

yarn run dev --host

Maintenant, ouvrez http://localhost:3000 dans votre navigateur pour voir une page vierge affichant le texte "Hello World".

Dans cette étape, vous avez supprimé certains des fichiers par défaut du projet Vite. Ensuite, vous allez créer une application de base avec de nouveaux composants, des fichiers CSS et des fichiers image.

Étape 5 - Création d'une application de base

Dans cette étape, vous allez créer des composants, ajouter des fichiers CSS et créer un lien vers des images en créant une application de base.

Dans la sous-section suivante, vous allez créer un nouveau composant pour votre application React.

Création d'un composant

La création d'un nouveau composant ajoute de la modularité à votre projet. Vous allez ajouter tous les composants dans le répertoire components pour garder les choses organisées.

Utilisez la commande suivante pour créer un nouveau répertoire appelé components dans src/ :

mkdir src/components

Ensuite, créez un nouveau fichier nommé Welcome.jsx dans le répertoire src/components/ avec la commande :

nano src/components/Welcome.jsx

Ajoutez le code suivant au fichier Welcome.jsx :

/src/components/Welcome.jsx

export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <h1>Welcome To My App</h1>
        <p>This is going to be the coolest app in the world!</p>
      </div>
    </>
  );
}

Le code ci-dessus créera un nouveau composant React fonctionnel appelé Welcome. Le préfixe export default indique à JavaScript d'exporter cette fonction en tant qu'exportation par défaut.

La balise div avec un nom de classe wrapper vous permet de cibler cette section dans le CSS. Les balises h1 et p afficheront le message à l'écran.

Enregistrez et fermez le fichier.

Ensuite, vous référencerez ce nouveau composant dans votre fichier App.jsx.

Ouvrez App.jsx avec la commande suivante :

nano src/App.jsx

Mettez à jour le contenu de App.jsx avec le code en surbrillance :

/src/App.jsx

import Welcome from "./components/Welcome"

export default function App() {
  return (
    <>
      <Welcome />
    </>
  )
}

Cette ligne de code importera Welcome.jsx dans l'application et liera le nouveau composant au corps de la fonction. Lorsque vous avez terminé, enregistrez et fermez le fichier.

Dans la sous-section suivante, vous ajouterez une image à votre application.

Ajout d'une image

L'ajout d'images dans React est un cas d'utilisation courant dans le développement d'applications.

Créez un nouveau répertoire appelé img sous le répertoire src/ avec la commande suivante :

mkdir src/img

Accédez à votre répertoire src/img avec cette commande :

cd src/img

Vous allez télécharger cette image de Sammy dans src/img.

Téléchargez l'image avec wget :

wget https://html.sammy-codes.com/images/small-profile.jpeg

Renommez l'image avec la commande suivante :

mv small-profile.jpeg sammy.jpeg

Cette commande renomme le fichier image de small-profile.jpeg à sammy.jpeg, ce qui sera plus facile à référencer ultérieurement.

Revenez à votre répertoire racine avec cette commande :

cd ../../

Ensuite, vous mettrez à jour le fichier Welcome.jsx pour le lier à cette image. Ouvrez le fichier :

nano src/components/Welcome.jsx

Mettez à jour votre fichier Welcome.jsx en ajoutant les lignes en surbrillance :

/src/components/Welcome.jsx

import Sammy from "../img/sammy.jpeg"

export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <h1>Welcome To My App</h1>
        <p>This is going to be the coolest app in the world!</p>
        <img src={Sammy} alt="Sammy Image" width={200} height={200} />
      </div>
    </>
  )
}

La première ligne importera l'image dans React en tant que module.

L'autre ligne à l'intérieur du corps de la fonction créera une nouvelle balise <img> et liera l'attribut src au composant d'image que vous venez d'importer. Les accessoires width et height définiront les attributs d'image correspondants à 200 pixels.

Enregistrez et fermez le fichier Welcome.jsx.

Ensuite, vous ajouterez CSS à votre projet.

Ajout de CSS

Dans cette sous-section, vous allez ajouter un fichier CSS personnalisé à votre projet pour styliser votre application.

Créez un nouveau répertoire nommé css sous le répertoire src/ à l'aide de la commande suivante :

mkdir src/css

Maintenant, créez un nouveau fichier CSS nommé main.css sous src/css avec la commande :

nano src/css/main.css

Ajoutez le code suivant au fichier main.css :

/src/css/main.css

body {
  display: grid;
  place-items: center;
  background-color: #b4a7d6;
  font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
  background-color: #fff9e6;
  padding: 20px;
  border-radius: 10px;
}

h1 {
  color: #8873be;
}

Dans le CSS ci-dessus, vous définissez un affichage en grille et placez les éléments au centre pour le body. Vous définissez également une famille de polices et une couleur d'arrière-plan.

La classe .wrapper sélectionnera la div wrapper dans votre fichier Welcome.jsx. Les styles de cette classe effectueront les opérations suivantes :

  • Définissez une couleur d'arrière-plan.
  • Ajoutez un rembourrage de 20 pixels.
  • Ajoutez des coins plus arrondis de 10 pixels.

Le sélecteur h1 ciblera la balise en HTML, définissant sa couleur sur une nuance de violet.

Lorsque vous avez terminé, enregistrez et fermez le fichier main.css.

Ensuite, vous référencerez le nouveau fichier CSS du composant Welcome.jsx. Ouvrez le fichier Welcome.jsx :

nano src/components/Welcome.jsx

Mettez à jour le contenu du fichier avec la ligne en surbrillance :

/src/components/Welcome.jsx

import Sammy from "../img/sammy.png"
import "../css/main.css"

export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <h1>Welcome To My App</h1>
        <p>This is going to be the coolest app in the world!</p>
        <img src={Sammy} alt="Sammy Image" width={200} height={200} />
      </div>
    </>
  )
}

Cette ligne importera le fichier CSS en tant que module dans votre composant.

Lorsque vous avez terminé, enregistrez et fermez le fichier Welcome.jsx.

Dans la sous-section suivante, vous allez modifier la barre de titre de votre application.

Modification de la barre de titre de l'application

Par défaut, l'application Vite affiche le texte Vite App dans la barre de titre de la fenêtre du navigateur. Dans cette étape, vous allez le remplacer par un titre descriptif.

Ouvrez index.html dans votre répertoire racine :

nano index.html

Modifiez la balise <title> avec le texte en surbrillance :

/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Cool App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Ce texte remplace la barre de titre Vite App par défaut par le titre de votre application personnalisée.

Enregistrez et fermez le fichier index.html.

Si vous devez réexécuter le serveur de développement, exécutez cette commande :

yarn run dev --host

Après tous ces changements, visitez http://localhost:3000 pour afficher votre application. Vous verrez une nouvelle version de votre application.

Vous avez maintenant ajouté une image, modifié les styles et créé une interface utilisateur raffinée. Dans la prochaine et dernière étape, vous créerez un ensemble d'applications optimisé pour le déploiement.

Étape 6 - Construire pour la production

Au cours de cette étape, vous allez créer un bundle d'applications optimisé prêt à être déployé sur un serveur. Pour créer une compilation, exécutez la commande suivante dans le terminal :

yarn run build

Cette commande crée un nouveau dossier dist avec des fichiers source réduits que vous pouvez déployer sur votre serveur pour la production.

Vous verrez cette sortie :

Outputvite v2.9.1 building for production...
✓ 33 modules transformed.
dist/assets/pencil.4e765d86.png   66.46 KiB
dist/index.html                   0.45 KiB
dist/assets/index.e3291b10.css    0.18 KiB / gzip: 0.16 KiB
dist/assets/index.14619c6f.js     130.65 KiB / gzip: 42.34 KiB
Done in 2.50s.

Vous pouvez désormais déployer le contenu du dossier dist sur un serveur en ligne. Si vous avez un serveur Apache ou Nginx, vous pouvez télécharger le contenu manuellement. Vous pouvez également utiliser une plate-forme d'application pour exécuter le script de génération et générer automatiquement les fichiers de génération. Pour déployer votre application React sur la plate-forme d'applications DigitalOcean, suivez Comment déployer une application React sur la plate-forme d'applications DigitalOcean.

Conclusion

Dans ce didacticiel, vous avez créé une nouvelle application React à l'aide de l'outil Vite. Vous avez échafaudé une nouvelle application React avec la commande yarn create vite. Après avoir supprimé le code passe-partout, vous avez créé vos composants en ajoutant une image personnalisée, un fichier CSS et en modifiant la barre de titre. Enfin, vous avez créé un bundle optimisé à l'aide de la commande yarn run build, prêt à être déployé.

Maintenant que vous avez une application React créée avec Vite, découvrez ce que vous pouvez faire d'autre avec React dans la série Comment coder dans React.js et explorez d'autres tutoriels React.