Démarrage avec React : Configurez Votre Premier Projet

Prérequis

Avant de commencer, assurez-vous d'avoir les éléments suivants installés sur votre machine :

• Node.js (version 14 ou supérieure) : Téléchargez-le depuis nodejs.org.
• NPM (Node Package Manager) : Installe automatiquement avec Node.js.

Pour vérifier si Node.js et NPM sont installés, exécutez les commandes suivantes dans votre terminal :

📋 Copier le code

node -v
npm -v

Si ces commandes retournent des versions, vous êtes prêt à continuer.

Étape 1 : Installation de Create React App

create-react-app est un outil fourni par Facebook pour initialiser rapidement un projet React sans avoir à configurer manuellement Webpack ou Babel.

📋 Copier le code

npx create-react-app mon-premier-projet

Explication du code :

• npx : Exécute un paquet npm temporairement sans l'installer globalement.
• create-react-app : Outil officiel pour créer des applications React.
• mon-premier-projet : Nom que vous souhaitez donner à votre projet.

Étape 2 : Navigation vers le Répertoire du Projet

Une fois l'installation terminée, naviguez vers le répertoire de votre projet :

📋 Copier le code

cd mon-premier-projet

Étape 3 : Lancement du Serveur de Développement

Pour voir votre application en action, lancez le serveur de développement local :

📋 Copier le code

npm start

Explication du code :

• npm start : Lance le serveur de développement React.
• Ouvrez votre navigateur à l'adresse http://localhost:3000, s’il n’est pas ouvert automatiquement, pour afficher l'interface de votre application.

Exploration de la Structure du Projet

Voici une vue d'ensemble des principaux fichiers et dossiers créés par create-react-app dans le dossier de votre projet:

• Le dossier "public" : Contient des fichiers statiques comme index.html.
• "src" : un dossier qui contient le code source de votre application React.
• package.json : Liste les dépendances et scripts du projet.

Le fichier principal où vous allez écrire votre code React est "App.js" qui se trouve dans le dossier "src".

Exploration Complète de la Structure du Projet React

Lorsque vous créez un projet React avec create-react-app, plusieurs dossiers et fichiers sont générés automatiquement. Voici une exploration détaillée de ces éléments :

• public/ : Ce dossier contient des fichiers statiques, notamment index.html, qui sert de point d'entrée pour votre application React.
• src/ : C'est le cœur de votre projet React. Tous les composants, styles et logiques spécifiques à votre application seront créés ici.
• node_modules/ : Ce dossier contient toutes les dépendances nécessaires à votre projet. Il est généré automatiquement lors de l'installation des packages via NPM ou Yarn.
• .gitignore : Ce fichier spécifie les fichiers et dossiers à ignorer lors de l'utilisation de Git pour le contrôle de version. Par exemple, node_modules/ est généralement ignoré car il peut être volumineux et n'a pas besoin d'être commit.
• package.json : Ce fichier définit les métadonnées de votre projet, y compris son nom, sa version, ses dépendances et ses scripts personnalisés.
• README.md : Un fichier Markdown fourni par défaut pour décrire votre projet. Vous pouvez le personnaliser pour inclure des instructions supplémentaires.

En explorant le dossier "src/", voici quelques fichiers importants que vous trouverez :

• index.js : Ce fichier est le point d'entrée principal de votre application React. Il utilise ReactDOM.render() pour injecter votre composant racine (App) dans le DOM.
• index.css : Ce fichier contient les styles globaux appliqués à toute l'application.
• App.js : Le composant racine de votre application. C'est ici que vous commencerez à écrire votre logique et vos composants React.
• App.css : Les styles spécifiques au composant App.
• App.test.js : Un fichier de test pour le composant App. Il est utilisé pour vérifier que votre composant fonctionne correctement.
• logo.svg : Un fichier SVG inclus par défaut pour illustrer l'utilisation des ressources graphiques.

Cette structure est conçue pour faciliter le développement et la maintenance de votre application React. Chaque dossier et fichier a un rôle précis, permettant une organisation claire et intuitive.

Explications Supplémentaires sur des Concepts Avancés

Pour mieux comprendre la structure de votre projet React, voici des explications détaillées sur certains concepts avancés qui peuvent sembler complexes au premier abord.

Rôle du Dossier node_modules/

Le dossier node_modules/ est l'un des éléments les plus importants de votre projet React. Voici ce qu'il faut savoir :

• Qu'est-ce que c'est ? Ce dossier contient toutes les dépendances nécessaires à votre projet. Par exemple, React lui-même, ainsi que d'autres bibliothèques ou outils requis pour le fonctionnement de votre application.
• Pourquoi est-il volumineux ? Chaque dépendance peut avoir ses propres sous-dépendances, ce qui entraîne une multiplication des fichiers. Cela explique pourquoi node_modules/ occupe souvent beaucoup d'espace disque.
• Pourquoi ne pas le push sur Git ? Les fichiers dans node_modules/ sont générés automatiquement lors de l'installation des dépendances via NPM ou Yarn. Il n'est donc pas nécessaire de les inclure dans votre dépôt Git. C'est pourquoi il est recommandé de l'ajouter dans le fichier .gitignore.
• Que faire si je supprime accidentellement node_modules/ ? Pas de panique ! Vous pouvez simplement réinstaller toutes les dépendances avec la commande suivante :

  📋 Copier le code

  npm install
  

Rôle du Fichier .gitignore

Le fichier .gitignore joue un rôle crucial dans la gestion de votre projet React. Voici son importance :

• À quoi sert-il ? Ce fichier spécifie les fichiers et dossiers que Git doit ignorer lors de l'enregistrement des modifications dans votre dépôt. Cela permet de maintenir un historique propre et évite d'inclure des fichiers inutiles ou sensibles.
• Quels fichiers sont généralement ignorés ? Voici quelques exemples courants :
  • node_modules/ : Comme mentionné précédemment, ce dossier est volumineux et généré automatiquement.
  • .env : Contient des variables d'environnement sensibles (par exemple, clés API).
  • Fichiers temporaires ou de build (build/, dist/, etc.).
• Comment modifier .gitignore ? Vous pouvez ajouter ou supprimer des règles directement dans ce fichier. Par exemple, pour ignorer tous les fichiers .log, ajoutez cette ligne :

  📋 Copier le code

  *.log
  

Rôle du Fichier package.json

Le fichier package.json est essentiel pour gérer votre projet React. Voici ses principales fonctions :

• Informations sur le projet : Il contient des métadonnées telles que le nom, la version et la description de votre projet.
• Dépendances : Liste toutes les bibliothèques nécessaires à votre projet (par exemple, React, React Router, etc.).
• Scripts personnalisés : Définit des commandes utiles pour simplifier les tâches courantes. Par exemple :

  📋 Copier le code

  "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
  }
  

  Explication :

  • npm start : Lance le serveur de développement.
  • npm run build : Génère une version optimisée de votre application pour la production.
  • npm test : Exécute les tests unitaires.
  • npm run eject : Expose les configurations internes de create-react-app (non recommandé sauf cas particuliers).

Conclusion

Ces concepts avancés sont cruciaux pour bien comprendre comment fonctionne un projet React. En maîtrisant ces éléments, vous serez mieux préparé à gérer des projets plus complexes et à résoudre des problèmes éventuels.

Vous avez maintenant configuré votre premier projet React et lancé le serveur de développement. Dans le prochain chapitre, nous explorerons comment mettre à jour l'état de votre application.

Prochain chapitre : Mise à Jour avec React