Table of contents
How to install
You can use this project like template.
To do this, you need press button "Use this template".
Or clone repository and go to the project folder.
git clone https://github.com/awibox/react-redux-app-template.git ProjectName
cd ProjectName
Then you should install required dependencies.
yarn install
Getting started
To launch project you need to execute following command:
yarn start
Open in browser: http://localhost:8888
You can change the port in the webpack.config.js
ESlint
For code checking we use ESLint with airbnb configuration.
To run linter you need to execute command:
yarn lint
If you need to launch automatic mistakes fixing you need to execute following command:
yarn fix
Jest tests
Jest with Enzyme is used for testing.
yarn test
Setup pre-commit
You can set up git hook (pre-commit). In this case linter will be launched for necessary files before commit.
yarn setup
Project structure
react-redux-app-template/
|
├──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
