Comment configurer un projet React avec Vite

Tutoriels
JavaScript React

L’auteur a choisi Code.org pour recevoir une donation dans le cadre du programme Write for DOnations.

Introduction

Normalement, vous pourriez créer un nouveau projet en utilisant Create React App, mais cela peut prendre beaucoup de temps pour installer plus de 140 Mo de dépendances. Vite est un outil léger qui ne nécessite que 31 Mo de dépendances, ce qui vous fera gagner du temps pour démarrer un nouveau projet. Vite utilise également les modules ES (ECMAScript) natifs du navigateur pour lier les fichiers JavaScript, ce qui ne reconstruit pas l’ensemble du bundle après chaque changement 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 construction d’une application React avec Vite.

Ce tutoriel vous guidera dans la création d’une nouvelle application React en utilisant l’outil Vite. Vous créerez une application de base avec un nouveau composant, du CSS et un fichier image, et préparerez un bundle optimisé pour le déploiement.

Simplifiez le déploiement des applications React avec DigitalOcean App Platform. Déployez React directement depuis GitHub en quelques minutes.

Prérequis

Pour suivre ce tutoriel, vous aurez besoin de ce qui suit :

Étape 1 — Création d’un Projet Vite

Dans cette étape, vous allez créer un nouveau projet React en utilisant l’outil Vite depuis la ligne de commande. Vous utiliserez le gestionnaire de paquets yarn pour installer et exécuter les scripts.

Exécutez la commande suivante dans votre terminal pour créer une nouvelle structure de projet Vite :

  1. yarn create vite

Cette commande exécutera l’exécutable Vite à partir du dépôt distant npm. Elle configurera les outils nécessaires pour créer une structure de développement locale React. Enfin, elle ouvrira un menu en ligne de commande pour les paramètres du projet et le type de langage.

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

Output
yarn 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) :

  1. digital-ocean-vite

Après avoir saisi le nom de votre projet, Vite vous demandera de choisir un framework :

Output
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others

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

Utilisez les touches 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 de direction de votre clavier pour sélectionner JavaScript :

Output
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC

Après avoir configuré le framework, vous verrez un message indiquant que le projet a été créé. Ensuite, Vite vous demandera d’installer les dépendances à l’aide de Yarn :

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

Done. Now run:

cd digital-ocean-vite
yarn
yarn dev

Done in 129.89s.

Naviguez jusqu’au dossier de votre projet comme indiqué :

  1. cd digital-ocean-vite

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

  1. yarn

Lorsque vous avez terminé, l’installation des dépendances renverra une sortie indiquant combien de temps a été nécessaire pour installer les dépendances :

Output
success Saved lockfile.
Done in 43.26s.

Vous avez maintenant configuré un nouveau projet React en utilisant Vite et installé les packages nécessaires à React et Vite.

Ensuite, vous démarrerez le serveur de développement pour tester l’application.

Étape 2 — Démarrer le serveur de développement

À cette étape, vous démarrerez le serveur de développement pour vérifier que tout fonctionne.

Depuis l’intérieur du dossier digital-ocean-vite, utilisez la commande suivante pour lancer le serveur de développement :

  1. yarn run dev

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

Vous recevrez la sortie suivante :

Output
VITE v4.0.4 ready in 847 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help

Ensuite, ouvrez votre navigateur et visitez http://localhost:5173/. Le projet React par défaut s’exécutera sur le port 5173 :

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

Étape 3 — Prévisualiser votre application depuis un téléphone mobile

Vite n’expose pas votre application de développement à votre réseau par défaut. À cette étape, vous allez exposer l’application à votre réseau local pour la prévisualiser depuis votre téléphone portable.

Pour exécuter votre application dans 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 actuellement en cours d’exécution.

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

  1. yarn run dev --host

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

Vous recevrez cette sortie dans votre terminal:

Output
VITE v4.0.4 ready in 747 ms

➜ Local: http://localhost:5173/
➜ Network: http://your_ip_address:5173/
➜ press h to show help

Il s’agit d’une adresse IP locale, propre à votre réseau d’ordinateurs ou à votre routeur.

Ouvrez un navigateur sur votre téléphone portable, puis saisissez l’adresse IP et le port ci-dessus pour accéder à l’aperçu de votre application Vite depuis votre téléphone portable:

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 d’amorce fourni avec Vite.

Étape 4 — Supprimer le Code d’Amorce par Défaut

À cette étape, vous supprimerez les fichiers d’amorce 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/:

  1. ls src/

La sortie répertoriera tous les fichiers disponibles:

Output
App.css
App.jsx
assets
index.css
main.jsx

Utilisez la commande rm pour supprimer un fichier ou un répertoire. Utilisez les commandes suivantes pour supprimer les fichiers par défaut du projet:

  1. rm src/App.css

  2. rm src/App.jsx

  3. rm src/index.css

Supprimez le répertoire assets en utilisant la commande suivante:

  1. rm -r src/assets

Le drapeau -r est une opération récursive, nécessaire lors de la suppression d’un répertoire ainsi que de son contenu.

Après avoir supprimé ces fichiers, seul main.jsx reste dans le répertoire src/. Exécutez à nouveau la commande ls src/ pour voir les fichiers restants:

  1. ls src/

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

Output
main.jsx

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

Ouvrez main.jsx pour l’édition avec la commande suivante:

  1. nano src/main.jsx

Supprimez la ligne en surbrillance pour supprimer le lien vers le fichier CSS:

/src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
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:

  1. nano src/App.jsx

Ajoutez le code suivant au fichier App.jsx:

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

Ce code crée un nouveau composant fonctionnel React 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:

  1. yarn run dev --host

Maintenant, ouvrez ou rafraîchissez http://localhost:3000 dans votre navigateur pour accéder à une page vide 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 lier des images en créant une application de base. Commencez par quitter le serveur de développement.

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 ajouterez 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 à l’intérieur de src/ :

  1. mkdir src/components

Ensuite, créez un nouveau fichier appelé Welcome.jsx à l’intérieur du répertoire src/components/ avec la commande :

  1. 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 fonctionnel React appelé Welcome. Le préfixe export default indique à JavaScript d’exporter cette fonction comme exportation par défaut.

La balise div avec un nom de classe de 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 ferez référence à ce nouveau composant dans votre fichier App.jsx.

Ouvrez App.jsx avec la commande suivante :

  1. 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

Ajouter des images dans React est un cas d’usage courant dans le développement d’applications.

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

  1. mkdir src/img

Naviguez vers votre répertoire src/img avec cette commande :

  1. cd src/img

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

Téléchargez l’image avec wget :

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

Renommez l’image avec la commande suivante :

  1. 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 plus tard.

Retournez à votre répertoire racine avec cette commande :

  1. cd ../../

Ensuite, vous allez mettre à jour le fichier Welcome.jsx pour faire le lien vers cette image. Ouvrez le fichier :

  1. nano src/components/Welcome.jsx

Modifiez 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 image que vous venez d’importer. Les propriétés width et height définiront les attributs d’image correspondants à 200 pixels.

Enregistrez et fermez le fichier Welcome.jsx.

Ensuite, vous ajouterez du CSS à votre projet.

Ajout de CSS

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

Créez un nouveau répertoire appelé css sous le répertoire src/ en utilisant la commande suivante :

  1. mkdir src/css

Maintenant, créez un nouveau fichier CSS appelé main.css dans src/css :

  1. 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 de fond.

La classe .wrapper sélectionnera la div wrapper dans votre fichier Welcome.jsx. Les styles pour cette classe feront ce qui suit :

  • Définir une couleur d’arrière-plan.
  • Ajouter un padding de 20 pixels.
  • Ajouter des coins arrondis de 10 pixels.

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

Une fois terminé, enregistrez et fermez le fichier main.css.

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

  1. nano src/components/Welcome.jsx

Mettez à jour le contenu du fichier avec la ligne surlignée :

/src/components/Welcome.jsx
import Sammy from "../img/sammy.jpeg"
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. Vous devrez peut-être mettre à jour la ligne avec le chemin d’accès correct du dossier de votre projet.

Une fois terminé, enregistrez et fermez le fichier Welcome.jsx.

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

Changer la barre de titre de l’application

Par défaut, l’application Vite affiche le texte Vite + React dans la barre de titre de la fenêtre du navigateur. À cette étape, vous allez le changer pour un titre descriptif.

Ouvrez index.html dans votre répertoire racine :

  1. nano index.html

Mettez à jour la balise <title> avec le texte surligné :

/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.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 par défaut de l’application Vite par le titre personnalisé de votre application.

Enregistrez et fermez le fichier index.html.

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

  1. yarn run dev --host

Après toutes ces modifications, visitez http://localhost:5173 pour voir votre application. Vous verrez une nouvelle version de votre application.

Vous pouvez fermer le serveur de développement lorsque vous êtes prêt à passer à la construction.

Vous avez maintenant ajouté une image, modifié des styles et créé une interface utilisateur soignée. Dans l’étape suivante et finale, vous allez créer un bundle d’application optimisé pour le déploiement.

Étape 6 — Construction pour la production

Dans cette étape, vous allez créer un bundle d’application optimisé prêt à être déployé sur un serveur. Pour créer une construction, exécutez la commande suivante dans le terminal :

  1. yarn run build

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

Vous recevrez une sortie similaire à ceci :

Output
vite v4.0.4 building for production...
✓ 34 modules transformed.
dist/index.html 0.45 kB
dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
✨ Done in 1.63s.

Vous pouvez maintenant 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 plateforme d’application pour exécuter le script de construction et générer automatiquement les fichiers de construction. Pour déployer votre application React sur la plateforme d’application DigitalOcean, suivez notre tutoriel sur Comment déployer une application React sur la plateforme d’application DigitalOcean.

Conclusion

Dans ce tutoriel, vous avez créé une nouvelle application React à l’aide de l’outil Vite. Vous avez créé une nouvelle application React avec la commande yarn create vite. Après avoir supprimé le code d’amorçage, 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 construite avec Vite, découvrez ce que vous pouvez faire d’autre avec React dans la série Comment coder en React.js et explorez d’autres tutoriels React.

Source:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite