Base on: Create React App
- Prettier on IDE and git pre-commit hook
- CSS module and SASS
- Redux and support multiple reducers
- React router with Google Analytics track
- Travis for deploy on Github page
- Absolute import for SASS and JS
- Useful package:
- Typescript
Tag: prettier, eslint, lint-staged, husky
Prettier config can be found at .prettierrc
.
All prettier rules has been set to warn
in package.json > eslintConfig > rules
so that prettier error will not block the npm run dev
when you're developing.
If you want at other eslint config
(like airbnb)
please directly add inside package.json > eslintConfig
Tag: css-module, sass
All component style file should be named as *.module.scss
or *.module.sass
,
then all the feature from sass
and css-module can be supported.
Tag: redux, redux-devtools, combineReducers
All redux related code has been placed inside src/store
. Visit
redux for more best practice details.
Tag: react-router, google-analytics
Using HashRouter to avoid 404 error when refresh page on SPA.
Please add your google analytics tracking id(UA-XXXXXXXXX-X
) in
.env > REACT_APP_GOOGLE_ANALYTICS_ID
, after you added
will see something like this REACT_APP_GOOGLE_ANALYTICS_ID=UA-XXXXXXXXX-X
Tag: travis, gh-pages
Steps:
- Add a branch
gh-pages
in your repository and push it to Github. When you finished github will automate activate github page feature for you. - Check your github page url inside your repo setting on Github, then update it on the
package.json > homepage
. Make sure the last character of url should not have slash(/
) - Sign in Travis and enable integration of your repository
- Generate a Github Personal Access Token for Travis,
only need to check
repo
scope. Remember this token can use in multiple repos. - Add Environment Variables inside your repo travis setting page. The environment variable key
should be
GITHUB_TOKEN
and value is the token you created on last step. - Create a release in Github then Travis will help you deploy on Github page.
- Visit your url after Travis finished the job. Hooray!
Tag: import, IDE
You can directly use import App from 'components/App';
to import component and
@import 'styles/_variable.scss';
to import sass variable. But however your IDE
will not auto resolve it.
- Go to Preference > Directories and mark the src directory as a Resources Root
- go to Preference > Editor > Code Style > JavaScript > Imports tab and tick Use paths relative to the project, resource or sources roots.
No need to do other setting, it can read jsconfig.json
automatic. We have predefined for you.