Original link:
Medium.com/stephenkoo/…

Set up create-react-app with: Redux, React Router, Redux Thunk, Prettier, SCSS, Airbnb eslint, Standard stylelint, And CSS modules — A (very) Opinionated guide on setting up the React App

Original author:
Stephen KooTranslation:
Du Mengjie

Foreword: After discussion and communication within the team, the front-end development specification was determined. Implementation of the specification should be top-down, carrot-and-stick, and in addition to requiring self-awareness among members, it is best to configure code normalization/formatting tools in the project. I was lucky enough to read this article after taking a few steps in configuring these tools. Easily configure all tools from start to finish. I highly respect this kind of standardized project, reject the disorderly code style, will continue to use in the future work, also recommend everyone to use. Keep your code clean!

This is a reference guide for configuring popular packages in create-react-app.

I spent hours reading the documentation and articles to install these packages correctly, and I wrote this article to save you time.

This guide assumes that you have BREW, NVM, and YARN installed. (The NPM command is described in the note.)

Install the Create React App

yarn global add create-react-app // npm install create-react-app -g create-react-app your-project-name cd react-base git  initCopy the code

1. Configure SCSS

  • Create-react-app user guide
yarn add node-sass-chokidar npm-run-all
// npm install node-sass-chokidar npm-run-all --save-devCopy the code

Add to package.json:

"scripts": {
+    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
+    "watch-css": "npm run 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 run build-css && react-scripts build",
     "test": "react-scripts test --env=jsdom",Copy the code

Rename SRC/app.css to SRC/app.scss.

.gitignore added:

+# build products
+src/**/*.cssCopy the code

2. Configure Prettier

yarn add husky lint-staged prettier
// npm install husky lint-staged prettier --save-devCopy the code

Create a. Prettierrc file:

{
  'singleQuote': true,
  'trailingComma': 'es5',
}Copy the code

Add to 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/",Copy the code

Format the entire project with the following command:

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

Integrate Prettier in an editor. (1+1>2)

3. Configure ESLint and eslint-config-airbnb

  • Eslint-config-airbnb and Blanca Perello’s article

View and install all dependencies in eslint-config:

npm info "eslint-config-airbnb@latest" peerDependenciesCopy the code

You can install it like this (for Linux/OSX users) :

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add --dev "$PKG@latest"
)Copy the code

Or (Windows users) :

npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnbCopy the code

New eslintrc. Js:

module.exports = {
  'env': {
    'browser': true,
    'jest': true,
    'es6': true,
    'node': true,
  },
  'extends': [
    'airbnb',
    'prettier',
  ],
  'plugins': [
    'prettier',
  ],
  'rules': {
    'prettier/prettier': ['error', {
      'singleQuote': true,
      'trailingComma': 'es5'
    }],
  },
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': true,
    }
  }
}Copy the code

SRC/registerServiceWorker. Js file beginning to add:

+ /* eslint-disable no-console, no-param-reassign, no-use-before-define */
// In production, we register a service worker to serve assets from local cache.Copy the code

Review existing code

Auto-fix some ESLint issues:

node_modules/.bin/eslint --ext=js --ext=jsx --fix .Copy the code

Modify the SRC/index. Js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(React.createElement(App), document.getElementById('root'));
registerServiceWorker();Copy the code

Rename SRC/app.js to SRC/app.jsx and modify:

import React from 'react';
import logo from './logo.svg';
import './App.css';
const App = () => (
  <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>Welcome to React</h2>
    </div>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
  </div>
);
export default App;Copy the code

Rename SRC/app.test.js to SRC/app.test.jsx and modify:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});Copy the code

4. Configure stylelint and stylelint-config-standard

  • Related contents in Stylelint-config-Standard and Blanca Perello’s article
yarn add stylelint stylelint-config-standard --dev
// npm install stylelint-config-standard --save-devCopy the code

New. Stylelintrc:

{
  'extends': 'stylelint-config-standard',
}Copy the code

5. Configure eslint and stylelint commands

Modify the package. The json:

"lint-staged": {
 + "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": "lint-staged",
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run 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 run build-css && react-scripts build",
+   "test:lint:js": "eslint --ext=js --ext=jsx .",
+   "test:lint:scss": "stylelint --config=.stylelintrc '**/*.scss'",
+   "test:lint": "run-s test:lint:**",
+   "test:unit": "react-scripts test --env=jsdom",
+   "test": "run-s test:**",
    "eject": "react-scripts eject",
    "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"
  },Copy the code

6. Configure Redux, React Router, and Redux Thunk

  • About this in Jamie Barton’s article
yarn add redux react-redux react-router-dom react-router-redux@next redux-thunk
// npm install react-redux react-router-dom react-router-redux@next redux-thunk --saveCopy the code

7. Configure the CSS Modules

  • Warning: This operation requires exposure (eject)create-react-appThe configuration of the
  • Nulogy and CSS-Loader
yarn eject
// npm eject
yarn install
// npm installCopy the code

Modify the config/webpack config. Dev. Js:

{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
+   modules: true,
+   localIdentName: "[name]__[local]--[hash:base64:5]"
  },
},Copy the code

Modify the config/webpack config. Prod. Js:

{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
+   modules: true,
    minimize: true,
    sourceMap: true,
   },
},Copy the code

Modify existing CSS paths

Delete the ‘-‘ in the CSS/SCSS file class name.

Modify the SRC/App. JSX:

import React from 'react'; import logo from './logo.svg'; import styles from './App.css'; const App = () => ( <div className={styles.App}> <div className={styles.header}> <img src={logo} className={styles.logo}  alt='logo' /> <h2>Welcome to React</h2> </div> <p className={styles.intro}> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); export default App;Copy the code

The final results

The final results are in the following two Github repositories:

  • The CSS Modules version is not configured
  • Configure the CSS Modules version

Some other useful packages

You may use some of the following packages:

Create-react-app packages are listed below for reference. Do not install create-react-app repeatedly:

"Autoprefixer" : "7.1.2", "Babel - core" : "6.25.0", "Babel - eslint" : "7.2.3", "Babel - jest" : "20.0.3", "Babel - loader" : "7.1.1", "babel-react-app" : "^3.0.2", "babel-Runtime" : "6.26.0", "case-sensitive paths-webpack-plugin" : 2.1.1 "and" chalk ":" 1.1.3 ", "CSS - loader" : "0.28.4", "dotenv" : "4.0.0", "eslint" : "4.4.1", "eslint - config - react - app" : "Squared. 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", "file - loader" : "0.11.2", "the fs - extra" : "3.0.1", "HTML - webpack - plugin" : "2.29.0", "jest" : "20.0.4", "object - assign" : "4.4.1", "postcss flexbugs - fixes" : "3.2.0", "postcss - loader" : "2.0.6", "the promise" : "8.0.1" and "react" : "^ 15.6.1", "the react - dev - utils" : "⁴. 0.1", "the react - dom" : "^ 15.6.1", "style - loader" : "0.18.2", "sw - precache - webpack - plugin" : "0.11.4", "url - loader" : "0.5.9", "webpack" : "3.5.1 track of", "webpack - dev - server" : 2.7.1 "and" webpack - manifest - plugin ":" 1.2.1 ", "the whatwg - fetch" : "the 2.0.3"Copy the code