/react-boilerplate

Quick scaffolding for developing web application based on CRA

Primary LanguageJavaScript

React Boilerplate

Base on: Create React App

Features

  1. Prettier on IDE and git pre-commit hook
  2. CSS module and SASS
  3. Redux and support multiple reducers
  4. React router with Google Analytics track
  5. Travis for deploy on Github page
  6. Absolute import for SASS and JS
  7. Useful package:

Future support

  • Typescript

Feature description

1. Prettier and Lint

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

2. CSS module with SASS

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.

3. Redux

Tag: redux, redux-devtools, combineReducers

All redux related code has been placed inside src/store. Visit redux for more best practice details.

4. Router with GA

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

5. Travis gh-pages deploy

Tag: travis, gh-pages

Steps:

  1. 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.
  2. 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(/)
  3. Sign in Travis and enable integration of your repository
  4. Generate a Github Personal Access Token for Travis, only need to check repo scope. Remember this token can use in multiple repos.
  5. 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.
  6. Create a release in Github then Travis will help you deploy on Github page.
  7. Visit your url after Travis finished the job. Hooray!

6. Absolute Import

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.

Webstorm IDE

  1. Go to Preference > Directories and mark the src directory as a Resources Root
  2. go to Preference > Editor > Code Style > JavaScript > Imports tab and tick Use paths relative to the project, resource or sources roots.

VS Code

No need to do other setting, it can read jsconfig.json automatic. We have predefined for you.