One place for hosting & domains

      projet

      Comment mettre en place un projet Node avec Typescript


      Introduction

      Node est un environnement d’exécution qui permet d’écrire du Javascript côté serveur. Il a été largement adopté depuis sa publication en 2011.  L’écriture du JavaScript côté serveur peut être difficile car la base de code se développe en raison de la nature du langage JavaScript ; dynamique et faiblement dactylographié.

      Les développeurs qui utilisent JavaScript à partir d’autres langues se plaignent souvent de l’absence de caractères statiques forts, mais c’est là que TypeScript intervient, pour combler cette lacune.

      TypeScript est un super-ensemble de JavaScript typé (facultatif) qui peut aider à construire et à gérer des projets JavaScript à grande échelle. Il peut être considéré comme du JavaScript avec des caractéristiques supplémentaires comme un fort typage statique, une compilation et une programmation orientée objet.

      Remarque : Le langage TypeScript est techniquement un super-ensemble de JavaScript, ce qui signifie que tout le code JavaScript est un code TypeScript valide.

      Voici quelques avantages de l’utilisation de TypeScript :

      1. Typage statique optionnel.
      2. Inférence de type.
      3. Capacité à utiliser des interfaces.

      Dans ce tutoriel, vous allez mettre en place un projet Node avec TypeScript. Vous créerez une application Express en utilisant le langage TypeScript et la transposerez dans un code JavaScript soigné et fiable.

      Conditions préalables

      Avant de commencer ce guide, vous devez avoir installé Node.js sur votre machine.  Vous pouvez y parvenir en suivant le guide Comment installer Node.js et créer un environnement de développement local guide pour votre système d’exploitation.

      Étape 1 – Initialisation d’un projet npm

      Pour commencer, créez un nouveau dossier nommé node_project et accédez à ce répertoire.

      • mkdir node_project
      • cd node_project

      Ensuite, initialisez-le en tant que projet npm :

      Après avoir lancé npm init, vous devrez fournir à npm des informations sur votre projet.  Si vous préférez laisser le npm prendre des valeurs par défaut raisonnables, vous pouvez ajouter le drapeau y pour ignorer les invites d’informations supplémentaires :

      Maintenant que votre espace de projet est mis en place, vous êtes prêt à passer à l’installation des dépendances nécessaires.

      Étape 2 — Installer des dépendances

      Avec un projet npm nu initialisé, l’étape suivante consiste à installer les dépendances nécessaires au lancement de TypeScript.

      Exécutez les commandes suivantes depuis le répertoire de votre projet pour installer les dépendances :

      Le drapeau -D est le raccourci pour --save-dev.  Vous pouvez en savoir plus sur ce drapeau dans la documentation du npmjs.

      Il est maintenant temps d’installer le framework Express :

      La deuxième commande installe Express** pour la prise en charge de TypeScript. Les types en TypeScript sont des fichiers, normalement avec une extension de .d.ts. Les fichiers sont utilisés pour fournir des informations de type sur une API, dans ce cas le framework Express.

      Ce paquet est nécessaire car TypeScript et Express sont des paquets indépendants. Sans le paquet @types/express, il n’y a aucun moyen pour TypeScript de connaître les types de classes Express.

      Étape 3 – Configurer TypeScript

      Dans cette section, vous allez paramétrer TypeScript et configurer le linting pour TypeScript. TypeScript utilise un fichier appelé tsconfig.json pour configurer les options du compilateur pour un projet. Créez un fichier tsconfig.json dans le root du répertoire du projet et collez-le dans le snippet suivant :

      tsconfig.json

      {
        "compilerOptions": {
          "module": "commonjs",
          "esModuleInterop": true,
          "target": "es6",
          "moduleResolution": "node",
          "sourceMap": true,
          "outDir": "dist"
        },
        "lib": ["es2015"]
      }
      

      Passons en revue certaines des clés du snippet JSON ci-dessus :

      • module: Spécifie la méthode de génération du code du module. Node utilise commonjs.
      • target: Spécifie le niveau du langage de sortie.
      • moduleResolution: Cela aide le compilateur à déterminer à quoi se réfère une importation. La valeur node imite le mécanisme de résolution des modules de Node.
      • outDir : Il s’agit de l’emplacement où les fichiers .js sont produits après la transpilation.  Dans ce tutoriel, vous le sauvegarderez sous dist.

      Une alternative à la création et au remplissage manuels du fichier tsconfig.json consiste à exécuter la commande suivante :

      Cette commande va générer un fichier tsconfig.json bien commenté.

      Pour en savoir plus sur les options de valeurs clés disponibles, la documentation officielle de TypeScript offre des explications sur chaque option.

      Vous pouvez maintenant configurer le linting TypeScript pour le projet. Dans un terminal fonctionnant au root du répertoire de votre projet, que ce tutoriel a établi comme node_project, exécutez la commande suivante pour générer un fichier tslint.json :

      • ./node_modules/.bin/tslint --init

      Ouvrez le nouveau site tslint.json et ajoutez la règle non-console en conséquence :

      tslint.json

      {
        "defaultSeverity": "error",
        "extends": ["tslint:recommended"],
        "jsRules": {},
        "rules": {
          "no-console": false
        },
        "rulesDirectory": []
      }
      

      Par défaut, le linter TypeScript empêche l’utilisation du débogage par console d’où la nécessité d’indiquer explicitement au linter de révoquer la règle par défaut no-console.

      Étape 4 – Mise à jour du fichier package.json

      À ce stade du tutoriel, vous pouvez soit exécuter individuellement des fonctions dans le terminal, soit créer un script npm pour les exécuter.

      Dans cette étape, vous créerez un script start qui compilera et transpilera le code TypeScript, puis lancera l’application .js résultante.

      Ouvrez le fichier package.json et mettez-le à jour comme il se doit :

      package.json

      {
        "name": "node-with-ts",
        "version": "1.0.0",
        "description": "",
        "main": "dist/app.js",
        "scripts": {
          "start": "tsc && node dist/app.js",
          "test": "echo "Error: no test specified" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "@types/express": "^4.16.1",
          "tslint": "^5.12.1",
          "typescript": "^3.3.3"
        },
        "dependencies": {
          "express": "^4.16.4"
        }
      }
      

      Dans le snippet ci-dessus, vous avez mis à jour le chemin principal et ajouté la commande start à la section scripts. En regardant la commande start, vous verrez que la commande tsc est d’abord exécutée, puis la commande node.  Cette opération permet de compiler et d’exécuter la sortie générée avec node.

      La commande tsc demande à TypeScript de compiler l’application et de placer la sortie .js générée dans le répertoire spécifié outDir tel qu’il est défini dans le fichier tsconfig.json.

      Étape 5 – Créer et faire fonctionner un serveur Express de base

      Maintenant que TypeScript et son linter sont configurés, il est temps de construire un serveur Node Express.

      Tout d’abord, créez un dossier src dans le root du répertoire de votre projet :

      Créez ensuite un fichier nommé app.ts dans celui-ci :

      À ce stade, la structure du dossier devrait ressembler à ceci :

      ├── node_modules/
      ├── src/
        ├── app.ts
      ├── package-lock.json
      ├── package.json
      ├── tsconfig.json
      ├── tslint.json
      

      Ouvrez le fichier app.ts avec un éditeur de texte de votre choix et collez le code suivant :

      src/app.ts

      import express from 'express';
      
      const app = express();
      const port = 3000;
      app.get('/', (req, res) => {
        res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
        if (err) {
          return console.error(err);
        }
        return console.log(`server is listening on ${port}`);
      });
      

      Le code ci-dessus crée un serveur Node qui écoute les requêtes sur le port 3000.  Lancez l’application en utilisant la commande suivante :

      S’il fonctionne correctement, un message sera enregistré sur le terminal :

      Output

      • server is listening on 3000

      Maintenant, vous pouvez visiter http://localhost:3000 dans votre navigateur et vous devriez voir le message :

      Output

      • The sedulous hyena ate the antelope!

      Fenêtre du navigateur avec le message : The sedulous hyena ate the antelope!

      Ouvrez le fichier dist/app.js et vous trouverez la version transposée du code TypeScript :

      dist/app.js

      "use strict";
      
      var __importDefault = (this && this.__importDefault) || function (mod) {
          return (mod && mod.__esModule) ? mod : { "default": mod };
      };
      Object.defineProperty(exports, "__esModule", { value: true });
      const express_1 = __importDefault(require("express"));
      const app = express_1.default();
      const port = 3000;
      app.get('/', (req, res) => {
          res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
          if (err) {
              return console.error(err);
          }
          return console.log(`server is listening on ${port}`);
      });
      
      //# sourceMappingURL=app.js.map
      

      À ce stade, vous avez configuré avec succès votre projet Node pour utiliser TypeScript.

      Conclusion

      Dans ce tutoriel, vous avez appris pourquoi TypeScript est utile pour écrire un code JavaScript fiable.  Vous avez également découvert certains des avantages à travailler avec TypeScript.

      Enfin, vous avez mis en place un projet Node en utilisant le framework Express, mais vous avez compilé et exécuté le projet en utilisant TypeScript.



      Source link

      Comment ajouter les tests unitaires à votre projet Django


      L’auteur a choisi le Open Internet/Free Speech Fund pour recevoir un don dans le cadre du programme Write for Donations.

      Introduction

      Il est presque impossible de construire des sites web qui fonctionnent parfaitement du premier coup sans erreurs. C’est pourquoi vous devez tester votre application web pour trouver ces erreurs et y remédier de manière proactive. Afin d’améliorer l’efficacité des tests, il est courant de décomposer les tests en unités qui testent des fonctionnalités spécifiques de l’application web. Cette pratique est appelée les tests unitaires.   Il est plus facile de détecter les erreurs, car les tests se concentrent sur de petites parties (unités) de votre projet indépendamment des autres parties.

      Tester un site web peut être une tâche complexe à entreprendre car il est constitué de plusieurs couches de logique comme le traitement des requêtes HTTP, la validation des formulaires et les modèles de rendu. Cependant, Django fournit un ensemble d’outils qui permettent de tester votre application web en toute transparence.   Dans Django, la façon préférée d’écrire des tests est d’utiliser le module Python unittest, bien qu’il soit possible d’utiliser d’autres cadres de test. 

      Dans ce tutoriel, vous allez mettre en place une suite de tests dans votre projet Django et écrire des tests unitaires pour les modèles et les vues de votre application. Vous effectuerez ces tests, analyserez leurs résultats et apprendrez comment trouver les causes des échecs.

      Conditions préalables

      Avant de commencer ce tutoriel, vous aurez besoin des éléments suivants :

      Étape 1 – Ajouter une séquence de tests à votre demande Django

      Une séquence de tests dans Django est une collection de tous les scénarios de test de toutes les applications de votre projet. Pour permettre à l’utilitaire de test de Django de découvrir les scénarios de test que vous avez, vous écrivez les scénarios de test dans des scripts dont le nom commence par test.   Au cours de cette étape, vous allez créer la structure des répertoires et des fichiers de votre séquence de tests, et y créer un scénario de test vide.

      Si vous avez suivi la série de tutoriels Django Development, vous aurez une application Django appelée blogsite.

      Créons un dossier pour contenir tous nos scripts de test. Tout d’abord, activez l’environnement virtuel :

      • cd ~/my_blog_app
      • . env/bin/activate

      Ensuite, naviguez vers le répertoire appblogsite, le dossier qui contient les fichiers models.py et views.py, puis créez un nouveau dossier appelé tests :

      • cd ~/my_blog_app/blog/blogsite
      • mkdir tests

      Ensuite, vous transformerez ce dossier en un paquet Python, ajoutez donc un fichier __init__.py :

      • cd ~/my_blog_app/blog/blogsite/tests
      • touch __init__.py

      Vous allez maintenant ajouter un fichier pour tester vos modèles et un autre pour tester vos vues :

      • touch test_models.py
      • touch test_views.py

      Enfin, vous allez créer un scénario de test vide dans test_models.py. Vous devrez importer la classe Django TestCase et en faire une super classe de votre propre classe de test case. Plus tard, vous ajouterez des méthodes à ce scénario de test pour tester la logique de vos modèles. Ouvrez le fichier test_models.py :

      Ajoutez maintenant le code suivant au fichier :

      ~/my_blog_app/blog/blogsite/tests/test_models.py

      from django.test import TestCase
      
      class ModelsTestCase(TestCase):
          pass
      

      Vous avez maintenant ajouté avec succès une séquence de tests à l’appli blogsite. Ensuite, vous remplirez les détails du modèle de cas test vide que vous avez créé ici.

      Étape 2 – Tester votre code Python

      Dans cette étape, vous allez tester la logique du code écrit dans le fichier models.py. En particulier, vous testerez la méthode de sauvegarde du modèle Post afin de vous assurer qu’il crée la bonne portion du titre d’un message lorsqu’il est appelé. 

      Commençons par regarder le code que vous avez déjà dans votre fichier models.py pour la méthode de sauvegarde du modèle Post :

      • cd ~/my_blog_app/blog/blogsite
      • nano models.py

      Vous verrez ce qui suit :

      ~/my_blog_app/blog/blogsite/models.py

      class Post(models.Model):
          ...
          def save(self, *args, **kwargs):
              if not self.slug:
                  self.slug = slugify(self.title)
              super(Post, self).save(*args, **kwargs)
          ...
      

      On peut voir qu’il vérifie si le message sur le point d’être sauvegardé a une valeur de slug, et si ce n’est pas le cas, il appelle slugify pour lui créer une valeur de slug. C’est le type de logique que vous pourriez vouloir tester pour vous assurer que les slugs sont effectivement créés lors de la sauvegarde d’un message.

      Fermez le dossier.

      Pour le tester, retournez à test_models.py :

      Mettez-le ensuite à jour en ajoutant les parties surlignées :

      ~/my_blog_app/blog/blogsite/tests/test_models.py

      from django.test import TestCase
      from django.template.defaultfilters import slugify
      from blogsite.models import Post
      
      
      class ModelsTestCase(TestCase):
          def test_post_has_slug(self):
              """Posts are given slugs correctly when saving"""
              post = Post.objects.create(title="My first post")
      
              post.author = "John Doe"
              post.save()
              self.assertEqual(post.slug, slugify(post.title))
      

      Cette nouvelle méthode test_post_has_slug crée un nouvel article avec le titre « My first post », puis donne à l’article un auteur et l’enregistre. Ensuite, à l’aide de la méthode assertEqual du module Python unittest, il vérifie si le slug du message est correct. La méthode assertEqual vérifie si les deux arguments qui lui sont transmis sont égaux tels que déterminés par l’opérateur « == » et signale une erreur s’ils ne le sont pas.

      Sauvegarder et quitter test_models.py.

      Voici un exemple de ce qui peut être testé. Plus vous ajoutez de logique à votre projet, plus il y a de choses à tester. Si vous ajoutez plus de logique à la méthode de sauvegarde ou créez de nouvelles méthodes pour le modèle Post, vous voudriez ajouter plus de tests ici. Vous pouvez les ajouter à la méthode test_post_has_slug ou créer de nouvelles méthodes de test, mais leurs noms doivent commencer par test.

      Vous avez créé avec succès un cas test pour le modèle Post où vous avez affirmé que les slugs sont correctement créés après la sauvegarde. Dans l’étape suivante, vous rédigerez un scénario de test pour tester les vues.

      Étape 3 – Utiliser le client test de Django

      Dans cette étape, vous allez écrire un scénario de test qui teste une vue en utilisant le client de test Django. Le test client est une classe Python qui agit comme un navigateur web factice, vous permettant de tester vos vues et d’interagir avec votre application Django de la même manière qu’un utilisateur le ferait. Vous pouvez accéder au client test en vous référant à self.client dans vos méthodes de test. Par exemple, créons un cas test dans test_views.py Tout d’abord, ouvrez le fichier test_views.py :

      Ajoutez ensuite ce qui suit :

      ~/my_blog_app/blog/blogsite/tests/test_views.py

      from django.test import TestCase
      
      
      class ViewsTestCase(TestCase):
          def test_index_loads_properly(self):
              """The index page loads properly"""
              response = self.client.get('your_server_ip:8000')
              self.assertEqual(response.status_code, 200)
      

      Le ViewsTestCase contient une méthode test_index_loads_properly qui utilise le client de test Django pour visiter la page d’index du site (http://your_server_ip:8000, où your_server_ip est l’adresse IP du serveur que vous utilisez). Ensuite, la méthode de test vérifie si la réponse a un code de statut de 200, ce qui signifie que la page a répondu sans aucune erreur. Vous pouvez donc être sûr que lorsque l’utilisateur se rendra sur le site, il répondra lui aussi sans erreur.

      Outre le code de statut, vous pouvez lire d’autres propriétés de la réponse du client de test que vous pouvez tester dans la page des réponses de test de la documentation de Django.

      Au cours de cette étape, vous avez créé un scénario de test pour vérifier que la vue rendant la page d’index fonctionne sans erreur. Il y a maintenant deux scénarios de test dans votre séquence de tests. Au cours de l’étape suivante, vous les exécuterez pour voir leurs résultats.

      Étape 4 – Effectuer vos tests

      Maintenant que vous avez terminé la construction d’une séquence de tests pour le projet, il est temps d’exécuter ces tests et de voir leurs résultats. Pour effectuer les tests, naviguez dans le dossier blog (contenant le fichier manage.py de l’application) :

      Puis, exécutez-les :

      Vous verrez un résultat similaire à ce qui suit dans votre terminal :

      Output

      Creating test database for alias 'default'... System check identified no issues (0 silenced). .. ---------------------------------------------------------------------- Ran 2 tests in 0.007s OK Destroying test database for alias 'default'...

      Dans cette sortie, il y a deux points .., dont chacun représente un cas de test réussi. Vous allez maintenant modifier test_views.py pour déclencher un test d’échec. Ouvrez le fichier avec :

      Ensuite, changez le code en surbrillance pour :

      ~/my_blog_app/blog/blogsite/tests/test_views.py

      from django.test import TestCase
      
      
      class ViewsTestCase(TestCase):
          def test_index_loads_properly(self):
              """The index page loads properly"""
              response = self.client.get('your_server_ip:8000')
              self.assertEqual(response.status_code, 404)
      

      Ici, vous avez changé le code de statut de 200 à 404. Maintenant, refaites le test à partir de votre répertoire avec manage.py :

      Vous verrez la sortie suivante :

      Output

      Creating test database for alias 'default'... System check identified no issues (0 silenced). .F ====================================================================== FAIL: test_index_loads_properly (blogsite.tests.test_views.ViewsTestCase) The index page loads properly ---------------------------------------------------------------------- Traceback (most recent call last): File "~/my_blog_app/blog/blogsite/tests/test_views.py", line 8, in test_index_loads_properly self.assertEqual(response.status_code, 404) AssertionError: 200 != 404 ---------------------------------------------------------------------- Ran 2 tests in 0.007s FAILED (failures=1) Destroying test database for alias 'default'...

      Vous voyez qu’il y a un message d’échec descriptif qui vous indique le script, le cas de test et la méthode qui a échoué. Il vous indique également la cause de l’échec, le code de statut n’étant pas égal à 404 dans ce cas, avec le message AssertionError: 200 !  404. L’AssertionError est ici soulevée à la ligne de code surlignée dans le fichier test_views.py :

      ~/my_blog_app/blog/blogsite/tests/test_views.py

      from django.test import TestCase
      
      
      class ViewsTestCase(TestCase):
          def test_index_loads_properly(self):
              """The index page loads properly"""
              response = self.client.get('your_server_ip:8000')
              self.assertEqual(response.status_code, 404)
      

      Il vous indique que l’affirmation est fausse, c’est-à-dire que le code de statut de réponse (200) n’est pas ce à quoi on s’attendait (404). Précédant le message d’échec, vous pouvez voir que les deux points .. sont maintenant passés à . F, qui vous indique que le premier cas test a réussi alors que le second ne l’a pas fait.

      Conclusion

      Dans ce tutoriel, vous avez créé une suite de tests dans votre projet Django, ajouté des scénarios de test au modèle de test et à la logique de visualisation, appris comment exécuter des tests et analysé les résultats des tests. Dans un deuxième temps, vous pouvez créer de nouveaux scripts de test pour le code Python qui n’est pas dansmodels.py et views.py.

      Voici quelques articles qui peuvent s’avérer utiles pour créer et tester des sites web avec Django :

      Vous pouvez également consulter notre page thématique sur Django pour d’autres tutoriels et projets.



      Source link

      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 :

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

      Remarque : il existe un autre gestionnaire de paquets pour JavaScript appelé yarn. Il est soutenu par Facebook et fait beaucoup de choses identiques à npm. À l’origine, yarn fournissait de nouvelles fonctionnalités telles que les fichiers de verrouillage, mais celles-ci sont maintenant également implémentées dans npm. yarn comprend également quelques autres fonctionnalités telles que la mise en cache hors ligne. D’autres différences peuvent être trouvées dans la documentation de yarn.

      Si vous avez déjà installé yarn sur votre système, vous verrez une liste de commandes yarn telles que yarn start qui fonctionnent de la même manière que les commandes npm. Vous pouvez exécuter des commandes npm même si yarn est installé. Si vous préférez yarn, remplacez simplement npm par yarn dans toutes commandes futures. Les résultats seront les mêmes.

      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 :

      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é :

      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 :

      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 :

      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 :

      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 :

      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 :

      Modèle de projet React

      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 :

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

      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 :

      Voici ce que vous verrez :

      digital-ocean-tutorial/public/index.html

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <link rel="icon" href="https://www.digitalocean.com/%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 "https://www.digitalocean.com/favicon.ico" or "favicon.ico", "https://www.digitalocean.com/%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 :

      digital-ocean-tutorial/public/index.html

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <link rel="icon" href="https://www.digitalocean.com/%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 :

      digital-ocean-tutorial/public/index.html

      <!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 :

      Message d'erreur indiquant "Le conteneur cible n'est pas un élément DOM"

      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 :

      digital-ocean-tutorial/public/index.html

      <!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 :

      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 :

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

      digital-ocean-tutorial/src/App.test.js

      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 :

      Voici le code que vous allez voir :

      digital-ocean-tutorial/src/App.css

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

      digital-ocean-tutorial/src/App.css

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

      React app avec un arrière-plan sombre

      Voici à quoi cela ressemblera après la modification :

      React app avec un arrière-plan bleu

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

      digital-ocean-tutorial/src/App.css

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

      Voici ce que vous allez voir :

      digital-ocean-tutorial/src/index.js

      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 :

      digital-ocean-tutorial/src/index.js

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

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

      digital-ocean-tutorial/src/App.js

      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.

      digital-ocean-tutorial/src/App.js

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

      React app avec "Hello, world" dans la balise paragraphe

      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 :

      digital-ocean-tutorial/src/App.js

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

      Inspecter un élément à l'aide des outils de développement de chrome

      Le DOM a cette ligne :

      <img src="https://www.digitalocean.com/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 :

      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.

      Vous verrez quelque chose de ce genre :

      digital-ocean-tutorial/build/index.html

      <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="https://www.digitalocean.com/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="http://www.digitalocean.com/logo192.png"/><link rel="manifest" href="http://www.digitalocean.com/manifest.json"/><title>React App</title><link href="http://www.digitalocean.com/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.



      Source link