5 choses que je ne savais pas sur Create React App

Vous recherchez des astuces pour utiliser l'application Create React? Voici cinq caractéristiques que vous ignorez peut-être:

Créer une application React est un outil qui facilite grandement la création d'applications React sans avoir à gérer de configurations complexes. La récente publication de Create React App v2 est une excellente excuse pour parcourir leur Guide de l'utilisateur une fois de plus et trouver des fonctions intéressantes que je ne connaissais pas. Voici mes faits saillants.

1. Affichage des erreurs de peluche dans l'éditeur

J'aime les linters! Ils m'aident à identifier les problèmes potentiels au fur et à mesure que j'écris mon code, avant même d'avoir la chance de l'exécuter. Create React App est déjà livré avec ESLint installé et avec certaines règles configurées par défaut, mais il ne fait qu'afficher des avertissements et des erreurs persistantes dans le terminal:

Ce que je veux vraiment, c'est voir avertissements et erreurs directement dans mon éditeur, afin que je puisse les corriger immédiatement sans avoir à changer de contexte.

Il s'avère que Create React App simplifie l'ajout d'un fichier .eslintrc à la racine du projet avec ce contenu:

Si votre éditeur est correctement configuré (j'utilise l'extension ESLint pour VSCode ), vous verrez immédiatement les résultats:

2. Formatage automatique du code à l'aide de Prettier

Prettier est un outil de formatage de code contenant des opinions qui applique un style cohérent à tous nos fichiers. J'ai commencé à l'utiliser dans tous mes projets car cela me permettait de me concentrer sur le code et d'oublier le formatage.

Vous pouvez l'exécuter à partir de la ligne de commande (installez-le avec npm install –global plus joli, puis exécutez plus beau dans votre projet) ou de votre éditeur (j'utilise l'extension Prettier pour VSCode ). Mais une autre façon populaire d’exécuter Prettier est d’utiliser des hooks Git.

Si vous n’avez jamais entendu parler des hooks, ce sont des scripts que Git exécute lorsque certaines actions se produisent. Par exemple, un hook de pré-validation s'exécute chaque fois que vous exécutez git commit, avant que la validation elle-même ne soit créée. Nous pouvons appeler Prettier à partir d'un hook pré-commit pour formater tous nos fichiers mis en scène et nous assurer que tout ce que nous engageons dans notre référentiel est correctement formaté.

Nous pourrions aussi écrire ce hook à la main (regardez votre .git / hooks dossier pour voir quelques exemples), il existe deux modules npm qui nous aident dans le processus, husky et lint-staged et s’intègrent parfaitement à l’application Create React

. ] Nous allons installer Prettier et ces deux modules:

Ensuite, nous ajouterons les sections suivantes à la fin du fichier package.json dans notre application: [19659008] {

// ...

"husky": {

"crochets": {

[1945918] "pré-commettre": "lint-stint"

Source link