Créer une application React: préparez rapidement les projets React

Démarrer un nouveau projet React n’est pas aussi simple. Au lieu de plonger directement dans le code et de donner vie à votre application, vous devez passer du temps à configurer les bons outils de construction pour mettre en place un environnement de développement local, des tests unitaires et une version de production. Heureusement, l'aide est à portée de main sous la forme de l'application Create React.

Create-React-App est un outil de ligne de commande de Facebook qui vous permet de générer un nouveau projet React et d'utiliser une version de pack web préconfigurée Pour le developpement. Il fait depuis longtemps partie intégrante de l'écosystème React qui élimine le besoin de maintenir des pipelines de construction complexes dans votre projet, vous permettant de vous concentrer sur l'application elle-même.

Comment fonctionne Create React App?

Create React App is un outil autonome qui peut être exécuté à l'aide de npm ou de Yarn.

Vous pouvez générer et exécuter un nouveau projet à l'aide de npm simplement avec quelques commandes:

 npx create-react-app new-app
 cd  nouvelle application
 npm  début

Si vous préférez Yarn, vous pouvez le faire comme ceci:

  yarn  create react-app new-app
 cd  nouvelle application
 fil  début

Create React App configurera la structure de projet suivante:

 new-app
├── .gitignore
├── node_modules
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── README.md
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reportWebVitals.js
│ └── setupTests.js
└── yarn.lock

Il ajoutera également un package react-scripts à votre projet qui contiendra tous les scripts de configuration et de construction. En d'autres termes, votre projet dépend de react-scripts pas de create-react-app lui-même. Une fois l'installation terminée, vous pouvez lancer le serveur de développement et commencer à travailler sur votre projet.

Fonctionnalités de base

Serveur de développement local

La première chose dont vous aurez besoin est un environnement de développement local. Lancer npm start lancera un serveur de développement Webpack avec un observateur qui rechargera automatiquement l'application une fois que vous aurez changé quelque chose. À partir de la version 4, l'application Create React prend en charge l'actualisation rapide de React comme alternative au remplacement de module à chaud. Comme son prédécesseur, cela nous permet d'actualiser rapidement certaines parties de l'application après avoir apporté des modifications à la base de code, mais présente également de nouvelles fonctionnalités. Fast Reload essaiera de recharger uniquement la partie modifiée de l'application, conservera l'état des composants fonctionnels et des hooks, et rechargera automatiquement l'application après avoir corrigé une erreur de syntaxe.

Vous pouvez également servir votre application via HTTPS, en définissant le HTTPS variable à true avant d'exécuter le serveur.

L'application sera générée avec de nombreuses fonctionnalités intégrées.

ES6 et ES7

L'application est livrée avec son propre Babel preset – babel-preset-react-app – pour prendre en charge un ensemble de fonctionnalités ES6 et ES7. Certaines des fonctionnalités prises en charge sont:

• Async / await
• Propriétés de repos / propagation d'objet
• Importation dynamique ()
• Champs de classe et propriétés statiques

Notez que Create React App ne fournit aucun polyfill pour

Importation d'actifs

Vous pouvez importer des fichiers CSS, des images ou des polices à partir de vos modules JavaScript qui vous permettent de regrouper les fichiers utilisés dans votre application . Une fois l'application créée, Create React App copiera ces fichiers dans le dossier de construction. Voici un exemple d'importation d'image:

 import  image  from   './ image.png' ; 

 console .  log  (  image ) ; 

Vous pouvez également utiliser cette fonctionnalité en CSS:

 .image   {
   background-image :   url  ( ./ image.png  )  ; 
} 

Styling

Comme mentionné dans la section précédente, Create React App vous permet d'ajouter des styles en important simplement les fichiers CSS requis. Lors de la construction de l'application, tous les fichiers CSS seront concaténés en un seul paquet et ajoutés au dossier de construction.

Create React App prend également en charge les modules CSS . Par convention, les fichiers nommés *. Module.css sont traités comme des modules CSS. Cette technique nous permet d'éviter les conflits de sélecteurs CSS, puisque Create React App créera des sélecteurs de classe uniques dans les fichiers CSS résultants.

Alternativement, si vous préférez utiliser des préprocesseurs CSS, vous pouvez importer Sass . fichiers scss . Cependant, vous devrez installer le package node-sass séparément.

De plus, Create React App fournit un moyen d'ajouter CSS Resets en ajoutant @ import- normalize; n'importe où dans vos fichiers CSS. Les styles subissent également un post-traitement, ce qui les minimise, ajoute des préfixes de fournisseur à l'aide de l'Autoprefixer et remplit des fonctions non prises en charge, telles que la propriété all les propriétés personnalisées et les plages de requêtes multimédias.

Running Unit Tests

] L'exécution de npm test lancera des tests en utilisant Jest et démarrera un observateur pour les réexécuter chaque fois que vous changez quelque chose:

 PASS src / App.test.js
  ✓ rend learn react  lien   ( 19  ms ) 

Suites de tests:  1  réussie,  1  au total
Tests:  1  réussi,  1  total
Instantanés:  0  au total
Heure:  0,995  s
A exécuté toutes les suites de test  .

Utilisation de la montre
 ›Appuyez sur f pour exécuter uniquement les tests ayant échoué.
 ›Appuyez sur o pour exécuter uniquement les tests liés aux fichiers modifiés.
 ›Appuyez sur q pour quitter le mode  montre .
 ›Appuyez sur p pour filtrer par un modèle d'expression régulière de nom de fichier.
 ›Appuyez sur t pour filtrer par un modèle d'expression régulière de nom  test .
 ›Appuyez sur Entrée pour lancer un test  .

Jest est un testeur également développé par Facebook comme alternative à Mocha ou Karma. Il exécute les tests dans un environnement Node au lieu d'un vrai navigateur, mais fournit certains des globaux spécifiques au navigateur en utilisant jsdom .

Jest est également intégré à votre système de contrôle de version et par défaut ne fonctionnera que tests sur les fichiers modifiés depuis votre dernier commit. Pour plus d'informations, reportez-vous à « Comment tester des composants de réaction à l'aide de Jest ».

ESLint

Pendant le développement, votre code sera également exécuté via ESLint un fichier statique analyseur de code qui vous aidera à repérer les erreurs pendant le développement.

Création d'un bundle de production

Lorsque vous avez enfin quelque chose à déployer, vous pouvez créer un bundle de production en utilisant npm run build . Cela générera une version optimisée de votre application, prête à être déployée dans votre environnement. Les artefacts générés seront placés dans le dossier build:

 build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── statique
    ├── css
    │ ├── main.ab7136cd.chunk.css
    │ └── main.ab7136cd.chunk.css.map
    ├── js
    │ ├── 2.8daf1b57.chunk.js
    │ ├── 2.8daf1b57.chunk.js.LICENSE.txt
    │ ├── 2.8daf1b57.chunk.js.map
    │ ├── 3.d75458f9.chunk.js
    │ ├── 3.d75458f9.chunk.js.map
    │ ├── main.1239da4e.chunk.js
    │ ├── main.1239da4e.chunk.js.map
    │ ├── runtime-main.fb72bfda.js
    │ └── runtime-main.fb72bfda.js.map
    └── médias
        └── logo.103b5fa1.svg

Déploiement

Étant donné que la construction de votre application Create React App se compose uniquement de fichiers statiques, vous pouvez les déployer de différentes manières dans votre environnement distant. Vous pouvez utiliser un serveur Node.js si vous exécutez dans un environnement Node.js, ou servir l'application à l'aide d'un autre serveur Web, tel que NGINX.

La section de déploiement dans la documentation officielle fournit une vue d'ensemble du déploiement de l'application sur Azure, AWS, Heroku, Netlify et d'autres environnements d'hébergement populaires.

Fonctionnalités de développement

Variables d'environnement

Vous pouvez utiliser des variables d'environnement Node pour injecter des valeurs dans votre code à l'adresse temps de construction. Create React App recherchera automatiquement toutes les variables d'environnement commençant par REACT_APP_ et les rendra disponibles sous le global process.env . Ces variables peuvent être dans un fichier .env pour plus de commodité:

  REACT_APP_BACKEND  =  http://my-api.com
 REACT_APP_BACKEND_USER  =  racine

Vous pouvez ensuite les référencer dans votre code:

 fetch  ( { process .  env .  REACT_APP_SECRET_CODE }  ] /  endpoint ) 

Proxying to a Back End

Si votre application doit fonctionner avec un back-end distant, vous devrez peut-être être en mesure de proxy des requêtes pendant le développement local pour contourner CORS. Cela peut être configuré en ajoutant un champ proxy à votre fichier package.json :

  "proxy" :   "http: // localhost: 4000" ,

De cette façon, le serveur transmettra toute demande qui ne pointe pas vers un fichier statique vers l'adresse donnée.

Division de code

L'application Create React prend en charge la division de code à l'aide de dynamic import () . Au lieu de renvoyer les valeurs exportées par le module, il renverra à la place une promesse qui se résout dans ces valeurs. Par conséquent, les modules importés de cette manière ne seront pas inclus dans le bundle final, mais intégrés dans des fichiers séparés. Cela vous permet de réduire la taille du bundle final et de charger le contenu à la demande.

Support TypeScript

Vous pouvez activer TypeScript pour bénéficier des avantages de l'analyse de type statique lors de la génération d'un nouveau projet. Cela peut être fait en utilisant un autre modèle autre que celui par défaut pour générer le projet:

 npx create-react-app my-app --template typescript

Vous pouvez également ajouter la prise en charge de TypeScript à un projet existant, comme décrit dans la documentation .

Progressive Web Apps

De même, vous pouvez ajouter une prise en charge progressive des applications Web. Vous pouvez utiliser des services workers en ajoutant un fichier src / service-worker.js . À partir de la v4, il sera injecté dans l'application à l'aide de la bibliothèque Workbox .

Pour activer les services workers dans un nouveau projet, ils doivent être générés à partir d'un modèle personnalisé:

 npx create- react-app mon-application - modèle cra-template-pwa


npx create-react-app mon-application - modèle cra-template-pwa-typescript

Web Vitals

Create React App vous permet de mesurer les performances et la réactivité de votre application. Ceci est fait en suivant les métriques définies par web vitals et mesurées à l'aide de la bibliothèque web-vitals . Les métriques comprennent Largest Contentful Paint qui mesure les performances de chargement, First Input Delay et Cumulative Layout Shift pour la réactivité.

Create React App fournit une application pratique. pour suivre toutes les métriques disponibles:

 reportWebVitals  ( console .  log ) ; 

Opting Out

Si à un moment donné vous pensez que les fonctionnalités fournies ne sont plus suffisantes pour votre projet, vous pouvez toujours désactiver l'utilisation de react-scripts en exécutant npm run eject . Cela copiera la configuration du pack Web et construira les scripts de react-scripts dans votre projet et supprimera la dépendance. Après cela, vous êtes libre de modifier la configuration comme bon vous semble.

Vous pouvez également créer un fork de react-scripts et gérer votre branche avec les fonctionnalités dont vous avez besoin. Cela peut être plus facile, au cas où vous auriez de nombreux projets à gérer.

En conclusion

Si vous cherchez à démarrer un nouveau projet React, ne cherchez pas plus loin. Create React App vous permettra de commencer rapidement à travailler sur votre application au lieu d'écrire une autre configuration Webpack. Cela facilite également la mise à jour de vos outils de construction avec une seule commande ( npm install react-scripts @ latest ), ce qui est généralement une tâche ardue et chronophage.

Create React App est devenu un partie intégrante de l'écosystème React. Que vous l'utilisiez pour assembler un prototype rapide ou pour échafauder votre prochain grand projet, cela vous fera gagner de nombreuses heures de développement.