Meilleures nouvelles fonctionnalités de Create React App 3.3

Ce message vous présente les principales fonctionnalités de la nouvelle application Create React 3.3. Découvrez comment les dernières mises à jour vous aident à accélérer le développement des applications React.

Create React App est un outil créé par les développeurs de Facebook pour vous aider à créer des applications React. Il vous évite une installation et une configuration fastidieuses. Il vous suffit d'exécuter une commande et de créer l'application Rea pour configurer les outils dont vous avez besoin pour démarrer votre projet React. – Guil Hernandez

Create-React-App, qui est sans doute l'une des plates-formes les plus populaires de tous les temps avec plus de 1,5 million de projets l'utilisant actuellement, a récemment publié une nouvelle version (3.3) avec beaucoup d'améliorations. Même si nous savons tous que React ne nécessite pas de dépendances de construction, il dépend de plusieurs outils importants pour faire démarrer la magie que nous voyons lorsque nous exécutons npm. Certains de ces outils ont été mis à jour et l'ARC a été maintenue pour conserver un support constant.

Modèles personnalisés

L'équipe de Create React App a expédié cette nouvelle version avec des modèles personnalisés. Vous pouvez désormais créer de nouvelles applications avec le modèle de base (que vous utilisez déjà), désormais appelé cra-template, ou le passe-partout TypeScript, appelé cra-template-typescipt. Cela peut être fait en exécutant la commande ci-dessous:

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

Cela fait tourner une nouvelle application React en configuration TypeScript. Pour les utilisateurs de TypeScript, c'est une excellente nouvelle. Cela est déjà possible depuis un certain temps maintenant; cependant, le - dactylographié initial a été supprimé et maintenant remplacé par - dactylographié comme vous le voyez ci-dessus. Démarrer une nouvelle application comme vous le savez, cela fonctionne parfaitement:

 npx create-react-app my-app

Les membres de la communauté React peuvent désormais également créer leurs propres modèles et les ajouter dans la liste des modèles.

Opérateurs de chaînage et de coalescence nuls facultatifs

Les opérateurs de chaînage facultatifs sont utiles pour vérifier si des nœuds dans une arborescence existent ou ne pas. Si vous souhaitez rechercher une valeur de propriété, vous pouvez rechercher des nœuds intermédiaires comme celui-ci:

 var street = user.address && user.address.street;

De plus, de nombreuses API renvoient soit un objet, soit null / indéfini, et on peut vouloir extraire une propriété du résultat uniquement lorsqu'elle n'est pas nulle:

 var fooInput = myForm.querySelector ('input [name=foo]' )
var fooValue = fooInput? fooInput.value: undefined

Selon la proposition TC39 l'opérateur de chaînage facultatif permet à un développeur de gérer un grand nombre de ces cas sans se répéter ou affecter des résultats intermédiaires dans des variables temporaires:

 var street = user.address ?. rue
var fooValue = myForm.querySelector ('input [name=foo]')?. value

Lorsqu'une autre valeur que non définie est souhaitée pour le cas manquant, cela peut généralement être traité avec Opérateur de coalescence nul :

 // revient à une valeur par défaut lorsque response.settings est manquant ou nul
// (response.settings == null) ou lorsque response.settings.animationDuration est manquant
// ou nullish (response.settings.animationDuration == null)
const animationDuration = response.settings? .animationDuration ?? 300;

La ​​variante d'appel du chaînage facultatif est utile pour traiter les interfaces qui ont des méthodes facultatives:

 iterator.return?. () // ferme manuellement un itérateur

ou avec des méthodes non universellement implémentées:

 if (myForm.checkValidity?. () === false) {// ignorer le test dans les anciens navigateurs Web
    // la validation du formulaire échoue
    revenir;
}

CRA 3.3 prend désormais en charge ces opérateurs et si votre version TypeScript n'est pas à jour, vous devrez la mettre à jour pour que ces nouveaux changements d'opérateurs soient accessibles.

 // Chaînage facultatif
une?.(); // non défini si `a` est nul / non défini
avant JC; // non défini si `b` est nul / non défini

// Coalescence nulle
indéfini ?? «un autre défaut»; // résultat: 'un autre défaut'
nul ?? «un autre défaut»; // résultat: 'un autre défaut'
'' ?? «un autre défaut»; // résultat: ''
0 ?? 300; // résultat: 0
faux ?? vrai; // résultat: faux

De plus, pour les IDE comme VS Code, vous devez également le mettre à jour pour comprendre ces nouveaux opérateurs lorsque vous codez.

Séparateurs numériques

Lorsqu'un entier est grand, comme 1000000000, il peut être difficile de numériser immédiatement à travers et dire ce qu'il représente réellement, un milliard, 10 milliards ou 100 millions. C'est là que les virgules interviennent lorsque vous écrivez, pour améliorer la lisibilité.

 1000000000; // Est-ce un milliard? une centaine de millions? Dix millions?
101475938.38; // quelle échelle est-ce? quelle puissance de 10?

1_000_000_000; // Ah, donc un milliard
101_475_938.38; // Et c'est des centaines de millions

Des séparateurs comme des traits de soulignement entre les chiffres peuvent être utilisés pour garantir que les littéraux numériques sont toujours lisibles et ne sont pas si difficiles à analyser avec l'œil.

 const FEE = 12300;
// est-ce 12 300? Ou 123, parce que c'est en cents?

const AMOUNT = 1234500;
// est-ce 1 234 500? Ou cents, donc 12.345? Ou financière, 4 fixes 123,45?

L'utilisation de traits de soulignement ( _ U + 005F) comme séparateurs permet d'améliorer la lisibilité des littéraux numériques, à la fois des entiers et des virgules flottantes (et dans JS, tout est toujours en virgule flottante):

 1_000_000_000 // Ah, donc un milliard
101_475_938.38 // Et ce sont des centaines de millions

let fee = 123_00; // 123 $ (12300 cents, apparemment)
let fee = 12_300; // 12 300 $ (woah, ces frais!)
let montant = 12345_00; // 12 345 (123 4500 cents, apparemment)
let montant = 123_4500; // 123,45 (4 financières fixes)
let montant = 1_234_500; // 1 234 500

Cela fonctionne également sur les parties fractionnaires et exposantes:

 0.000_001 // 1 millionième
1e10_000 // 10 ^ 10000 - accordé, beaucoup moins utile / à portée ...

Pas de ligne multiligne inattendue

Il y a une erreur de configuration ESLint qui s'est avérée non compatible avec Prettier, les avertissements de ligne multiligne inattendus. Il a été retiré du projet de l'ARC. Cependant, vous pouvez le réactiver si vous le souhaitez en étendant la configuration ESLint et en lui ajoutant cette ligne de code:

 {
  "étend": "react-app",
  "règles": {
    "multiligne inattendue": "avertir"
  }
}

Mises à jour de la documentation

Quelques mises à jour ont eu lieu sur la page de documentation officielle qui comprenait des documents de modèle, le fractionnement du code React et le resserrement des documents TypeScript également.

Pas de changement de rupture

version. Cependant, pour les développeurs qui utilisent react-dev-utils en dehors de l'application Create React, vous devrez mettre à jour la dépendance du serveur de développement webpack à 3.9.0

Mise à niveau de 3.2 à 3.3

Pour mettre à niveau , utilisez l'un des gestionnaires de packages que vous connaissez. Pour npm:

 npm install --save --save-exact react-scripts@3.3.0

ou pour le fil:

 fil ajouté --exact react-scripts@3.3.0

Conclusion

Voici le lien vers le journal des modifications officiel . On vous a montré toutes les nouvelles fonctionnalités fournies avec cette version de Create React App. Vous pouvez voir combien de réflexion est mise sur l'amélioration constante de ce passe-partout. Ma nouvelle fonctionnalité préférée est la prise en charge des séparateurs numériques. Quel est le vôtre?