Seadistage loomise-reageerimise rakendus: Redux, React Router, Redux Thunk, Prettier, SCSS, Airbnb eslint, Standard stylelint ja CSS moodulitega

(Väga) hinnatud juhend looge rakenduse React seadistamiseks

Kasutage seda teatmikuna populaarsete pakettide kiireks loomiseks-reageerimiseks rakenduse seadistamiseks.

Olen veetnud tunde dokumentide ja artiklite otsimisel, kuidas neid pakette õigesti seadistada. Tegin selle juhendi, nii et te ei pea seda tegema.

Selles juhendis eeldatakse, et teil on paigaldatud pruul, nvm ja lõng.

0. Installige ja looge rakendus React App

lõnga globaalne lisamis-loo-reageeri-rakendus
luua-reageerida-rakendus oma projekti-nimi
cd reageerimise alus
git init

1. Lisage SCSS

Juhised rakenduse loomise-reageerimise rakenduse juhendist

lõng lisada sõlm-sass-chokidar npm-run-all

Lisage paketi.json:

"skriptid": {
+ "ehita-css": "sõlm-sass-chokidar - lisa-tee ./src - lisa-tee ./ 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": "reageerima-skriptid algavad",
+ "start": "npm-kõik-kõik-vaata-vaata-css-stardid-js",
+ "ehitamine": "npm käivitab build-css && reageeri-skriptid ehitavad",
     "test": "reageeri skriptide test - env = jsdom",

Nimetage src / App.css ümber src / App.scss

Tehke src / App.css kustutamine kohustuslikuks, et see eemaldataks lähtekontrollist.

Lisage .gitignore:

+ # ehitada tooteid
+ src / ** / *. css

2. Lisage uhkem

loo-reageeri-rakendus soovitab ESLinti reeglite kohal Prettier
Juhised rakenduse loomise-reageerimise rakenduse juhendist

lõng lisab teravamaitselise kiudainega uhkemat

Loo .prettierrc:

{
  'singleQuote': tõsi,
  'trailingComma': 'es5',
}

Lisage paketi.json:

+ "ebemevaheline": {
+ "src / ** / *. {js, jsx, json, scss, css}": [
+ "prettier --config .prettierrc --write",
+ "lisa lisa"
+]
+},
"skriptid": {
+ "eeltellimus": "ebemevaheline",
     "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src / -o src /",

Vormindage kogu projekt, kasutades:

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

Integreerige Prettier oma redaktorisse.

3. Lisage eslint ja eslint-config-airbnb

Juhised eslint-config-airbnb ja Blanca Perello artiklist

Installige kõik asjakohased eslint-config-i paketid, mis on loetletud:

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

Saate seda teha kasutades:

(
  eksport PKG = eslint-config-airbnb;
  npm info "$ PKG @ latest" peerDependencies --json | käsk sed 's / [\ {\},] // g; s /: / @ / g '| xargs lõng lisada --dev "$ PKG @ latest"
)

Loo .eslintrc.js:

(.eslintrc.js on eelistatud teiste eslintrc-vormingute ees)

moodul.exports = {
  'env': {
    'brauser': tõsi,
    'jest': tõsi,
    'es6': tõsi,
    'sõlm': tõsi,
  },
  'laieneb': [
    'airbnb',
    'uhkem',
  ],
  'pluginad': [
    'uhkem',
  ],
  'reeglid': {
    'uhkem / uhkem': ['tõrge', {
      'singleQuote': tõsi,
      'trailingComma': 'es5'
    }],
  },
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': tõsi,
    }
  }
}

Lisage src / registerServiceWorker.js algusesse:

+ / * eslint-keela no-console, no-param-reign, no-use-before-define * /
// Tootmisel registreerime teenindava töötaja, et teenindada varasid kohalikust vahemälust.

Lint olemasolev JS

Mõne eslindiprobleemi automaatne parandamine:

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

Muuda src / index.js:

importida reageerida 'reageerima';
impordi ReactDOM 'react-dom'ist';
import './index.css';
impordi rakendus './App';
impordi registerServiceWorker kataloogist './registerServiceWorker';

ReactDOM.render (React.createElement (App), document.getElementById ('root'));
registerServiceWorker ();

Nimetage src / App.js ümber src / App.jsx ja muutke:

importida reageerida 'reageerima';
impordi logo saidilt './logo.svg';
import './App.css';

const App = () => (
  
    
      
       Tere tulemast reageerima 
    
    
      Alustamiseks redigeerige  src / App.js  ja salvestage uuesti laadimiseks.
    
  
);

eksport vaikimisi rakendus;

Nimetage src / App.test.js ümber src / App.test.jsx ja muutke:

importida reageerida 'reageerima';
impordi ReactDOM 'react-dom'ist';
impordi rakendus './App';

see ('renderdab ilma krahhita', () => {
  const div = document.createElement ('div');
  ReactDOM.render (, div);
});

3. Lisage stylelint ja stylelint-config-standard

Juhised stylelint-config-standard ja Blanca Perello artiklist

lõng lisada stylelint stylelint-config-standard --dev

Loo .stylelintrc:

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

4. Lisage skriptid eslint ja stylelint

Muuda paketti.json:

"ebemevaheline": {
 + "src / ** / *. {js, jsx, json}": [
 + "eslint - fix",
 + "prettier --config .prettierrc --write",
 + "lisa lisa"
 +],
 + "src / ** / *. {scss, css}": [
 + "stylelint --config = .stylelintrc --fix",
 + "prettier --config .prettierrc --write",
 + "lisa lisa"
 +]
  },
  "skriptid": {
    "eeltellimine": "lint-etapp",
    "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": "reageerima-skriptid käivituvad",
    "start": "npm-käivitage kõik-vaatamis-css-start-js",
    "build": "npm käivitab build-css && react-scripts build",
+ "test: lint: js": "eslint - tekst = js - tekst = jsx.",
+ "test: lint: scss": "stylelint --config = .stylelintrc '** / *. scss'",
+ "test: lint": "run-test: lint: **",
+ "test: unit": "reageeri skriptide test --env = jsdom",
+ "test": "käituskatse: **",
    "eject": "react-scripts eject",
    "eslint-check": "eslint - print-config .eslintrc.js | eslint-config-prettier-check"
  },

5. Lisage Redux, React Router ja Redux Thunk

Jamie Bartoni artikli juhised

lõng lisada redux reageerida-redux reageerida-ruuter-dom reageerima-ruuter-redux @ järgmine redux-thunk

6. Lisage CSS-moodulid

HOIATUS. See nõuab rakenduse loo-reageeri väljutamist
Juhtnöörid ja css-laadur

lõnga väljutamine
lõnga paigaldada

Konfiguratsiooni / webpack.config.dev.js muutmine:

{
  laadur: need.resolve ('css-loader'),
  valikud: {
    importLaadurid: 1,
+ moodulid: tõsi,
+ localIdentName: "[nimi] __ [kohalik] - [räs: base64: 5]"
  },
},

Konfiguratsiooni / webpack.config.prod.js muutmine:

{
  laadur: need.resolve ('css-loader'),
  valikud: {
    importLaadurid: 1,
+ moodulid: tõsi,
    minimeeri: tõsi,
    sourceMap: tõsi,
   },
},

Parandage olemasolevad CSS-i teed

Eemaldage „-” klasside css / scss nimedest

Muutke src / App.jsx järgmiselt:

importida reageerida 'reageerima';
impordi logo saidilt './logo.svg';
impordi stiilid './App.css';

const App = () => (
  
    
      
       Tere tulemast reageerima 
    
    
      Alustamiseks redigeerige  src / App.js  ja salvestage uuesti laadimiseks.
    
  
);

eksport vaikimisi rakendus;

Lõpptulemus

Siit tulenevad repod:

Repo ilma CSS-mooduliteta
Repo pärast CSS-moodulite väljatõmbamist ja lisamist

Muud kasulikud paketid

Siin on mõned muud paketid, mida võiksite vajada:

Immvable.js
vali uuesti
normaliseerija
voolama
juturaamat
stiilijuhik

Võrdluseks: siin on need paketid, mida loomine-reageerimine-rakendus juba kasutab (kuvatav väljutamisel), nii et te ei pea neid installima:

 “Autoprefikser”: “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-reagect-app”: „^ 3.0.2”,
 „Babel-runtime”: „6.26.0”,
 “Tõstutundlikud-teed-veebipaketi pistikprogramm”: “2.1.1”,
 Kriit: „1.1.3”,
 “Css-loader”: “0.28.4”,
 „Dotenv”: „4.0.0”,
 „Eslint”: „4.4.1”,
 „Eslint-config-reageeri-rakendus”: „².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”,
 „Väljavõtte-teksti-veebipaketi pistikprogramm”: „3.0.0”,
 “Faililaadur”: “0.11.2”,
 “Fs-extra”: “3.0.1”,
 „Html-webpack-plugin”: „2.29.0”,
 “Jest”: “20.0.4”,
 „Objekti määramine”: „4.1.1”,
 “Postcss-flexbugs-fixes”: “3.2.0”,
 “Postcss-loader”: “2.0.6”,
 “Lubadus”: “8.0.1”,
 „Reageeri”: „^ 15.6.1”,
 „React-dev-utils”: „⁴.0.1”,
 „Reageeri-dom”: „^ 15.6.1”,
 “Laadija”: “0.18.2”,
 „Sw-precache-webpack-plugin”: „0.11.4”,
 „URL-laadur”: „0.5.9”,
 „Veebipakk”: „3.5.1”,
 „Webpack-dev-server”: „2.7.1”,
 „Webpack-manifest-plugin”: „1.2.1”,
 „Whatwg-fetch”: „2.0.3”

See selleks!

Extra: veebipaketi käsitsi seadistamine

Siin on kasulikke ressursse Reacti projekti jaoks veebipaketi seadistamiseks ilma rakenduse Loo React rakenduseta.

Kui soovite veebipaketi enda seadistamisel vaeva näha, võite kasutada Next.js serveripoolsete React-rakenduste jaoks.

Tere, andke teada, kui see on teile kasulik - klõpsake allpool asuvat nuppu või postitage kommentaar!

Kui teile meeldivad artiklid React, Redux, Webpack, JavaScripti, Sass / SCSS või muude lahedate veebiarenduse juhendite kohta, klõpsake nuppu Jälgi.

internautasporlapaz.org