- This is a full setup for create-react-app with
redux
andreact-router
and a custom eslint config - There are some SCSS utilities as well
- This follow step are already include in the repot, just clone and
yarn start
everything should work pretty well
yarn add global create-react-app
create-react-app [your project]
cd [your project]
yarn add node-sass-chokidar npm-run-all
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"
}
Rename App.css
to App.scss
Add to .gitignore
src/**/*.css
Install all relevant eslint-config
packages listed in:
npm info "eslint-config-airbnb@latest" peerDependencies
You can run this as well:
(
export PKG=eslint-config-airbnb;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add --dev "$PKG@latest"
)
Create .eslintrc.js
module.exports = {
"extends": "airbnb",
"parser": "babel-eslint",
"globals": {
"window": true,
"document": true
},
// rules
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"semi": ["error", "never"],
"quotes": ["error", "single"],
"eol-last": ["off"],
"no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
// jsx-a11y rules
"jsx-a11y/anchor-is-valid": ["off"],
"jsx-a11y/click-events-have-key-events": ["off"],
"jsx-a11y/no-noninteractive-element-interactions": ["off"],
"jsx-a11y/no-static-element-interactions": ["off"],
},
};
Create .eslintignore
and add:
src/registerServiceWorker.js
src/App.test.js
yarn add redux react-redux react-router-dom react-router-redux@next redux-thunk