Configurez l'application create-react-app avec les modules suivants: Redux, React Router, Redux Thunk, Prettier, SCSS, Airbnb eslint, Standard Stylelint et CSS.

Un guide (très) avisé sur la configuration de l'application Create React

Utilisez-le comme guide de référence pour configurer rapidement create-react-app avec les packages populaires.

J'ai passé des heures à chercher de la documentation et des articles sur la manière de configurer correctement ces packages. J'ai fait ce guide pour que vous n'ayez pas à le faire.

Ce guide suppose que vous avez installé le brassage, le nvm et le fil.

0. Installer et utiliser l'application Create React

fil global ajouter créer-réagir-app
créer-réagir-app votre-nom-projet
cd réagir-base
git init

1. Ajouter SCSS

  • Instructions du guide de l'utilisateur create-react-app
fil ajouter noeud-sass-chokidar npm-run-all

Ajouter à package.json:

"scripts": {
+ "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src / -o src /",
+ "watch-css": "npm lance build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src / -o src / --watch --recursive",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build": "npm lance les versions build-css && react-scripts",
     "test": "react-scripts test --env = jsdom",

Renommez src / App.css en src / App.scss

Git commet la suppression de src / App.css afin qu’il soit supprimé du contrôle de source.

Ajouter à .gitignore:

+ # construire des produits
+ src / ** / *. css

2. Ajouter Prettier

  • create-react-app recommande plus sur les règles ESLint
  • Instructions du guide de l'utilisateur create-react-app
fils ajouter peluche peluche mis en scène plus jolie

Créez .prettierrc:

{
  'singleQuote': vrai,
  'trailingComma': 'es5',
}

Ajouter à package.json:

+ "lint-staged": {
+ "src / ** / *. {js, jsx, json, scss, css}": [
+ "prettier --config .prettierrc --write",
+ "git add"
+]
+},
"scripts": {
+ "precommit": "lint-staged",
     "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src / -o src /",

Formatez l'ensemble du projet en utilisant:

./node_modules/.bin/prettier --config .prettierrc --write "src / ** / *. {js, jsx, scss, css}"

Intégrez Prettier dans votre éditeur.

3. Ajoutez eslint et eslint-config-airbnb

  • Instructions de eslint-config-airbnb et article de Blanca Perello

Installez tous les packages eslint-config pertinents répertoriés dans:

npm info "eslint-config-airbnb @ latest" peerDependencies

Vous pouvez le faire en utilisant:

(
  export PKG = eslint-config-airbnb;
  npm info "$ PKG @ latest" peerDependencies --json | commande sed 's / [\ {\},] // g; s /: / @ / g '| Fil xargs ajouter --dev "$ PKG @ dernières"
)

Créez .eslintrc.js:

  • (.eslintrc.js est prioritaire par rapport aux autres formats eslintrc)
module.exports = {
  'env': {
    'navigateur': vrai,
    'plaisanterie: vrai,
    'es6': vrai,
    'noeud': vrai,
  },
  'étend': [
    'airbnb',
    'plus jolie',
  ],
  'plugins': [
    'plus jolie',
  ],
  'règles': {
    'plus joli / plus joli': ['erreur', {
      'singleQuote': vrai,
      'trailingComma': 'es5'
    }],
  },
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': vrai,
    }
  }
}

Ajoutez en haut de src / registerServiceWorker.js:

+ / * eslint-disable no-console, no-param-re-réaffecter, no-use-before-define * /
// En production, nous enregistrons un travailleur de service pour servir des actifs à partir du cache local.

Lint existant JS

Correction automatique de certains problèmes eslint:

node_modules / .bin / eslint --ext = js --ext = jsx --fix.

Modifier src / index.js:

import Réagir de 'réagir';
importer ReactDOM de 'react-dom';
import './index.css';
importer l'application depuis './App';
importer registerServiceWorker à partir de './registerServiceWorker';
ReactDOM.render (React.createElement (App), document.getElementById ('root'));
registerServiceWorker ();

Renommez src / App.js en src / App.jsx et modifiez:

import Réagir de 'réagir';
importer le logo depuis './logo.svg';
importer './App.css';
const App = () => (
  
    
      logo       

Bienvenue dans React          

      Pour commencer, éditez src / App.js et enregistrez-le pour le recharger.         )

exportation par défaut App;

Renommez src / App.test.js en src / App.test.jsx et modifiez:

import Réagir de 'réagir';
importer ReactDOM de 'react-dom';
importer l'application depuis './App';
it ('rend sans crash', () => {
  const div = document.createElement ('div');
  ReactDOM.render (, div);
});

3. Ajoutez stylelint et stylelint-config-standard

  • Instructions de stylelint-config-standard et de l’article de Blanca Perello
fil ajouter stylelint stylelint-config-standard --dev

Créez .stylelintrc:

{
  'extend': 'stylelint-config-standard',
}

4. Ajoutez les scripts eslint et stylelint

Modifier package.json:

"peluches mises en scène": {
 + "src / ** / *. {js, jsx, json}": [
 + "eslint --fix",
 + "prettier --config .prettierrc --write",
 + "git add"
 +],
 + "src / ** / *. {scss, css}": [
 + "stylelint --config = .stylelintrc --fix",
 + "prettier --config .prettierrc --write",
 + "git add"
 +]
  },
  "scripts": {
    "precommit": "mint-staged",
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src / -o src /",
    "watch-css": "npm lance build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src / -o src / --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm lance les versions build-css && react-scripts",
+ "test: lint: js": "eslint --ext = js --ext = jsx.",
+ "test: lint: scss": "stylelint --config = .stylelintrc '** / *. scss'",
+ "test: peluche": "run-s test: peluche: **",
+ "test: unit": "react-scripts test --env = jsdom",
+ "test": "run-s test: **",
    "éjecter": "réagir-scripts éjecter",
    "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"
  },

5. Ajouter Redux, React Router et Redux Thunk

  • Instructions tirées de l’article de Jamie Barton
fils ajouter redux réagir-redux réagir-routeur-dom réagir-routeur-redux @ prochain redux-thunk

6. Ajouter des modules CSS

  • AVERTISSEMENT: cela nécessite que vous éjectiez create-react-app
  • Instructions de nulogy et css-loader
éjection du fil
fil installer

Modifier config / webpack.config.dev.js:

{
  loader: require.resolve ('css-loader'),
  options: {
    importLoaders: 1,
+ modules: true,
+ localIdentName: "[nom] __ [local] - [dièse: base64: 5]"
  },
},

Modifiez le fichier config / webpack.config.prod.js:

{
  loader: require.resolve ('css-loader'),
  options: {
    importLoaders: 1,
+ modules: true,
    minimiser: vrai,
    sourceMap: true,
   },
},

Correction des chemins CSS existants

Supprimer «-» des noms de classe css / scss

Modifiez src / App.jsx pour:

import Réagir de 'réagir';
importer le logo depuis './logo.svg';
importer des styles de './App.css';
const App = () => (
  
    
      logo       

Bienvenue dans React          

      Pour commencer, éditez src / App.js et enregistrez-le pour le recharger.         )

exportation par défaut App;

Résultat final

Voici les mises en pension résultantes:

  • Repo sans modules CSS
  • Repo après avoir éjecté et ajouté des modules CSS

Autres forfaits utiles

Voici d'autres forfaits que vous pourriez souhaiter:

  • Immutable.js
  • sélectionner de nouveau
  • normalizr
  • couler
  • livre de contes
  • styliste de style

À titre de référence, voici ce que les paquetages create-react-app utilisent déjà (visualisable à l’éjection), vous n’avez donc pas à les installer:

 “Préfixe automatique”: “7.1.2”,
 “Babel-core”: “6.25.0”,
 “Babel-eslint”: “7.2.3”,
 “Babel-jest”: “20.0.3”,
 “Babel-loader”: “7.1.1”,
 “Babel-preset-react-app”: “^ 3.0.2”,
 “Babel-runtime”: “6.26.0”,
 “Case-sensitive-path-webpack-plugin”: “2.1.1”,
 «Craie»: «1.1.3»,
 “Css-loader”: “0.28.4”,
 “Dotenv”: “4.0.0”,
 “Eslint”: “4.4.1”,
 “Eslint-config-react-app”: “².0.0”,
 “Eslint-loader”: “1.9.0”,
 “Eslint-plugin-flowtype”: “2.35.0”,
 “Eslint-plugin-import”: “2.7.0”,
 “Eslint-plugin-jsx-a11y”: “5.1.1”,
 “Eslint-plugin-react”: “7.1.0”,
 «Extract-text-webpack-plugin»: «3.0.0»,
 “Chargeur de fichier”: “0.11.2”,
 "Fs-extra": "3.0.1",
 “Html-webpack-plugin”: “2.29.0”,
 "Plaisanterie": "20.0.4",
 “Object-assign”: “4.1.1”,
 “Postcss-flexbugs-fix”: “3.2.0”,
 “Postcss-loader”: “2.0.6”,
 «Promesse»: «8.0.1»,
 “Réagir”: “^ 15.6.1”,
 “React-dev-utils”: “.0.1”,
 “React-dom”: “^ 15.6.1”,
 “Style-loader”: “0.18.2”,
 “Sw-precache-webpack-plugin”: “0.11.4”,
 “Chargeur d'url”: “0.5.9”,
 “Webpack”: “3.5.1”,
 “Webpack-dev-server”: “2.7.1”,
 “Webpack-manifeste-plugin”: “1.2.1”,
 “Whatwg-fetch”: “2.0.3”

C'est tout!

Extra: Configuration manuelle du Webpack

Voici des ressources utiles pour configurer WebPack pour un projet React sans utiliser l'application Create React.

Vous pouvez également utiliser Next.js pour les applications React côté serveur afin d'éviter les tracas liés à la configuration de WebPack vous-même.

Bonjour, faites-moi savoir si vous trouvez cela utile - cliquez sur le bouton ci-dessous ou postez un commentaire!

Si vous aimez les articles sur React, Redux, Webpack, JavaScript, Sass / SCSS ou d'autres guides de développement Web intéressants, cliquez sur le bouton «Suivre».