- How to install
- Use like template
- Getting started
- Run linter
- Run tests
- Setup pre-commit
- Project structure
You need to clone repository and go to the project folder.
git clone https://github.com/awibox/react-redux-app-boilerplate.git ProjectName
cd ProjectNameThen to install required dependencies.
yarn installYou can use this project like template. Press button "Use this template". Then go to the project directory and install dependencies.
yarn installTo launch project you need to execute following command:
yarn startOpen in browser: http://localhost:8888
You can change the port in the webpack.config.js
For code checking we use ESLint with airbnb configuration. To run linter you need to execute command:
yarn lintIf you need to launch automatic mistakes fixing you need to execute following command:
yarn fixJest with Enzyme is used for testing.
yarn testYou can set up git hook (pre-commit). In this case linter will be launched for necessary files before commit.
yarn setupreact-redux-app-boilerplate/
|
├──public/ // Directory for the build
| ├──icons // Icons for the manifest.json and favicon
| ├──favicon.ico
| └──manifest.json // The web app manifest is a simple JSON file
| // that tells the browser about your web application
| // and how it should behave when 'installed'
| // on the user's mobile device or desktop.
|
├──spec/ // Directory with setup files for jest
| └──...
|
├──src/
| ├──actions // Redux actions
│ │ ├──[name]Actions.js
│ │ ├──...
│ │ └──types.js // Redux action type constants
│ │
| ├──components // Components that are reused
│ │ ├──[Name]
│ │ │ ├──[Name].js
│ │ │ ├──[Name].test.js // Jest test
│ │ │ ├──[Name].test.js.snap // Jest snapshot
│ │ │ └──[Name].scss // Components style
│ │ └──...
│ │
| ├──pages // Components that use redux connect (Containers)
│ │ ├──[Name]
│ │ │ ├──[Name].js
│ │ │ ├──[Name].test.js // Jest test
│ │ │ ├──[Name].test.js.snap // Jest snapshot
│ │ │ └──*[Name].scss // Container styles (optional)
│ │ └──...
│ │
| ├──reducers // Reducers
│ │ ├──[name]Reducer.js
│ │ ├──[name]Reducer.test.js // Jest test
│ │ ├──...
│ │ └──index.js // combineReducers
│ │
| ├──selectors // reselect
│ │ ├──[name]Selectors.js
│ │ └──...
│ │
| ├──styles
│ │ ├──_variables.scss // SCSS variables (should be imported for use)
│ │ ├──build.scss // Basic styles
│ │ └──container.scss // Style for router.js
│ │
| ├──templates
│ │ └──index.html // The template by which index.html is created in public
│ │
| ├──config.js // Constant config
| ├──index.js // App entry
| ├──router.js // Router
| └──store.js // createStore
|
└──webpack.config.js // webpack config for development and production