graaf-style-guide v1.7.15

React boilerplate with TypeScript ·

This boilerplate includes several starter component examples and a request to GitHub API.

The following packages are used here:

• React
• Redux (React-Redux)
• Redux Saga
• Reduxsauce
• Redux Persist
• Connected React Router
• Axios
• Typescript
• Webpack (with Webpack-Merge and plugins)
• Babel
• Classnames
• Cross Env
• Stylelint with some plugins
• Eslint (with Airbnb config as base)
• Imagemin (Imagemin Webpack)
• SASS (SASS Loader)
• PostCSS (PostCSS Loader)
• and some other.

Decription

Simple template for React app with Redux as state container and TypeScript, a typed superset of JavaScript. Redux Saga used for asynchronous things. Reduxsause for more simple reducers creating. For HTTP requests used Axios. Webpack as bundler.

As CSS pre-processor used SASS with CSS-Modules. For simple job with classes used classnames package. PostCSS with autoprefixer for add vendor prefixes, css-mqpacker for pack same CSS media query rules into one. Imagemin for images compress and convert to Webp. Prettier used for CSS code formatting (but not used for js, ts, etc.).

For linting used Stylelint for CSS and Eslint for js, ts, jsx and tsx.

Husky and lint-staged used for precommit linting and fix style errors.

Testing

npm test

will start typescript compiler for check errors and linting with autofix style errors in all files from src folder.

You can also

npm run tslint

or

npm run eslint

or

npm run stylelint

for separate running typescript compiler, eslint and stylelint with fixing errors.

License

This bilerplate is MIT licensed.