Asenna luo-reagoi-sovellus seuraavilla: Redux, React Router, Redux Thunk, Prettier, SCSS, Airbnb eslint, Standard stylelint ja CSS-moduulit

(Hyvin) arvioitu opas Create React App -sovelluksen perustamisesta

Käytä tätä ohjeena asentaaksesi nopeasti luo-reagoi -sovellus suosituilla paketeilla.

Olen viettänyt tunteja etsimällä asiakirjoja ja artikkeleita näiden pakettien oikeasta asennuksesta. Tein tämän oppaan, joten sinun ei tarvitse.

Tässä oppaassa oletetaan, että panimo, nvm ja lanka on asennettu.

0. Asenna ja käytä Create React App

lanka globaali lisää luoda-reagoida-sovellus
luo-reagoi-sovellus projektiisi nimi
cd reagoi-emäs
git init

1. Lisää SCSS

  • Ohjeet luo-reagoi-sovelluksen käyttöoppaasta
lanka lisää node-sass-chokidar npm-run-all

Lisää pakettiin.json:

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

Nimeä src / App.css nimellä src / App.scss

Asenna src / App.css poistaminen, jotta se poistetaan lähdeohjauksesta.

Lisää .gitignore:

+ # rakenna tuotteita
+ Src / ** / *. CSS

2. Lisää mukavampi

  • luo-reagoi-sovellus suosittelee Prettieria ESLint-sääntöjen yli
  • Ohjeet luo-reagoi-sovelluksen käyttöoppaasta
lanka lisää husky nukkavaiheen kauniimpi

Luo .prettierrc:

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

Lisää pakettiin.json:

+ "nukkaamaton": {
+ "src / ** / *. {js, jsx, json, scss, css}": [
+ "prettier --config .prettierrc --write",
+ "lisää"
+]
+},
"skriptit": {
+ "ensi sitoutuminen": "nukkainen",
     "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src / -o src /",

Alusta koko projekti käyttämällä:

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

Integroi Prettier editoriin.

3. Lisää eslint ja eslint-config-airbnb

  • Ohjeet eslint-config-airbnb: stä ja Blanca Perellon artikkelista

Asenna kaikki asiaankuuluvat eslint-config-paketit, jotka on lueteltu:

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

Voit tehdä tämän käyttämällä:

(
  viedä PKG = eslint-config-airbnb;
  npm info "$ PKG @ latest" peerDependencies --json | komento sed 's / [\ {\},] // g; s /: / @ / g '| xargs lanka lisää --dev "$ PKG @ latest"
)

Luo .eslintrc.js:

  • (.eslintrc.js on etusijalla muihin eslintrc-muotoihin nähden)
module.exports = {
  'env': {
    'selain': totta,
    'jest': totta,
    'es6': totta,
    'solmu': totta,
  },
  'ulottuu': [
    'Airbnb'
    'Kauniimpi',
  ],
  'plugins': [
    'Kauniimpi',
  ],
  'säännöt': {
    'kaunein / kauniimpi': ['virhe', {
      'singleQuote': totta,
      'trailingComma': 'es5'
    }],
  },
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': totta,
    }
  }
}

Lisää sivun src / registerServiceWorker.js alkuun:

+ / * ei-konsoli, ei-param-uudelleenmääritys, ei-käytä-ennen-määritä * /
// Tuotannossa rekisteröimme palveluntarjoajan palvelemaan omaisuutta paikallisesta välimuistista.

Lint nykyinen JS

Korjaa eräät eslint-ongelmat automaattisesti:

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

Muokkaa src / index.js:

tuo reagoida 'reagoida';
tuoda ReactDOM 'react-dom': sta;
tuo './index.css';
tuo sovellus './App' -sovelluksesta;
Tuo registerServiceWorker hakemistosta './registerServiceWorker';
ReactDOM.render (React.createElement (App), document.getElementById ('root'));
registerServiceWorker ();

Nimeä src / App.js uudelleen nimeksi src / App.jsx ja muokkaa:

tuo reagoida 'reagoida';
tuo logo logosta './logo.svg';
tuo './App.css';
const App = () => (
  
    
      logo       

Tervetuloa reagoimaan

         

      Aloita muokkaamalla src / App.js ja tallentamalla se uudelleen.         );

vie oletussovellus;

Nimeä src / App.test.js uudelleen nimeksi src / App.test.jsx ja muokkaa:

tuo reagoida 'reagoida';
tuoda ReactDOM 'react-dom': sta;
tuo sovellus './App' -sovelluksesta;
se ('hahmottaa ilman kaatumista', () => {
  const div = document.createElement ('div');
  ReactDOM.render (, div);
});

3. Lisää stylelint ja stylelint-config-standard

  • Ohjeet stylelint-config-standardista ja Blanca Perellon artikkelista
lanka lisää stylelint stylelint-config-standard --dev

Luo .stylelintrc:

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

4. Lisää eslint- ja stylelint-skriptit

Muokkaa paketti.json:

"nukkaava": {
 + "src / ** / *. {js, jsx, json}": [
 + "eslint - korjaus",
 + "prettier --config .prettierrc --write",
 + "lisää"
 +],
 + "src / ** / *. {scss, css}": [
 + "stylelint --config = .stylelintrc --fix",
 + "prettier --config .prettierrc --write",
 + "lisää"
 +]
  },
  "skriptit": {
    "encommit": "nukkaava",
    "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": "reagoi-skriptit alkavat",
    "start": "npm-run-all -p katsella-css start-js",
    "build": "npm run build-css && react-scripts build",
+ "testi: nukka: js": "eslint - teksti = js - teksti = jsx.",
+ "testi: nukka: scss": "stylelint --config = .stylelintrc '** / *. scss'",
+ "testi: nukkaa": "ajokoe: nukkaa: **",
+ "testi: yksikkö": "reagoi-komentosarjojen testi --env = jsdom",
+ "testi": "ajo-testi: **",
    "eject": "react-scripts eject",
    "eslint-check": "eslint - print-config .eslintrc.js | eslint-config-prettier-check"
  },

5. Lisää Redux, React Router ja Redux Thunk

  • Ohjeet Jamie Bartonin artikkelista
lanka lisää redux react-redux react-router-dom react-router-redux @ seuraava redux-thunk

6. Lisää CSS-moduulit

  • VAROITUS: Tämä edellyttää, että poistat luo-reagoi -sovelluksen
  • Ohjeet noulologialta ja css-loaderilta
langan poisto
lanka asentaa

Muokkaa config / webpack.config.dev.js:

{
  kuormain: vaatii.resolve ('css-loader'),
  vaihtoehdot: {
    importLoaders: 1,
+ moduulit: totta,
+ localIdentName: "[nimi] __ [paikallinen] - [hash: base64: 5]"
  },
},

Muokkaa config / webpack.config.prod.js:

{
  kuormain: vaatii.resolve ('css-loader'),
  vaihtoehdot: {
    importLoaders: 1,
+ moduulit: totta,
    minimoi: totta,
    sourceMap: totta,
   },
},

Korjaa olemassa olevat CSS-polut

Poista '-' css / scss-luokan nimistä

Muokkaa src / App.jsx muotoon:

tuo reagoida 'reagoida';
tuo logo logosta './logo.svg';
tuo tyylejä './App.css';
const App = () => (
  
    
      logo       

Tervetuloa reagoimaan

         

      Aloita muokkaamalla src / App.js ja tallentamalla se uudelleen.         );

vie oletussovellus;

Lopputulos

Tässä ovat tuloksena olevat repot:

  • Repo ilman CSS-moduuleja
  • Repo CSS-moduulien poistamisen ja lisäämisen jälkeen

Muut hyödylliset paketit

Tässä on joitain muita paketteja, jotka haluat ehkä:

  • Immutable.js
  • valitse uudelleen
  • normalizr
  • virtaus
  • satukirja
  • styleguidist

Viitteenä tässä ovat ne paketit, jotka luovat-reagoi-sovellus jo käyttävät (näkyvissä poistettaessa), joten sinun ei tarvitse asentaa näitä:

 ”Automaattinen korjausyksikkö”: “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”,
 ”Isot ja pienet kirjaimet-polut-verkkopakkauslaajennus”: “2.1.1”,
 ”Liitu”: “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”,
 ”Uute-teksti-webpack-laajennus”: “3.0.0”,
 “Tiedostolataus”: “0.11.2”,
 “Fs-extra”: “3.0.1”,
 “Html-webpack-plugin”: “2.29.0”,
 “Jest”: “20.0.4”,
 ”Objektinmääritys”: “4.1.1”,
 ”Postcss-flexbugs-fixes”: “3.2.0”,
 ”Postcss-loader”: “2.0.6”,
 ”Lupaus”: “8.0.1”,
 ”Reagoida”: “^ 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”,
 “Url-loader”: “0.5.9”,
 “Verkkopakkaus”: “3.5.1”,
 ”Webpack-dev-server”: “2.7.1”,
 ”Webpack-manifest-plugin”: “1.2.1”,
 “Whatwg-fetch”: “2.0.3”

Se siitä!

Lisäkuva: Verkkopaketin asetus manuaalisesti

Tässä on hyödyllisiä resursseja webpackin määrittämiseen React-projektille ilman Luo React -sovellusta.

Voit käyttää Next.js: tä myös palvelinpuolen React-sovelluksiin välttääksesi vaivaa itse määrittää webpaketit.

Hei, ilmoita minulle, jos löydät siitä hyödyllistä - napsauta alla olevaa -painiketta tai kirjoita kommentti!

Jos pidät artikkeleista Reakt, Redux, Webpack, JavaScript, Sass / SCSS tai muista hienoista web-kehitysoppaista, napsauta Seuraa-painiketta.