Configuration d'un projet React avec Create React App

React est l'une des bibliothèques JavaScript les plus populaires pour le développement d'applications front-end. C’est une bibliothèque open-source qui a été initialement développée par Facebook. React est rapidement devenu populaire pour créer des applications rapides avec JSX – un paradigme de programmation qui combine JavaScript avec une syntaxe de type HTML.

Auparavant, la configuration d'un projet React aurait été un processus complexe. Elle nécessitait de configurer manuellement les composants suivants :

• Un système de build
• Un transpileur de code (convertit les syntaxes modernes en codes lisibles par le navigateur)
• La structure de répertoire de base pour le projet

Heureusement, cette époque est révolue, grâce à Create React App. C’est un outil merveilleux qui automatise toutes ces étapes. Create React App s'occupe de la transpilation du code, du linting, des tests et des systèmes de build. De plus, il est livré avec un serveur qui prend en charge le rechargement à chaud (hot reloading), ce qui signifie que les pages web sont actualisées au fur et à mesure que les modifications sont apportées. Bien sûr, tout cela est fait au sein d'une structure de répertoire organisée.

En bref, pas besoin de passer par le travail manuel de configuration de systèmes de build comme Webpack, ou de transpileur comme Babel. Avec moins de choses à vous soucier, vous êtes libre de vous concentrer pleinement sur le développement front-end. Create React App vous permet de démarrer avec React avec un minimum de préparation.

Dans ce guide, nous allons montrer comment utiliser Create React App et mettre en place une application React de base. Elle pourra servir de base pour tout futur projet d'application.

Prérequis

Pour effectuer les étapes présentées dans ce tutoriel, vous aurez besoin que les logiciels suivants soient configurés au préalable.

• • Un serveur Ubuntu correctement configuré. Vous pouvez suivre les étapes de configuration d'un serveur Ubuntu sur CloudSigma.
  • La dernière version de Node.js installée. Voici un guide étape par étape sur l'installation de Node.js sur Ubuntu.

Étape 1 : Créer un répertoire de projet npm dédié

Pour les paquets Node.js, npm est le gestionnaire de paquets par défaut. Nous utiliserons npm pour créer un répertoire de projet dédié. Il hébergera des fichiers importants comme package.json qui stockent toutes les métadonnées du projet et les modules de dépendance Node.js supplémentaires. JSON est un format standard de partage de données basé sur des objets JavaScript. Reportez-vous à ce guide si vous souhaitez en savoir plus sur le JSON.

Tout d'abord, créez un répertoire dédié :

Ensuite, nous allons dire à npm d'initialiser un environnement de développement à l'intérieur du dossier. Cela créera le fichier package.json nécessaire pour le projet. Changez le répertoire actuel :

Exécutez la commande npm init :

Notez que si vous souhaitez que ce répertoire fasse partie d'un dépôt git, il est recommandé de le configurer d'abord. Le script d'initialisation le détectera automatiquement et configurera tout en conséquence. Une fois terminé, il devrait y avoir un fichier package.json dans le répertoire. Examinez-le avec un éditeur de texte :

Étape 2 : Créer un projet React avec Create React App

Dans cette étape, nous allons appeler Create React App pour établir notre exemple de projet React. Ce script copiera tout le nécessaire dans un nouveau répertoire ainsi que toutes les dépendances. Le gestionnaire de paquets npm est également livré avec l'outil npx. Il est utilisé pour exécuter des paquets exécutables. Nous l'utiliserons pour exécuter le script Create React App sans réellement télécharger le projet.

L'exécution lancera create-react-app sur le répertoire spécifié. Elle exécutera également les commandes npm install pour installer les dépendances. Pour plus de facilité d'utilisation, nous utiliserons le nom cloudsigma-react-react-tutorial. Exécutez la commande suivante :

À la fin du processus, vous verrez l'avis suivant. C'est le message de réussite si l'installation s'est bien déroulée. Il indique également l'emplacement où le projet a été créé.

Étape 3 : Appliquer React-Scripts

Maintenant, nous aurons un bref aperçu des différents react-scripts qui ont été installés lors de l’installation.

• • Nous exécuterons le test script pour exécuter le code de test.
  • Le build script créera une version minifiée de notre projet (pour l’environnement de production).
  • Enfin, le eject script offre un contrôle total sur la personnalisation.

Tout d’abord, vérifiez le contenu du répertoire du projet React :

Voici une description de chaque fichier :

• • node_modules/ : Ce répertoire contient toutes les bibliothèques JavaScript externes à utiliser par l’application. Il est rarement nécessaire de bricoler ici.
  • public/ : Il héberge certains fichiers HTML, JSON et d’images de base. Il sert de racine au projet.
  • src/ : Ce répertoire contient les codes JavaScript React pour notre projet. C’est là que nous passerons la majeure partie de notre temps. Nous explorerons ce répertoire plus en détail dans la partie suivante du guide.
  • .gitignore : C’est un fichier qui décrit quels répertoires git va ignorer, par exemple, le node_modules répertoire. En général, il est préférable d’exclure les répertoires qui contiennent des fichiers volumineux ou hébergent des fichiers journaux qui ne sont pas nécessaires dans le contrôle de version. Dans ce cas, il inclura également certains répertoires spécifiques à React.
  • README.md : C’est un fichier markdown contenant beaucoup d’informations utiles sur Create React App. Par exemple, il comprend un résumé des liens de commandes pour la configuration avancée. Pour l’instant, nous n’avons rien à y faire. Cependant, au fur et à mesure que le projet progresse, vous ajouterez plus de documentation sur le projet.

Les fichiers package.json et package-lock.json sont utilisés par npm. Lors de l’exécution de la commande initiale npx command, elle a créé le projet de base. Lorsque les dépendances supplémentaires ont été installées, elle a créé package-lock.json. npm utilise package-lock.json pour s’assurer que les paquets correspondent aux versions exactes. De cette façon, si quelqu’un d’autre installe votre projet, il obtient également des dépendances identiques. Comme il est créé et géré automatiquement, vous avez rarement besoin d’y toucher.

Le dernier fichier dont nous devons parler est package.json. Il contient des métadonnées sur le projet. Par exemple, les métadonnées peuvent inclure un titre de projet, un numéro de version et des dépendances. Il comprend également les scripts que vous pouvez utiliser pour exécuter le projet. Consultez le contenu du fichier package.json :

C’est un fichier JSON avec divers objets. Jetez un œil à l’objet scripts. Il contient quatre scripts différents :

• • start
  • build
  • test
  • eject

Ces scripts sont répertoriés selon leur importance. Le start script démarre le serveur de développement local. Ensuite, nous détaillerons comment vous pouvez utiliser le reste des scripts.

• • Le script Build

Pour exécuter un script npm, la structure de la commande est la suivante :

Pour exécuter le script build , utilisez la commande suivante :

Cela lancera le processus de compilation des codes en un bundle utilisable. Une fois terminé, consultez le répertoire de sortie :

Notez qu’il y a un nouveau répertoire build/ disponible. Il contient une version minifiée et optimisée des autres fichiers. Il est recommandé de le mettre dans le fichier .gitignore car nous pouvons toujours le générer à l’aide du script build .

• • Le script Test

Le test script est l’un de ces scripts qui ne nécessitent pas le paramètre run pour que npm l’exécute. Cependant, cela fonctionnera toujours très bien avec. Lorsqu’il est exécuté, ce script démarre un exécuteur de tests appelé Jest. Le testeur recherche tout fichier de projet avec les extensions de fichier .spec.js ou test.js et exécute ces fichiers.

La commande npm suivante exécutera le script test :

Il y a quelques points à noter dans la sortie. Rappelez-vous que l’exécuteur de tests ne recherche que des fichiers avec des extensions spécifiques ? Dans ce cas, il n’y a qu’une seule suite de tests (un seul fichier avec .test.js extension). Il ne contient qu’un seul test. Jest peut détecter automatiquement les tests dans la hiérarchie du code, vous êtes donc libre d’imbriquer des tests dans un répertoire.

De plus, Jest ne se contente pas d’exécuter le test une seule fois avant de s’arrêter. Il continue d’exécuter le test dans le terminal. Si des modifications ont été apportées au code source, il réexécutera les tests. Jest permet également de limiter les tests à exécuter. Par exemple, en appuyant sur 0, vous pouvez dire à Jest de ne tester que les fichiers qui ont été modifiés. À mesure que les suites de tests s’agrandissent, cette option permet de gagner beaucoup de temps. Pour quitter le lanceur de tests Jest, appuyez sur q.

• • Le script d’éjection

Le eject script copie toutes les dépendances et les fichiers de configuration dans le projet, vous offrant un contrôle total sur le code. Ce faisant, cependant, vous retirez le projet de la chaîne d’outils intégrée de Create React App. Une fois exécuté, il n’y a aucun moyen de l’annuler.

L’avantage de Create React App est qu’il vous libère du fardeau de nombreuses configurations. La construction de toute application JavaScript moderne nécessite de nombreux outils fonctionnant conjointement. Create React App gère toutes les configurations pour vous, donc éjecter le projet signifie que vous devrez tout faire manuellement après cela.

Un inconvénient notable de Create React App est que, puisqu’il gère toutes les configurations par lui-même, il n’offre pas une personnalisation complète du projet. Pour la plupart des projets, ce n’est pas un problème. Cependant, si vous souhaitez prendre le contrôle total du projet, vous devrez éjecter le code. Une fois éjecté, vous ne pourrez plus mettre à jour vers les nouvelles versions de Create React App. Vous devrez gérer manuellement toutes les améliorations.

Étape 4 : Démarrage du serveur

Maintenant, nous allons lancer le serveur local et exécuter le projet dans un navigateur web. Pour démarrer le serveur, nous avons un autre script sous la main. Son exécution ne nécessite pas la npm run commande. Lorsqu’il est exécuté, le script démarre un serveur local, exécute le code du projet, lance un observateur (watcher) et écoute les modifications du code. Les modifications sont directement affichées sur le navigateur. La commande suivante démarrera le serveur :

La sortie affichera l’URL pour visiter le projet dans un navigateur. Elle affichera également diverses informations sur le projet en cours d’exécution. Ouvrez l’URL dans un navigateur :

Comme le montre la sortie, Create React App utilise le port 3000 pour servir le projet. Si le port était déjà utilisé, Create React App utilisera le prochain port disponible. Si vous avez configuré un pare-feu, il doit autoriser le trafic vers le port 3000 (ou le port indiqué par Create React App). Vous pouvez en savoir plus sur la gestion du pare-feu UFW ici.

Pour quitter le serveur, appuyez sur Ctrl+C depuis la fenêtre du terminal. Cela mettra fin au processus en cours d’exécution (l’instance du serveur).

Étape 5 : Modification de la page d’accueil

Ensuite, nous allons apprendre à modifier le code stocké dans le répertoire public/. Il contient la page HTML de base et sert de racine au projet. Bien que vous n’ayez peut-être pas besoin de le modifier davantage à l’avenir, il sert de base au projet.

Tout d’abord, lancez le serveur avec npm, puis déplacez-vous vers le répertoire public/ :

Le répertoire contiendra des fichiers comme favicon.ico, logo192.png, logo512.png, etc. Ce sont des icônes qu’un utilisateur visitant la page web verrait sur son onglet, son navigateur ou son téléphone. Le navigateur sélectionnera automatiquement celle qui a la taille appropriée. À terme, vous les remplacerez par des icônes adaptées à votre projet. Pour l’instant, nous allons les laisser telles quelles.

Le fichier manifest.json héberge un ensemble structuré de métadonnées. Il décrit le projet, répertorie les icônes disponibles, et plus encore.

Le fichier robots.txt héberge des informations pour les robots d’indexation. Les robots d’indexation parcourent le World Wide Web, indexant les pages pour les moteurs de recherche. Il n’est pas nécessaire de modifier le fichier à moins d’avoir une raison spécifique de le faire. Par exemple, vous pouvez souhaiter rendre certaines URL menant à un contenu spécifique moins facilement accessibles. Ajoutez l’emplacement dans robots.txtet il ne sera pas indexé par les moteurs de recherche.

Le fichier index.html est la racine de notre application. Chaque fois que l’on accède à l’application, c’est ce fichier qui est servi. C’est le fichier que vous voyez à l’écran. Jetons-y un coup d’œil rapide. Ouvrez-le dans un éditeur de texte :

C’est un fichier assez court. Notez qu’il n’y a pas d’image ni de mots dans le <body>. React construit ces contenus en utilisant son propre moteur et les injecte à l’aide de JavaScript. Cependant, React a besoin de savoir où injecter le code. Le fichier index.html remplit ce rôle.

Modifions le <title> en Mon React App:

Ensuite, sauvegardez le fichier et fermez l’éditeur. Maintenant, vérifiez la page web dans le navigateur :

Comme vous pouvez le voir, le titre de l’onglet est modifié en Mon React App. S’il n’a pas changé automatiquement, rechargez la page en appuyant sur F5 ou Ctrl+R.

Retournons dans l’éditeur de texte. Tous les projets React doivent commencer par un élément racine. Il peut y en avoir plus d’un sur une seule page. Cependant, au moins un est obligatoire. Il indique à React où placer tous les codes HTML générés. Dans notre index.html, trouvez l’emplacement de l’élément <div id="root">. C’est le <div> que React utilisera pour les modifications futures. Essayez de changer la valeur de l’ id de root à base:

 

 

Après cela, rechargez la page dans le navigateur. Elle n’affichera aucun contenu. Comme le montrent les Outils de développement web de Firefox, cela génère une erreur :

Retournez dans l’éditeur de texte et remettez la valeur de id à root:

Étape 6 : Balise de titre et modifications de style

Jusqu’à présent, nous avons démarré le serveur local et apporté de légères modifications au fichier HTML racine. Maintenant, nous allons travailler avec les composants React situés dans le répertoire src/ . Nous allons apporter des modifications au code CSS et JavaScript. Les modifications seront automatiquement appliquées grâce au rechargement à chaud.

Si le serveur a été arrêté, démarrez-le en utilisant npm. Ensuite, jetez un coup d’œil au contenu du répertoire src/ :

Il y a plusieurs fichiers JavaScript et CSS ici. Nous allons les passer en revue un par un.

• ServiceWorker.js

C’est un fichier important si vous souhaitez créer des applications web progressives. Ce service worker offre diverses fonctionnalités telles que les notifications push, la mise en cache hors ligne, etc. Pour l’instant, nous allons le laisser tel quel.

• SetupTests.js and App.test.js

Comme le suggère le nom de ces fichiers, ils sont utilisés pour tester les fichiers. Chaque fois que nous avons exécuté le script test à l’aide de npm, il a exécuté ces fichiers. Le fichier setupTests.js contient quelques méthodes expect personnalisées.

Jetons un coup d’œil à App.test.js. Ouvrez-le dans un éditeur de texte :

Il contient un test de base qui recherche la présence de la phrase learn react dans le document. Si l’onglet de votre navigateur est ouvert, vous pouvez voir cette phrase sur la page. Contrairement aux autres tests unitaires, les tests React sont différents. Comme les composants peuvent inclure des informations visuelles telles que du balisage (et de la logique pour la manipulation des données), les tests unitaires traditionnels ne fonctionnent pas facilement. À cet égard, les tests React sont mieux décrits comme une forme de test fonctionnel ou d’intégration.

• Fichiers CSS

Il existe différents fichiers de style disponibles : App.css, index.css, et logo.svg. Vous pouvez suivre plusieurs méthodes pour appliquer des styles dans React. Le moyen le plus simple consiste à écrire du CSS brut, car aucune configuration supplémentaire n’est requise.

Vous pouvez importer directement du CSS dans un composant. Cela permet de diviser les fichiers CSS pour ne les appliquer qu’à un composant individuel. En réalité, vous ne séparez pas le CSS du JavaScript. Vous regroupez plutôt tous les éléments pertinents (CSS, JavaScript, images et balisage) ensemble.

Ouvrez App.css avec un éditeur de texte :

C’est un fichier CSS standard sans préprocesseur CSS particulier. Vous pourrez en ajouter plus tard si vous le souhaitez. Create React App s’efforce de rester neutre tout en offrant une expérience solide prête à l’emploi.

Faisons une modification et voyons-la en action. Modifiez la valeur de background-color en blue:

Vérifiez le changement dans le navigateur :

• • Index.js

Maintenant, il est temps d’apporter des modifications au code JavaScript React. Ouvrez index.js à l'aide d'un éditeur de texte :

Tout en haut, il importe React, ReactDOM, index.css, App, et serviceWorker. En important React, nous récupérons le code nécessaire pour convertir JSX en JavaScript. ReactDOM est le code qui connecte notre code React à l'élément de base ( index.html, par exemple). Regardez la ligne suivante :

Il indique à React de trouver un id par l'étiquette root et d'y injecter les codes React. <App/> est l'élément racine et tout en découle.

Notez que nous avons également importé des fichiers CSS (comme index.css) mais que nous n'en avons rien fait de particulier. En l'important, nous indiquons en fait à Webpack via les scripts React d'inclure les codes CSS dans le bundle compilé final. Sinon, les styles CSS ne s'afficheront pas.

• App.js

Ensuite, nous allons jeter un œil à App.js. Ouvrez-le dans un éditeur de texte :

 

Voyons comment la modification de son contenu affecte notre projet. Modifiez le contenu de la <p>balise :

Ensuite, enregistrez le fichier et vérifiez les modifications dans le navigateur :

Voilà ! Vous avez effectué vos premières modifications de composant React !

Il y a encore une chose à remarquer. Regardez l'élément <img>:

Notez que le logo est transmis entre accolades. Chaque fois que l'on passe des attributs (qui ne sont ni des chaînes de caractères ni des nombres), ils doivent être transmis entre accolades. Ensuite, React les traitera comme des objets JavaScript au lieu de chaînes de caractères.

Dans ce cas, l'application n'importe pas réellement l'image. Il s'agit plutôt d'une référence à l'image. Lorsque Webpack construit le projet, il place l'image à l'emplacement approprié. Nous pouvons le vérifier dans le navigateur. Ouvrez les Outils de développement web dans Firefox :

Webpack veut attribuer des chemins de fichiers uniques pour toutes les images. Ainsi, même si les images ont été importées avec le même nom, elles auront des chemins différents.

Étape 7 : Construction du projet

Dans cette étape, nous allons apprendre à compiler le projet en un package déployable. Lancez le terminal et exécutez le script de build du projet :

Le compilateur va créer le répertoire dédié build/où il placera la sortie. Pour voir ce que fait le processus de compilation, ouvrez le fichier index.html depuis le répertoire build/ :

Comme vous pouvez le voir, tous les codes sont compilés et minifiés dans le plus petit état utilisable. La lisibilité n'est pas un problème car il ne s'agit pas de la partie du code visible par le public. Les codes minifiés prennent moins de place tout en conservant toutes leurs fonctionnalités. Contrairement aux langages où les espaces blancs sont très importants (Python, par exemple), les langages web (HTML, CSS et JavaScript) ne nécessitent pas d'espacement particulier pour que le navigateur puisse les interpréter.

Dernières réflexions

Dans ce guide, nous avons démontré avec succès comment créer une application React. Nous avons également présenté quelques configurations de base à l'aide d'outils de build JavaScript sans détails techniques complexes. C'est la valeur clé qu'offre Create React App. Vous n'avez pas besoin de tout savoir pour commencer avec React. Vous pouvez vous dispenser d'apprendre les étapes de build complexes pour vous concentrer exclusivement sur le code React.

Ici, nous avons également démontré comment démarrer, tester et construire un projet React. Ces commandes sont essentielles pour les projets de toutes tailles.

Bon développement !