Comment configurer un projet React avec Create React App

L’auteur a choisi Creative Commons​​​ pour recevoir un don dans le cadre du programme Write for DOnations.

Introduction

React est un framework JavaScript populaire pour créer des applications front-end. Créé à l’origine par Facebook, il a gagné en popularité en permettant aux développeurs de créer des applications rapides en utilisant un paradigme de programmation intuitive qui lie JavaScript à une syntaxe de type HTML connue sous le nom de JSX.

Le lancement d’un nouveau projet React était auparavant un processus complexe en plusieurs étapes qui impliquait la mise en place d’un système de construction, d’un transpileur de code pour convertir la syntaxe moderne en un code lisible par tous les navigateurs, et d’une structure de répertoire de base. Mais maintenant, Create React App comprend tous les paquets JavaScript dont vous avez besoin pour exécuter un projet React, y compris le transpiling de code, le linting de base, les tests et les systèmes de construction. Il comprend également un serveur avec hot reloading qui rafraîchira votre page au fur et à mesure que vous effectuerez des changements de code.  Enfin, il créera une structure pour vos répertoires et vos composants afin que vous puissiez vous lancer dans le codage en quelques minutes seulement.

En d’autres termes, vous n’avez pas à vous soucier de configurer un système de construction comme Webpack. Vous n’avez pas besoin de configurer Babel pour transpiler votre code afin qu’il soit utilisable par tous les navigateurs. Vous n’avez pas à vous soucier de la plupart des systèmes compliqués du développement front-end moderne. Vous pouvez commencer à écrire React code avec une préparation minimale.

À la fin de ce tutoriel, vous aurez une application React en cours d’exécution que vous pourrez utiliser comme base pour toute application future. Vous allez apporter vos premiers changements au code de React, mettre à jour les styles et lancer un build pour créer une version entièrement réduite de votre application. Vous utiliserez également un serveur avec hot reloading pour vous donner un feed-back instantané et vous explorerez en profondeur les composantes d’un projet React. Enfin, vous commencerez à écrire des composants personnalisés et à créer une structure qui pourra se développer et s’adapter à votre projet.

Conditions préalables

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

• Node.js version 10.16.0 installé sur votre ordinateur. Pour l’installer sur macOS ou Ubuntu 18.04, suivez les étapes du tutoriel **Comment installer Node.js et créer un environnement de développement local sur macOS **ou la section Installation à l’aide d’un PPA du tutoriel Comment installer Node.js sur Ubuntu 18.04.

• Il sera également utile d’avoir une compréhension de base de JavaScript, que vous pouvez trouver dans les séries Comment coder en JavaScript, ainsi qu’une connaissance de base de HTML et CSS.

Étape 1 — Création d’un nouveau projet avec Create React App

Au cours de cette étape, vous allez créer une nouvelle application en utilisant le manager de packages npm pour exécuter un script distant. Le script copiera les fichiers nécessaires dans un nouveau répertoire et installera toutes les dépendances.

Lorsque vous avez installé Node, vous avez également installé une application de gestion de paquets appelée npm. npm installera les paquets JavaScript dans votre projet et gardera également une trace des détails du projet. Si vous souhaitez en savoir plus sur npm, consultez notre tutoriel Comment utiliser les modules Node.js avec npm et package.json.

npm comprend également un outil appelé npx, qui exécutera des paquets exécutables. Cela signifie que vous allez exécuter le code Create React App sans télécharger le projet au préalable.

Le package exécutable exécutera l’installation de create-react-app dans le répertoire que vous spécifiez. Il commencera par réaliser un nouveau projet dans un répertoire, qui dans ce tutoriel sera appelé digital-ocean-tutorial. Là encore, ce répertoire n’a pas besoin d’exister au préalable ; le package exécutable le créera pour vous. Le script va également exécuter npm install dans le répertoire du projet, qui téléchargea toute dépendances supplémentaires.

Pour installer le projet de base, exécutez la commande suivante :

npx create-react-app digital-ocean-tutorial

Cette commande lancera un processus de construction qui téléchargera le code de base ainsi qu’un certain nombre de dépendances.

Lorsque le script se terminera, vous verrez un message de réussite qui indiquera :

Output
...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-tutorial
  npm start

Happy hacking!

your_file_path sera votre chemin actuel. Si vous êtes un utilisateur macOS, ce sera quelque chose comme /Users/your_username; ; si vous êtes sur un serveur Ubuntu, il dira quelque chose comme /home/your_username.

Vous verrez également une liste de commandes npm qui vous permettra d’exécuter, de construire, de démarrer et de tester votre application. Vous en apprendrez davantage dans la section suivante.

Votre projet est maintenant configuré dans un nouveau répertoire. Entrez dans le nouveau répertoire :

cd digital-ocean-tutorial

Vous êtes maintenant à l’intérieur de la racine de votre projet. À ce stade, vous avez créé un nouveau projet et ajouté toutes les dépendances. Mais vous n’avez pas pris de mesures pour exécuter le projet. Dans la section suivante, vous allez exécuter des scripts personnalisés pour construire et tester le projet.

Étape 2 — Utilisation de react-scripts

Au cours de cette étape, vous découvrirez les différents react-scripts qui sont installés avec le référentiel. Vous allez d’abord exécuter le script test pour exécuter le code test. Ensuite, vous lancerez le script build pour créer une version miniaturisée. Enfin, vous verrez comment le script eject peut vous donner un contrôle complet sur la personnalisation.

Maintenant que vous êtes dans le répertoire du projet, jetez y un coup d’œil. Vous pouvez soit ouvrir le répertoire entier dans votre éditeur de texte, soit, si vous êtes sur le terminal, vous pouvez lister les fichiers avec la commande suivante :

ls -a

Le drapeau -a garantit que la sortie comprend également des fichiers cachés.

Quoi qu’il en soit, vous verrez une structure comme celle-ci :

Output
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

Expliquons-les un par un :

• node_modules/ contient toutes les bibliothèques JavaScript externes utilisées par l’application. Vous aurez rarement besoin de l’ouvrir.

• Le répertoire public/ contient quelques fichiers HTML, JSON et images de base.  Ce sont les racines de votre projet. Vous aurez la possibilité de les explorer davantage à l’étape 4.

• Le répertoire src/ contient le code JavaScript React pour votre projet. La plupart de vos travaux figureront dans ce répertoire. Vous allez explorer ce répertoire en détail à l’étape 5.

• Le fichier .gitignore contient quelques répertoires par défaut et des fichiers que git—votre contrôle de source— ignorera, comme le répertoire node_modules. Les éléments ignorés ont tendance à être des répertoires ou des fichiers journaux plus importants dont vous n’auriez pas besoin dans le contrôle des sources. Il comprendra également quelques répertoires que vous allez créer avec certains des scripts React.

• README.md est un fichier markdown qui contient beaucoup d’informations utiles sur Create React App, telles qu’un résumé des commandes et liens vers une configuration avancée. Pour l’instant, il est préférable de laisser le fichier README.md tel quel. Au fur et à mesure de l’avancement de votre projet, vous remplacerez les informations par défaut par des informations plus détaillées sur votre projet.

Les deux derniers fichiers sont utilisés par votre gestionnaire de paquets. Lorsque vous avez lancé la commande npx initiale, vous avez créé le projet de base, mais vous avez également installé les dépendances supplémentaires. Lorsque vous avez installé les dépendances, vous avez créé un fichier package-lock.json. Ce fichier est utilisé par npm pour s’assurer que les paquets correspondent aux versions exactes. De cette façon, si quelqu’un d’autre installe votre projet, vous pouvez vous assurer qu’ils ont des dépendances identiques. Comme ce fichier est créé automatiquement, vous allez rarement modifier ce fichier directement.

Le dernier fichier est un package.json. Il contient des métadonnées sur votre projet, telles que le titre, le numéro de version et les dépendances. Il contient également des scripts que vous pouvez utiliser pour exécuter votre projet.

Ouvrez le fichier package.json dans votre éditeur de texte préféré :

nano package.json

Lorsque vous ouvrez le fichier, vous verrez un objet JSON contenant toutes les métadonnées. Si vous regardez l’objet scripts, vous trouverez quatre scripts différents : start, build, test et eject.

Ces scripts sont listés par ordre d’importance. Le premier script démarre l’environnement de développement local ; vous verrez cela à l’étape suivante. Le deuxième script va construire votre projet. Vous allez en explorer cela en détail à l’étape 4, mais cela vaut la peine de l’exécuter maintenant pour voir ce qui se passe.

Le script build

Pour exécuter n’importe quel script npm, vous devez simplement taper npm run script_name dans votre terminal. Il existe quelques scripts spéciaux où vous pouvez omettre la partie run de la commande, mais il est toujours bon d’exécuter la commande complète. Pour exécuter le script build, tapez ce qui suit dans votre terminal :

npm run build

Vous verrez immédiatement le message suivant :

Output
> digital-ocean-tutorial@0.1.0 build your_file_path/digital-ocean-tutorial
> react-scripts build

Creating an optimized production build...
...

Cela vous indique que Create React App compile votre code en un bundle utilisable.

Lorsque cela sera terminé, vous verrez la sortie suivante  :

Output
...
Compiled successfully.

File sizes after gzip:

  39.85 KB  build/static/js/9999.chunk.js
  780 B      build/static/js/runtime-main.99999.js
  616 B     build/static/js/main.9999.chunk.js
  556 B     build/static/css/main.9999.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

Dressez la liste du contenu du projet et vous verrez quelques nouveaux répertoires :

ls -a

Output
build/
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

Vous disposez maintenant d’un répertoire build. Si vous avez ouvert le fichier .gitignore, vous avez pu constater que le répertoire build est ignoré par git. C’est parce que le répertoire build n’est qu’une version minifiée et optimisée des autres fichiers. Il n’est pas nécessaire d’utiliser le contrôle des versions puisque vous pouvez toujours exécuter la commande build. Vous allez regrader la sortie plus tard ; pour l’instant, il est temps de passer au test script.

Le script test

Le script test est l’un de ces scripts spéciaux qui ne nécessite pas le mot-clé run, mais fonctionne même si vous l’incluez. Ce script lancera un exécuteur de test appelé Jest. L’exécuteur de test recherche dans votre projet tous les fichiers portant une extension .spec.js ou .test.js, puis exécute ces fichiers.

Pour exécuter le script test, tapez la commande suivante :

npm test

Après l’exécution de ce script, votre terminal aura la sortie de la suite de tests et l’invite du terminal disparaîtra. Ils ressembleront à cela :

Output
 PASS  src/App.test.js
  ✓ renders learn react link (67ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.204s
Ran all test suites.

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.

Il y a quelques éléments à noter ici. Tout d’abord, comme indiqué précédemment, il détecte automatiquement tous les fichiers avec des extensions de test telles que .test.js et .spec.js. Dans ce cas, il n’y a qu’une seule suite de tests - c’est-à-dire un seul fichier avec une extension .test.js - et cette suite de tests ne contient qu’un seul test. Jest peut détecter des tests dans votre hiérarchie de code, de sorte que vous pouvez nicher des tests dans un répertoire et Jest les trouvera.

Deuxièmement, Jest n’exécute pas votre suite de tests une seule fois pour ensuite quitter. Au contraire, il continue à fonctionner dans le terminal. Si vous apportez des changements dans le code source, il exécutera à nouveau les tests.

Vous pouvez également limiter les tests que vous effectuez en utilisant l’une des options clavier. Si vous tapez o, par exemple, vous n’exécuterez les tests que sur des fichiers qui ont changé. Cela peut vous sauver beaucoup de temps à mesure que vos suites de tests grandissent.

Enfin, vous pouvez quitter l’exécuteur de test en tapant q. Faites cela maintenant pour récupérer votre invite de commande.

Le script eject

Le script final est npm eject. Ce script copie vos dépendances et vos fichiers de configuration dans votre projet, vous donnant un contrôle total sur votre code mais éjectant le projet de la chaîne d’outils intégrée de Create React App. Vous n’allez pas l’exécuter maintenant car, une fois que vous aurez exécuté ce script, vous ne pourrez pas annuler cette action et vous perdrez toutes les futures mises à jour de Create React App.

L’intérêt de Create React App est que vous n’avez pas à vous soucier d’une quantité importante de configurations. La création d’applications JavaScript modernes nécessite beaucoup d’outils, depuis les systèmes de construction, tels que Webpack, jusqu’aux outils de compilation, tels que Babel.  Create React App s’occupe de toute la configuration pour vous, donc s’éjecter signifie affronter cette complexité vous-même.

L’inconvénient de Create React App est que vous ne pourrez pas personnaliser entièrement le projet. Pour la plupart des projets, ce n’est pas un problème, mais si vous voulez un jour prendre le contrôle de tous les aspects du processus de construction, vous devrez éjecter le code. Cependant, comme mentionné précédemment, une fois que vous aurez éjecté le code, vous ne pourrez plus mettre à jour les nouvelles versions de Create React App, et vous devrez ajouter manuellement toute amélioration par vous-même.

À ce stade, vous avez exécuté des scripts pour construire et tester votre code. Au cours de l’étape suivante, vous allez démarrer le projet sur un serveur en direct.

Étape 3 — Démarrage du serveur

Au cours de cette étape, vous allez initialiser un serveur local et exécuter le projet dans votre navigateur.

Vous démarrez votre projet avec un autre script npm. Comme npm test, ce script n’a pas besoin de la commande run. Lorsque vous exécutez le script, vous démarrez un serveur local, vous exécutez le code du projet, vous lancez un watcher qui écoute les changements de code et vous ouvrez le projet dans un navigateur web.

Lancez le projet en tapant la commande suivante dans la racine de votre projet. Pour ce tutoriel, la racine de votre projet est le répertoire digital-ocean-tutorial Veillez à l’ouvrir dans un terminal ou un onglet séparé, car ce script continuera à fonctionner autant que vous l’autorisez :

npm start

Vous verrez un espace texte réservé pendant un bref instant avant le démarrage du serveur, ce qui donnera cette sortie :

Output
Compiled successfully!

You can now view digital-ocean-tutorial in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Si vous exécutez le script localement, il ouvrira le projet dans la fenêtre de votre navigateur et déplacera le focus du terminal vers le navigateur.

Si cela n’est pas le cas, vous pouvez visiter http://localhost:3000/ pour voir le site en action. Si vous avez déjà eu un autre serveur fonctionnant sur le port 3000, ce n’est pas grave. Create React App détectera le port disponible suivant et exécutera le serveur avec cela. En d’autres termes, si vous avez déjà un projet qui s’exécute sur le port 3000, ce nouveau projet démarrera sur le port 3001.

Si vous l’exécutez depuis un serveur distant, vous pouvez toujours voir votre site sans aucune configuration supplémentaire. L’adresse sera http://your_server_ip:3000. Si vous avez configuré un pare-feu, vous devrez ouvrir le port sur votre serveur distant.

Dans le navigateur, vous verrez le modèle de projet React suivant :

Tant que le script est en cours d’exécution, vous aurez un serveur local actif. Pour arrêter le script, fermez la fenêtre du terminal ou de l’onglet ou tapez CTRL+C or ⌘-+c dans la fenêtre ou l’onglet du terminal qui exécute votre script.

À ce stade, vous avez lancé le serveur et vous exécutez votre premier code React. Mais avant d’apporter des modifications au code JavaScript de React, vous allez voir comment React montre la page au départ.

Étape 4 — Modification de la page d’accueil

Au cours de cette étape, vous allez modifier le code dans le répertoire public/. Le répertoire public contient votre page HTML de base. C’est la page qui servira de racine pour votre projet. Vous allez rarement modifier ce répertoire à l’avenir, mais c’est la base pour laquelle le projet démarre et une partie cruciale d’un projet React.

Si vous avez annulé votre serveur, continuez et redémarrez-le avec npm start, puis ouvrez public/ dans votre éditeur de texte préféré dans une nouvelle fenêtre de terminal :

nano public/

Vous pouvez également liste les fichiers avec la commande ls :

ls public/

Vous verrez une liste de fichiers tels que ceci :

Output
favicon.ico
logo192.png
manifest.json
index.html
logo512.png
robots.txt

favicon.ico, logo192.png, et logo512.png sont des icônes qu’un utilisateur verrait soit dans l’onglet de son navigateur, soit sur son téléphone. Le navigateur sélectionnera les icônes de taille appropriée. Finalement, vous allez vouloir les remplacer par des icônes qui conviennent mieux à votre projet. Pour l’instant, vous pouvez les laisser telles qu’elles.

Le manifest.json est un ensemble structuré de métadonnées qui décrivent votre projet. Il liste entre autres l’icône qui sera utilisée pour les différentes options de taille.

Le fichier robots.txt est une informations pour les crawlers web. Il indique aux crawlers les pages qu’ils sont ou ne sont pas autorisés à indexer. Vous n’aurez pas besoin de modifier l’un des deux fichiers, sauf s’il y a une bonne raison de le faire. Par exemple, si vous souhaitez donner à certains utilisateurs une URL vers un contenu spécial que vous ne souhaitez pas facilement accessible, vous pouvez l’ajouter à robots.txt et il sera toujours accessible au public, mais non indexé par les moteurs de recherche.

Le fichier index.html est la racine de votre application. C’est le fichier que le serveur lit, et c’est le fichier que votre navigateur affichera. Ouvrez-le dans votre éditeur de texte et regardez.

Si vous travaillez depuis la ligne de commande, vous pouvez l’ouvrir avec la commande suivante :

nano public/index.html

Voici ce que vous verrez :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Le fichier est assez court. Il n’y a pas d’images ou de mots dans le <body>. C’est parce que React construit lui-même toute la structure HTML et l’injecte avec du JavaScript. Mais React doit savoir où injecter le code, et c’est le rôle d’index.html.

Dans votre éditeur de texte, modifiez l’étiquette <title> de React App à Sandbox :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    ...
    <title>Sandbox</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Enregistrez et quittez votre éditeur de texte. Vérifiez votre navigateur. Le titre est le nom situé dans l’onglet du navigateur. Il se mettra à jour automatiquement. Sinon, rafraîchissez la page et observez le changement.

Revenez maintenant à votre éditeur de texte. Tout projet React démarre à partir d’un élément racine. Il peut y avoir plusieurs éléments racine sur une page, mais il doit y en avoir au moins un. C’est ainsi que React sait où placer le code HTML généré. Trouvez l’élément <div id="root">. Il s’agit du div que React va utiliser pour toutes les futures mises à jour. Changez l’id de root à base :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    ...
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="base"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Enregistrez les changements.

Vous allez voir une erreur dans votre navigateur :

React cherchait un élément avec une id de root. Maintenant qu’il est parti, React ne peut pas démarrer le projet.

Changez le nom de base à root :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    ...
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Enregistrez et quittez index.html.

À ce stade, vous avez lancé le serveur et apporté un petit changement à la page HTML racine. Vous n’avez pas encore changé de code JavaScript. Dans la section suivante, vous allez mettre à jour le code JavaScript React.

Étape 5 — Modification de la balise de titre et du style

Au cours de cette étape, vous allez apporter votre premier changement à un composant React dans le répertoire src/. Vous allez apporter une petite modification au CSS et au code JavaScript qui se mettront automatiquement à jour dans votre navigateur grâce hot reloading intégré.

Si vous avez arrêté le serveur, assurez-vous de le redémarrer avec npm start. Maintenant, prenez le temps pour voir les parties du répertoire src/. Vous pouvez soit ouvrir le répertoire complet dans votre éditeur de texte préféré, soit vous pouvez lister le projet dans un terminal avec la commande suivante :

ls src/

Vous allez voir les fichiers suivants dans votre terminal ou éditeur de texte.

Output
App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setupTests.js

Examinons ces fichiers un par un.

Vous ne consacrerez pas beaucoup de temps au fichier serviceWorker.js au début, mais cela peut être important lorsque vous commencez à faire des applications web progressives.  Le service worker peut faire beaucoup de choses, y compris les notifications push et la mise en cache hors ligne, mais pour l’instant, il vaut mieux ne pas s’en occuper.

Les prochains fichiers à examiner sont setupTests.js et App.test.js. Elles sont utilisées pour des fichiers de test. En fait, lorsque vous avez exécuté npm test à l’étape 2, le script a exécuté ces fichiers. Le fichier setupTests.js est court ; il ne contient que quelques méthodes d'attente personnalisées.  Vous allez en apprendre davantage à ce sujet dans les futurs tutoriels de cette série.

Ouvrez App.test.js :

nano src/App.test.js

Lorsque vous l’avez ouvert, vous allez voir un test de base :

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Le test recherche la phrase learn react figurant dans le document. Si vous retournez au navigateur qui exécute votre projet, vous verrez la phrase sur la page. Le test de React est différent de la plupart des tests unitaires. Comme les composants peuvent inclure des informations visuelles (telles que le balisage) ainsi qu’une logique de manipulation des données, les tests unitaires traditionnels ne fonctionnent pas aussi facilement. Le test de React est plus proche d’une forme de tests fonctionnels ou d’intégration.

Ensuite, vous allez voir quelques fichiers styling : App.css, index.css, et logo.svg. Il y a plusieurs façons de travailler avec le style dans React, mais la plus simple est d’écrire du CSS simple puisque cela ne nécessite aucune configuration supplémentaire.

Il y a plusieurs fichiers CSS, car vous pouvez importer les styles dans un composant, comme il s’agissait d’un autre fichier JavaScript. Comme vous avez le pouvoir d’importer du CSS directement dans un composant, vous pouvez tout aussi bien diviser le CSS pour ne l’appliquer qu’à un composant individuel. Ce que vous faites, c’est séparer les problèmes. Vous ne gardez pas tout le CSS séparé du JavaScript. Au lieu de cela, vous gardez tous les CSS, JavaScript, balisage et images associés regroupés.

Ouvrez App.css dans votre éditeur de texte. Si vous travaillez depuis la ligne de commande, vous pouvez l’ouvrir avec la commande suivante :

nano src/App.css

Voici le code que vous allez voir :

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Il s’agit d’un fichier CSS standard sans préprocesseurs CSS spéciaux. Vous pouvez les ajouter plus tard si vous le souhaitez, mais au début, vous n’avez que du CSS simple. Create React App tente de rester neutre tout en offrant un environnement original.

Pour en revenir à App.css, un des avantages de l’utilisation de Create React App est qu’il surveille tous les fichiers, donc si vous faites une modification, vous la verrez dans votre navigateur sans avoir à recharger.

Pour voir cela en action, modifiez légèrement la couleur de fond dans App.css. Changez-le de #282c34 à bleu, puis enregistrez le fichier. Le style final du Dockerfile ressemblera à ceci :

.App {
  text-align: center;
}
...
.App-header {
  background-color: blue
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
...

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Regardez votre navigateur. Voici à quoi cela ressemblait avant :

Voici à quoi cela ressemblera après la modification :

Continuez et changez la couleur de fond pour revenir à 282c34.

.App {
  text-align: center;

...

.App-header {
  background-color: #282c34
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

...

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Enregistrez et quittez le fichier.

Vous avez fait une petite modification CSS. Maintenant, il est temps d’apporter des changements au code JavaScript de React. Commencez par ouvrir index.js.

nano src/index.js

Voici ce que vous allez voir :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

En haut, vous allez importer React, ReactDOM, index.css, App et serviceWorker. En important React, vous introduisez en fait du code pour convertir JSX en JavaScript. JSX sont les éléments de type HTML. Par exemple, remarquez à quoi lorsque vous utilisez App, vous le traitez comme un élément HTML <App />. Vous verrez cela plus en détail dans les futurs tutoriels de cette série.

ReactDOM est le code qui relie votre code React aux éléments de base, comme la page index.html que vous avez vue dans public/. Regardez la ligne surlignée suivante :

...
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
...
serviceWorker.unregister();

Ce code demande à React de trouver un élément avec une id de root et d’y injecter le code React. <App/> est votre élément racine,et tout se ramifiera à partir de là. C’est le point de départ pour tout futur code React.

En haut du fichier, vous verrez quelques importations. Vous importez index.css, mais vous n’en faites rien. En l’important, vous dites à Webpack, via les scripts React, d’inclure ce code CSS dans le bundle compilé final. Si vous ne l’importez pas, il n’apparaîtra pas.

Quittez src/index.js.

À ce stade, vous n’avez encore rien vu de ce que vous visualisez dans votre navigateur. Pour le voir, ouvrez App.js :

nano src/App.js

Le code dans ce fichier ressemblera à une série d’éléments HTML ordinaires. Voici ce que vous allez voir :

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Changez le contenu de la balise <p> de Edit <code>src/App.js</code> and save to reload. à Hello, world et enregistrez vos changements.

...

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
            Hello, world
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
...

Allez sur votre navigateur et vous verrez le changement :

Vous avez maintenant fait votre première mise à jour vers un composant React.

Avant d’y aller, observez quelques autres choses. Dans ce composant, vous importez le fichier logo.svg et vous l’attribuez à une variable. Ensuite, dans l’élément <img>, vous ajoutez ce code comme la src.

Il y a un certain nombre de choses qui se passent ici. Regardez l’élément img :

...
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
            Hello, world
        </p>
...

Remarquez comment vous passez le logo dans des accolades. Chaque fois que vous passez des attributs qui ne sont pas des chaînes de caractères ou des chiffres, vous devez utiliser les accolades. React traitera ceux-ci comme du JavaScript au lieu de chaînes. Dans ce cas, vous n’importez pas réellement l’image, mais vous la référencez. Lorsque Webpack construit le projet, il traite l’image et place la source à l’endroit approprié.

Quittez l’éditeur de texte.

Si vous regardez les éléments DOM dans votre navigateur, vous verrez qu’il ajoute un chemin d’accès. Si vous utilisez Chrome, vous pouvez inspecter l’élément en cliquant sur l’élément avec le bouton droit de la souris et en sélectionnant Inspecter.

Voici à quoi cela ressemblera dans le navigateur :

Le DOM a cette ligne :

<img src="/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">

Votre code sera légèrement différent puisque le logo aura un nom différent. Webpack veut s’assurer que le chemin de l’image est unique. Donc même si vous importez des images avec le même nom, elles seront enregistrées avec des chemins différents.

À ce stade, vous avez apporté un petit changement au code JavaScript de React. Dans l’étape suivante, vous utiliserez la commande build pour minifier le code dans un petit fichier qui peut être déployé sur un serveur.

Étape 6 — Construction du projet

Au cours de cette étape, vous allez intégrer le code dans un bundle qui peut être déployé sur des serveurs externes.

Revenez à votre terminal et construisez le projet. Vous avez exécuté cette commande avant, mais à titre de rappel, cette commande va exécuter le script build. Il créera un nouveau répertoire avec les fichiers combinés et minifiés. Pour exécuter le build, exécutez la commande suivante à partir de la racine de votre projet :

npm run build

Il y aura un temps d’attente à mesure que le code se compile et quand il sera terminé, vous aurez un nouveau répertoire appelé build/.

Ouvrez build/index.html dans un éditeur de texte.

nano build/index.html

Vous verrez quelque chose de ce genre :

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/static/css/main.d1b05096.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],c=r[2],i=0,s=[];i<p.length;i++)a=p[i],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this["webpackJsonpdo-create-react-app"]=this["webpackJsonpdo-create-react-app"]||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var c=0;c<p.length;c++)r(p[c]);var f=l;t()}([])</script><script src="/static/js/2.c0be6967.chunk.js"></script><script src="/static/js/main.bac2dbd2.chunk.js"></script></body></html>

Le répertoire build prend tout votre code, le compile et le minifie dans le plus petit état utilisable possible. Peu importe qu’un humain puisse le lire, puisqu’il ne s’agit pas d’un code destiné au public. Minifié ainsi, le code prendra moins de place tout en pouvant continuer à fonctionner. Contrairement à certains langages comme Python, l’espace blanc ne change pas la façon dont l’ordinateur interprète le code.

Conclusion

Dans ce tutoriel, vous avez créé votre première application React, configuré votre projet à l’aide des outils de construction JavaScript sans avoir à entrer dans les détails techniques. C’est l’intérêt de Create React App : vous n’avez pas besoin de tout savoir pour commencer. Il vous permet d’ignorer les étapes de construction compliquées afin que vous puissiez vous concentrer exclusivement sur le code de React.

Vous avez appris les commandes pour démarrer, tester et construire un projet. Vous utiliserez ces commandes régulièrement, alors prenez-en note pour les futurs tutoriels. Plus important encore, vous avez mis à jour votre premier composant React.

Si vous souhaitez voir React en action, essayez notre tutoriel Comment afficher les données de l’API DigitalOcean avec React.