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 ProjectNameThen you should install required 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-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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent