Includes only the latest and greatest web technologies (dependencies updated at 28 July 2017). Use it for your next heroic SPA project because you can't go wrong with it. Contains minimal viable "hello, world" code just to proof it works. Remove hello world and write your own great project.
Features
- JS: using plain ES2015/16/17. Minimizing use of experimental Stage-X javascript features. Only stage-3/4 features are supported, because they're relatively stable
- Redux: using redux-actions methodology
- CSS: using CSS Modules methodology
- Linting: using airbnb config
- Using tests (by jest, example)
- Using git pre-push hook to force run tests and linting before push
- Webpack:
- vendor code splitting (2 separate chunks: one for libraries and one for application. Let your browser cache libraries)
- absolute imports for application code (e.g.
import 'components/button'instead ofimport '../../../components/button')
- Using visual analyzing tools for inspecting the bundle to always control its content and size
Suitable for
- Education
- Small pet projects/prototypes
- Production
🎁 What’s Inside?
If you don't need some library then just don't use it. Its source code will NOT be included in the final bundle
| Name | Library Type | Original Description | Example Config | Notes |
|---|---|---|---|---|
| react | View layer | A javascript library for building user interfaces | ||
| react-router | Routing | Declarative routing for React | ||
| redux | Data management | Predictable state container for JavaScript apps | ||
| reselect | Data management | Selector library for Redux | ||
| react-redux | Data management | Official React bindings for Redux | ||
| redux-actions | Data management | Flux Standard Action utilities for Redux | ||
| redux-thunk | Data management | Thunk middleware for Redux | ||
| redux-saga | Data management | An alternative side effect model for Redux apps | An alternative to redux-thunk. You need to import "regenerator-runtime/runtime"; for using generators/yield |
|
| redux-logger | Utils | Logger for Redux | ||
| jest | Test framework | Painless JavaScript Testing | ||
| webpack 3 | Build/Bundler | A module bundler for modern javascript applications (bundling, minification, watch mode, ect.) | webpack.config.js | Loaders: babel-loader, eslint-loader) |
| webpack-bundle-analyzer | Build/Bundler | Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap | ||
| babel | Transpiler | ES2015/2016/2017 support | .babelrc | Plugins: transform-object-rest-spread (spreads are currently at STAGE 3) |
| eslint | Linter | The pluggable linting utility for JavaScript and JSX | .eslintrc.js | |
| isomorphic-fetch | Polyfill | Isomorphic WHATWG Fetch API, for Node & Browserify | whatwg-fetch from GitHub on client, node-fetch on server | |
| yarn | Package management | Fast, reliable, and secure dependency management |
👨🏼💻 Usage
-
install dependencies with:
yarn -
run in development mode (watch changes in the files and refresh your browser automatically):
yarn start(then go http://localhost:8080/ and you should see this) -
would like to publish the project as a website? Then make a distribution build by generating static files:
yarn dist(then go todistfolder) -
would like to see analytics for the bundle?:
yarn dist:analyze -
run tests:
yarn test -
run linting:
yarn lint
If you have any questions or comments please don’t hesitate to leave a feedback in issues or contact me on Facebook. Thanks!
https://vinogradov.github.io/react-starter-kit:
Examples
- examples/react - trivial hello world using React
- examples/redux/one-file - the simplest redux example, all in one file (for fast prototyping)
- examples/redux/separate-files - counter example with
reduxandredux-saga