Configure la aplicación create-react con: Redux, React Router, Redux Thunk, Prettier, SCSS, Airbnb eslint, Standard stylelint y módulos CSS

Una guía (muy) obstinada sobre la configuración de la aplicación Create React

Use esto como una guía de referencia para configurar rápidamente crear-reaccionar-aplicación con paquetes populares.

He pasado horas buscando en la documentación y artículos sobre cómo configurar estos paquetes correctamente. Hice esta guía para que no tenga que hacerlo.

Esta guía asume que tiene cerveza, nvm e hilo instalados.

0. Instalar y usar la aplicación Create React

hilo global agregar crear-reaccionar-aplicación
crear-reaccionar-aplicación su-nombre-proyecto
cd react-base
git init

1. Agregar SCSS

  • Instrucciones de la Guía del usuario de create-react-app
hilo agregar nodo-sass-chokidar npm-run-all

Añadir a package.json:

"guiones": {
+ "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",
+ "inicio": "npm-run-all -p watch-css start-js",
+ "build": "npm run build-css && react-scripts build",
     "test": "react-scripts test --env = jsdom",

Cambie el nombre de src / App.css a src / App.scss

Git compromete la eliminación de src / App.css para que se elimine del control de origen.

Añadir a .gitignore:

+ # productos de construcción
+ src / ** / *. css

2. Agregar más bonito

  • create-react-app recomienda Prettier sobre las reglas de ESLint
  • Instrucciones de la Guía del usuario de create-react-app
hilo añadir husky pelusa más bonita

Crear .prettierrc:

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

Añadir a package.json:

+ "puesta en pelusa": {
+ "src / ** / *. {js, jsx, json, scss, css}": [
+ "prettier --config .prettierrc --write",
+ "git add"
+]
+},
"guiones": {
+ "precommitir": "puesta en escena",
     "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src / -o src /",

Formatee todo el proyecto usando:

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

Integra Prettier en tu editor.

3. Agregue eslint y eslint-config-airbnb

  • Instrucciones del artículo de eslint-config-airbnb y Blanca Perello

Instale todos los paquetes relevantes de eslint-config listados en:

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

Puedes hacer esto usando:

(
  exportar PKG = eslint-config-airbnb;
  npm info "$ PKG @ latest" peerDependencies --json | comando sed 's / [\ {\},] // g; s /: / @ / g '| hilo de xargs agregar --dev "$ PKG @ latest"
)

Crea .eslintrc.js:

  • (.eslintrc.js tiene prioridad sobre otros formatos de eslintrc)
module.exports = {
  'env': {
    'navegador': verdadero,
    'broma': cierto,
    'es6': cierto,
    'nodo': verdadero,
  },
  'extiende': [
    'airbnb',
    más bonita
  ],
  'complementos': [
    más bonita
  ],
  'reglas': {
    'prettier / prettier': ['error', {
      'singleQuote': verdadero,
      'trailingComma': 'es5'
    }],
  },
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': cierto,
    }
  }
}

Agregar al inicio de src / registerServiceWorker.js:

+ / * eslint-disable no-console, no-param-reasignar, no-use-before-define * /
// En producción, registramos un trabajador de servicio para servir activos desde la memoria caché local.

Pelusa JS existente

Solución automática de algunos problemas de eslint:

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

Modifique src / index.js:

importar Reaccionar desde 'reaccionar';
importar ReactDOM desde 'react-dom';
importar './index.css';
importar la aplicación desde './App';
importar registerServiceWorker desde './registerServiceWorker';
ReactDOM.render (React.createElement (aplicación), document.getElementById ('root'));
registerServiceWorker ();

Cambie el nombre de src / App.js a src / App.jsx y modifique:

importar Reaccionar desde 'reaccionar';
importar logo de './logo.svg';
importar './App.css';
const App = () => (
  
    
      logo       

Bienvenido a reaccionar

    
    

      Para comenzar, edite src / App.js y guárdelo para volver a cargar.     

  
);
exportar aplicación predeterminada;

Cambie el nombre de src / App.test.js a src / App.test.jsx y modifique:

importar Reaccionar desde 'reaccionar';
importar ReactDOM desde 'react-dom';
importar la aplicación desde './App';
it ('se procesa sin fallar', () => {
  const div = document.createElement ('div');
  ReactDOM.render (, div);
});

3. Agregue stylelint y stylelint-config-standard

  • Instrucciones de stylelint-config-standard y el artículo de Blanca Perello
hilo agregar stylelint stylelint-config-standard --dev

Crear .stylelintrc:

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

4. Agregar guiones eslint y stylelint

Modificar package.json:

"puesta en escena": {
 + "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"
 +]
  },
  "guiones": {
    "precommit": "en pelusa",
    "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'",
+ "prueba: pelusa": "prueba de ejecución: pelusa: **",
+ "test: unit": "test react-scripts --env = jsdom",
+ "prueba": "prueba de ejecución: **",
    "eject": "react-scripts eject",
    "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"
  },

5. Agregue Redux, React Router y Redux Thunk

  • Instrucciones del artículo de Jamie Barton
hilo añadir redux react-redux react-router-dom react-router-redux @ next redux-thunk

6. Agregar módulos CSS

  • ADVERTENCIA: Esto requiere que expulse create-react-app
  • Instrucciones de nulogy y css-loader
expulsión de hilo
instalar hilo

Modifique config / webpack.config.dev.js:

{
  cargador: require.resolve ('css-loader'),
  opciones: {
    importLoaders: 1,
+ módulos: verdadero,
+ localIdentName: "[nombre] __ [local] - [hash: base64: 5]"
  },
},

Modifique config / webpack.config.prod.js:

{
  cargador: require.resolve ('css-loader'),
  opciones: {
    importLoaders: 1,
+ módulos: verdadero,
    minimizar: verdadero,
    sourceMap: verdadero,
   },
},

Repara las rutas CSS existentes

Eliminar ‘-’ de los nombres de clase css / scss

Modifique src / App.jsx para:

importar Reaccionar desde 'reaccionar';
importar logo de './logo.svg';
importar estilos desde './App.css';
const App = () => (
  
    
      logo       

Bienvenido a reaccionar

    
    

      Para comenzar, edite src / App.js y guárdelo para volver a cargar.     

  
);
exportar aplicación predeterminada;

Resultado final

Aquí están los repositorios resultantes:

  • Repo sin módulos CSS
  • Repo después de expulsar y agregar módulos CSS

Otros paquetes utiles

Aquí hay otros paquetes que puede desear:

  • Immutable.js
  • volver a seleccionar
  • normalizr
  • fluir
  • libro de cuentos
  • guia de estilo

Como referencia, estos son los paquetes que create-react-app ya usa actualmente (se pueden ver en expulsar), por lo que no tiene que instalarlos:

 "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-preset-react-app": "^ 3.0.2",
 "Babel-runtime": "6.26.0",
 "Case-sensitive-caminos-webpack-plugin": "2.1.1",
 "Tiza": "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",
 "Cargador de archivos": "0.11.2",
 "Fs-extra": "3.0.1",
 "Html-webpack-plugin": "2.29.0",
 "Broma": "20.0.4",
 "Objeto-asignar": "4.1.1",
 "Postcss-flexbugs-fixes": "3.2.0",
 "Postcss-loader": "2.0.6",
 "Promesa": "8.0.1",
 "Reaccionar": "^ 15.6.1",
 "React-dev-utils": "⁴.0.1",
 "React-dom": "^ 15.6.1",
 "Cargador de estilo": "0.18.2",
 "Sw-precache-webpack-plugin": "0.11.4",
 "Cargador de url": "0.5.9",
 "Paquete web": "3.5.1",
 "Webpack-dev-server": "2.7.1",
 "Webpack-manifest-plugin": "1.2.1",
 "Whatwg-fetch": "2.0.3"

¡Eso es!

Extra: configurar manualmente el paquete web

Aquí hay recursos útiles para configurar un paquete web para un proyecto React sin usar la aplicación Create React.

También puede usar Next.js para las aplicaciones React del lado del servidor para evitar la molestia de configurar el paquete web usted mismo.

Hola, avíseme si le resulta útil: ¡haga clic en el botón a continuación o publique un comentario!

Si le gustan los artículos sobre React, Redux, Webpack, JavaScript, Sass / SCSS u otras guías de desarrollo web interesantes, haga clic en el botón "Seguir".