This generator add redux, emotion-js and other useful libraries and tools like react-router, in top of the most common React starter Create React App. Below you will find some information on how to perform common tasks.
First, install Yeoman and generator-create-redux-app using npm ( You’ll need to have Node >= 6.10.3 on your machine node.js).
npm install -g yo
npm install -g generator-create-redux-appThen generate your new project:
mkdir project-name
cd project-name
yo create-redux-appOnce the installation is done, you can run some commands inside the project folder:
Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will see the build errors and lint warnings in the console.
Runs the test watcher in an interactive mode.
By default, runs tests related to files changes since the last commit.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
- Folder Structure
- Redux Dev Tools
- Git Hooks
- Prettier
- ESLint
- Routing
- Emotion Js
- Adding Sass Preprocessor
- Redux Store
- Create React App config
create-redux-app override create-redux-app folder structure. Once the generator runs your project folders should look like this:
my-app/
docs/
public/
index.html
favicon.ico
src/
actions/
assets/
components/
constants/
containers/
reducers/
routes/
store/
tests/
styles/
utils/
index.js
For the project to build, these files must exist with exact filenames:
public/index.htmlis the page template;src/index.jsis the JavaScript entry point.
You can delete or rename the other files.
You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by Webpack.
You need to put any JS and CSS files inside src, or Webpack won’t see them.
Only files inside public can be used from public/index.html.
Read instructions below for using assets from JavaScript and HTML.
You can, however, create more top-level directories.
They will not be included in the production build so you can use them for things like documentation.
Create Redux App use Redux DevTools Extension. It provides access to the most popular monitors, is easy to configure and to filter actions.
- from Chrome Web Store;
- or build it with
npm i && npm run build:extensionand load the extension's folder./build/extension; - or run it in dev mode with
npm i && npm startand load the extension's folder./dev.
- from Mozilla Add-ons;
- or build it with
npm i && npm run build:firefoxand load the extension's folder./build/firefox(just select a file from inside the dir).
- just specify
REDUX_DEVTOOLSinelectron-devtools-installer.
We use Husky to create Git Hooks. There is a pre commit hook than run prettier to ensure good code format. You can also create a prepush hook.
// Edit package.json
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
npm uninstall husky --save-devAnd delete the husky key inpackage.json
You can add/remove rules if you want, just edit the .prettierrc file. Prettier runs in a precommit hooks to ensure good code formating with pretty-quick.
// Edit package.json
"scripts": {
"format": "prettier --write '**/*.{js,jsx,json,md}'",
"format:changed": "pretty-quick",
"format:staged": "pretty-quick --staged",
"eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
npm uninstall eslint-config-prettier pretty-quick prettier --save-devDelete
"scripts": {
"format": "prettier --write '**/*.{js,jsx,json,md}'",
"format:changed": "pretty-quick",
"format:staged": "pretty-quick --staged",
"eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
You can add/remove rules or even extend plugins if you want. We extend airbnb ESLint rules.
// Edit eslintrc.json
{
"extends": ["airbnb", "prettier", "prettier/react"],
"plugins": ["prettier"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module"
},
"env": {
"es6": true,
"jest": true,
"browser": true,
"node": true
},
"globals": {
"DEBUG": false
},
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"import/no-extraneous-dependencies": 0,
"import/no-unresolved": 0,
"import/extensions": 0,
"import/prefer-default-export": 0,
"import/first": 0
}
}
The best option for routing is React Router specifically its new version for the web react-router-dom.
src/routes/index.js is the starter point of the app, where all the routes are specified and render the containers and components. Specify here all your routes, redirects, transitions, etc.
emotion-js allow you to write actual CSS code in your JavaScript to style your components, removing the mapping between components and styles.
See the official documentation for more information!
Can I use Sass with this boilerplate? yes, although we advise against it and do not support this. We selected
styled-components
over Sass because its approach is more powerful: instead of trying to
give a styling language programmatic abilities, it pulls logic and configuration
out into JS where we believe those features belong.
If you really still want (or need) to use Sass then...
The Redux store is created this way so you can use it anywhere, even outside redux, in any js file.
const { default: store } = process.env.NODE_ENV === 'production'
? require('./storeProd')
: require('./storeDev')
module.exports = store()import store from './store'
store.getState() // Get the state
store.dispatch() // Dispatch actionsYou can find the most recent version of the create-react-app guide here.