Bonjour, Créez React App 2.0!

Create React App 2.0 est maintenant disponible. Dans cet article de blog, Eric Bishard vous expliquera ce qui a changé et comment vous pouvez l'utiliser dans votre environnement de développement.

L'application Create React fournit un environnement d'apprentissage React avec une configuration zéro, développée par le React . équipe à Facebook Open Source pour vous aider à démarrer votre application. Create React App (CRA) a des opinions sur ce qu’il faut utiliser pour vos tests et votre exécuteur de tests, quel minificateur de production et quel bundle utiliser, et comment configurer une base de code JavaScript modulaire. Ce ne sont pas des décisions que vous ne devrez pas prendre pour mettre votre application en service rapidement, ce qui vous soulagera de la fatigue liée à JavaScript lorsque tout ce que vous voudrez faire sera de créer directement votre application et ses composants.

Ne vous inquiétez pas, vous pourrez toujours prendre vous-même de nombreuses décisions en matière de gestion d’État, de récupération de données, etc. L’ARC ne va pas aussi loin que de prendre des décisions comme celles-ci. Cela permet de créer un pipeline de génération frontend prêt à l'emploi que vous pouvez utiliser avec toutes les options d'extraction de données et d'API dorsales de votre choix.

Condition préalable pour utiliser l'application Create React v2.0

L'ARC 2.0 n'est plus fonctionne avec le nœud 6. Vous devez avoir installé le nœud 7 ou plus pour pouvoir utiliser les derniers bits. Avant de commencer, vous devez vous assurer que le nœud est mis à jour. Vous pouvez facilement vérifier en exécutant la commande suivante:

 node -v 

J'ai mis à jour mon nœud dès le premier jour de la version CRA 2 et la version suivante de Node est installée et tout fonctionne correctement:

 $ node -v
v8.12.0

Vous êtes nouveau dans la création d'une application React?

Si ce n'est pas le cas, passez à la section Ce qui a changé . Si tel est le cas, j'aimerais expliquer en détail comment utiliser l'ARC avec une procédure de base très élémentaire de Hello World.

La première fois que j'ai utilisé l'outil, je ne comprenais pas pourquoi je ne voyais pas Webpack, Babel et Jest. dans mon package.json mais il s'avère que c'est parce que l'ARC a une dépendance appelée react-scripts qui vous masque ces dépendances et autres configurations. C'est bon, cependant. Une fois que vous êtes prêt à utiliser votre application, vous pouvez toujours l'expulser de l'ARC, exposant ainsi ces dépendances et leurs configurations.

Si vous souhaitez essayer l'ARC 2.0, voici les commandes de base – et seulement. À l'instar de la version 1.x, il existe quelques scripts très simples avec lesquels il est préférable de se familiariser.

Create React App est une CLI, mais ne fait pas ce que font d'autres CLI comme la Angular CLI . . Par exemple, il ne génère pas de composants ni n'ajoute de fonctionnalités à votre application.

Lorsque vous exécutez la commande suivante, CRA utilisera le modèle 2.0 par défaut:

Si vous avez installé CRA avant le 1 er octobre 2018 et que vous ne l'avez pas utilisé depuis longtemps, vous n'avez pas besoin de le réinstaller globalement car l'ARC utilisera par défaut le dernier modèle. Cela ne signifie pas que vous ne pouvez pas utiliser l'ancien modèle 1.x. Si vous voulez le faire, vous pouvez ajouter l'argument - scripts-version comme suit:

 créer-réagir-application nom-mon-application --scripts-version = react-scripts @ 1 fois

Une fois que l'ARC a fini de générer votre demande, vous aurez un répertoire avec la structure suivante:

Ici, j'ai développé les dossiers et fichiers importants que vous devez connaître, principalement le public et Les répertoires src sont ceux dans lesquels vous allez apporter des modifications et ajouter vos premiers composants et fichiers de test. Comme vous pouvez le constater, quelques composants et tests ont déjà été configurés pour l'ARC.

Après avoir exécuté la commande créez-réag-app changez de répertoire et exécutez npm start ou Le début du fil pour créer et exécuter l'application:

 $ cd my-app-name
$ npm start 

Ceci utilisera le serveur de développement Webpack sur localhost: 3000 . En accédant à cette page de votre navigateur, vous accéderez à la page d'accueil portant le logo React:

L'ARC ne prend pas en charge le remplacement de module à chaud car il "cache" Webpack. . Par exemple, si une modification est apportée à App.js l'intégralité de l'application est rechargée dans le navigateur.

Remarque: Si vous souhaitez utiliser le remplacement de module dynamique lors de l'utilisation de l'application Create React, Veuillez vous reporter à l'article (excellent) de Brian Han intitulé, Rechargement à chaud avec create-react-app sans éjection … et sans react-app-rewired.

Terminons notre serveur de développement actuel et essayons de le lancer. nos tests utilisant la commande npm test ou test de fil :

 $ npm test 

Les options suivantes seront affichées:

Exécutons tous les tests en appuyant sur a :

Comme vous pouvez le voir, les tests répertorié dans src / App.test.js est passé.

Si nous souhaitons envoyer cette belle application de logo React en rotation, nous pouvons exécuter le npm run build ou le build qui créera un répertoire à l'intérieur du projet build :

Un build de production optimisé a été créé. Une fois l'opération terminée, le script de génération détaille exactement ce qui s'est passé et comment vous pouvez déployer la sortie générée. Pour en savoir plus sur le déploiement, vous pouvez aller à ici .

Enfin, dans le cadre de cet essai, nous allons expulser notre demande de notre ARC. J'encouragerais cela avec une application test afin que vous compreniez ce que fait la commande et en quoi elle est irréversible.

Avant de commencer, examinons package.json :

Les seules dépendances répertoriées sont réagissent react-dom et réagissent-scripts . Les scripts de réaction regroupent toutes les dépendances cachées lors de l'utilisation de CRA.

Notez également la structure du répertoire de l'application:

[1945] 19659002] Éjectons maintenant notre application:

Veuillez prendre note de l'avertissement avant d'exécuter l'opération d'éjection sur votre application.

La validation de cette opération modifiera project.json et la structure de répertoires de l'application:

Vous maintenant le contrôle de toutes les dépendances précédemment cachées, nous avons maintenant aussi les répertoires scripts et config . À ce stade, nous n'utilisons plus l'ARC, cependant; vous pouvez toujours exécuter les mêmes commandes qu'auparavant: start test et build . De toute évidence, le script eject n'existe plus. La nouvelle structure de répertoires ressemble à ceci:

Une dernière chose que je souhaite mentionner est qu'il importe peu d'utiliser . npm ou fil dans l’une de ces étapes. Les deux fourniront exactement le même résultat dans chaque cas. Je trouve que l'utilisation de fil prend en moyenne moins de temps que npm pour exécuter chaque commande, mais nécessite également l'installation du fil.

Ce qui a été modifié et pourquoi faut-il s'en soucier?

Parmi les raisons de la mise à jour, citons notamment l'utilisation de les mises à jour des dépendances majeures telles que Babel 7, Webpack 4 et Jest 23, qui ont connu des changements majeurs cette année.

Outre certains Babel, Webpack et Jest ont mis à jour leurs dernières versions et, en tant que novice dans React et ses concepts plus avancés, je souhaitais aborder quelques éléments de base qui amélioreront ma vie. un développeur de React. Voici, à mon avis, certains des changements les plus importants qui sont également faciles à comprendre d'un point de vue débutant ou intermédiaire.

Modules SASS / CSS prêts à l'emploi

C'est l'une de mes fonctionnalités préférées. Auparavant, j’avais plusieurs projets de démarrage sur mon GitHub que je voudrais cloner afin d’obtenir un bon point de départ avec différentes configurations CSS, car CRA 1.x ne fournissait pas les meilleures options CSS immédiatement. Il n’était pas non plus facile pour moi d’établir ce genre de choses, d’où les projets de démarrage modifiés que je devais créer afin de faciliter le travail avec CSS dès le début de mon projet.

SVG en tant que composant dans JSX

We supporte l'utilisation des SVG, ce qui nous permet de les importer en tant que composant React dans notre fichier JSX.

Ensembles de CSS plus petits

Nous pouvons maintenant tirer parti d'un meilleur regroupement de CSS en ciblant simplement les navigateurs modernes.

React Fragments

En tant que spécialiste de Babel qui ne prend pas en charge l'abréviation de React Fragments, il est bon de savoir qu'avec la mise à jour de Babel, Create React App prend désormais en charge cette syntaxe de balise abrégée. ] Opt-in pour utiliser les opérateurs de services et prendre en charge les anciens navigateurs

Les applications progressives hors connexion sont les premières à être plus rapides et plus fiables que les applications traditionnelles, et elles offrent également une expérience mobile attrayante. Mais ils peuvent rendre plus difficile le débogage des déploiements et pour cette raison, dans Create React App 2, les travailleurs du service sont acceptés.

Qu'est-ce qui a changé dans les fichiers d'application et leur structure?

Après avoir commencé à utiliser le nouveau modèle, vous remarquerez que la page d’accueil de l’ARC est légèrement différente de la précédente. En fait, j'aime beaucoup mieux le nouveau design. Si vous n'êtes pas sûr de la version que vous utilisez, cette modification simplifie le choix de la version sur laquelle vous vous trouvez. Ci-dessous, vous voyez l'ancienne version 1.x à gauche et la nouvelle version 2.x à droite.

La structure de fichier dans CRA 2.x est presque identique à celle de la structure dans 1.x, mais l'une des premières choses que vous remarquerez en ouvrant votre projet est que l'ancien registerServiceWorker.js a été renommé en serviceWorker.js . ]. Si vous allez dans ce fichier, le seul changement est l'ajout d'un objet de configuration qui peut être passé à la fonction registerValidSW () permettant d'activer surOffline et onError . au technicien. Cela est utile pour afficher les messages des utilisateurs en mode hors connexion et pour consigner les erreurs sur serviceWorker si l'enregistrement échoue. Si vous souhaitez explorer ce changement, cliquez ici .

Si vous allez dans votre fichier index.js vous remarquerez pourquoi registerServiceWorker.js a été renommé en serviceWorker.js . C'est parce que, par défaut, nous n'enregistrons plus le technicien. En changeant simplement la ligne dans index.js qui se lit comme suit: serviceWorker.unregister (); à serviceWorker.register (); vous pourrez alors prendre avantage de la mise en cache hors connexion (activation). Je pense que le changement de nom de ce fichier a du sens en raison du changement d’inclusion. Pour en savoir plus sur les applications Web progressives dans l'ARC, accédez à ici .

Les scripts du NPM restent les mêmes

Nous avons toujours les quatre (4) commandes de base utilisées pour démarrer, créer, tester et éjecter les application:

1. npm start ou fil start hébergera l'application localement avec Webpack Dev Server
2. npm test ou test de fil exécutera le testeur. en utilisant des tests Jest ( plus d'infos )
3. npm run build ou la fabrication de fil conditionnera une construction de production en vue de son déploiement ( plus d'infos ) ] npm run eject ou yarn eject supprimera les react-scripts de vos dépendances et copiera tous les fichiers de configuration et les dépendances transitives dans votre projet, ainsi que mettre à jour votre package.json

Si vous souhaitez comparer les deux fichiers package.json pour chaque version de l'éjection ed apps (1.x vs 2.x), je les ai mises en place sur un vérificateur de différences ici .

Voici un aperçu pris à la fois d'une application 1.x et d'une 2 Application .x qui a été éjectée . Comme vous pouvez le constater, nous avons beaucoup plus de dépendances transitives dans la nouvelle version de CRA 2 et seulement quelques packages supprimés de l'ancienne version.

Conscient de

• Comme je l'ai mentionné, le nœud 6 n'est plus pris en charge, vous devez exécuter le nœud 7 ou supérieur
• La prise en charge des navigateurs plus anciens (tels que IE 9 à IE 11) est facultative et cela pourrait endommager votre application [19659081] La scission du code avec import () se comporte désormais plus près de la spécification
• L'environnement Jest inclut jsdom sorti de la boîte
• . Prise en charge de la spécification d'un objet comme . paramètre remplacé par la prise en charge d'un module proxy personnalisé
• Prise en charge de l'extension .mjs supprimée
• Les définitions de PropTypes sont désormais supprimées des versions de production

. Le 2.0.3 Les notes de mise à jour donnent plus de détails sur les modifications, donc je vérifierais que Cument si vous avez besoin de plus de clarté.

Premières ressources pour Create React App v2.0

J'ai compilé une liste de tout le contenu que j'ai trouvé sur le sujet de Create React App 2. Cela devrait vous permettre Je suis rapidement opérationnel et j'ai commencé à utiliser certaines des nouvelles fonctionnalités. J'imagine que même ceux d'entre vous qui ont compris React apprécieront d'apprendre. Par exemple, Kent C Dodds a créé une vidéo sur YouTube expliquant comment utiliser les macros Babel personnalisées qui est désormais prise en charge dans la version 2. Il vous expliquera comment utiliser et créer rapidement vos propres macros.

Vous pouvez consulter le Github Repo et pour des informations supplémentaires non traitées ici, l'équipe de React a également rédigé un article de blog sur la publication et les modifications importantes. .