Créer un projet React à partir de zéro

Effectué

Dans ce module, nous avons utilisé un projet de démarrage pour nous lancer rapidement. Cette configuration nous a permis de nous concentrer sur React et une partie de la nouvelle syntaxe. Vous êtes libre d’utiliser le projet de démarrage pour votre propre travail.

Vous souhaiterez peut-être essayer de créer un projet à partir de zéro. Pour démarrer à partir d’un dossier vide, suivez les étapes de cette unité. Les étapes utilisent Snowpack, tout comme le projet de démarrage.

Cette unité est facultative. Si vous n’avez pas besoin de créer votre propre projet, passez à l’unité suivante.

Comprendre la structure du projet

Notre configuration centrale a deux dossiers principaux qui stockent le code :

• public
  • Contient des fichiers HTML, CSS, images ou autres fichiers statiques
  • Stocke nos fichiers index.html et index.css
• src
  • Contient tous les fichiers qui doivent être rendus
  • Stocke tous les fichiers .jsx

Nous allons également créer deux fichiers pour configurer notre application :

• package.json : contient la liste de packages et de scripts pour notre application
• snowpack.config.js : contient des options de configuration pour Snowpack

Nous avons besoin de trois packages principaux pour notre application :

• Snowpack : utilisé pour convertir le JSX en HTML et JavaScript
• React : utilisé pour créer nos composants
• React-DOM : utilisé pour monter notre application

Créer la structure initiale

Dans un répertoire vide, commencez par installer les composants nécessaires à l’aide de npm. Configurez ensuite Snowpack et ajoutez les scripts au fichier package.json.

1. Ouvrez une fenêtre de terminal ou de commande. Exécutez ensuite les commandes suivantes pour créer le répertoire ainsi que le fichier package.json pour npm. Sur Mac ou Linux, utilisez mkdir, et sur Windows, utilisez md pour créer un répertoire.

   # Windows
   md react-recipes && cd react-recipes
   md src
   md public
   touch package.json
   echo "{}" > package.json
   
   # Linux or macOS
   mkdir react-recipes && cd react-recipes
   mkdir src
   mkdir public
   touch package.json
   echo "{}" > package.json
   

2. Exécutez le code suivant dans le même terminal ou la même fenêtre de commande.

   npm install --save-dev snowpack
   npm install react react-dom
   

   Notes

   Snowpack est une dépendance de développement. Autrement dit, il n’est pas nécessaire pour la production, car il génère les fichiers JavaScript et HTML nécessaires pendant le processus de build.

3. Ouvrez le répertoire dans Visual Studio Code en exécutant la commande suivante.

   code .
   

Configurer Snowpack

Un des avantages d’un outil tel que Snowpack est qu’il est généralement autoconfiguré. Toutefois, nous devons indiquer la structure de dossiers de votre code. Pour indiquer la structure de dossiers, nous définissons les options dans le fichier snowpack.config.js.

1. Dans Visual Studio Code, créez un nouveau fichier en sélectionnant Fichier>Nouveau fichier.

2. Nommez le fichier snowpack.config.js.

3. Ajoutez le code suivant au nouveau fichier.

   module.exports = {
       mount: {
           'public': '/',
           'src': '/dist'
       }
   }
   

Ce code indique à Snowpack d’utiliser notre dossier public comme racine de l’application. Il définit également le répertoire src comme emplacement virtuel pour les fichiers JavaScript et les fichiers HTML qu’il génère.

Créer les scripts npm

Pour soutenir notre travail de développement, nous allons utiliser deux scripts avec Snowpack. Le premier script démarre le serveur de développement. Cette action actualise automatiquement notre page lorsque nous modifions notre application. Le deuxième script est utilisé lorsque nous sommes prêts à créer tous nos fichiers pour le déploiement.

1. Dans Visual Studio Code, ouvrez le fichier package.json.

2. Au bas du fichier, au-dessus du dernier crochet (}), ajoutez le code suivant. Ce code crée les scripts de démarrage et de génération.

   {
       "scripts": {
           "start": "snowpack dev",
           "build": "snowpack build"
       }
   }
   

   Votre fichier entier doit maintenant ressembler au code suivant.

   {
     "devDependencies": {
       "snowpack": "^2.18.5"
     },
     "dependencies": {
       "react": "^17.0.1",
       "react-dom": "^17.0.1"
     },
     "scripts": {
         "start": "snowpack dev",
         "build": "snowpack build"
     }
   }
   

3. Enregistrez tous les fichiers en sélectionnant Fichier>Enregistrer tout.

Vous avez maintenant configuré votre projet de démarrage ! Vous pouvez ajouter index.html, App.jsx et d’autres fichiers comme vous l’avez fait dans les unités précédentes.