See in action

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

1. 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
2. Redux: using redux-actions methodology
3. CSS: using CSS Modules methodology
4. Linting: using airbnb config
5. Using tests (by jest, example)
6. Using git pre-push hook to force run tests and linting before push
7. 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 of import '../../../components/button')

8. Using visual analyzing tools for inspecting the bundle to always control its content and size

Suitable for

1. Education
2. Small pet projects/prototypes
3. 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

1. install dependencies with:
   yarn

2. 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)

3. would like to publish the project as a website? Then make a distribution build by generating static files:
   yarn dist (then go to dist folder)

4. would like to see analytics for the bundle?:
   yarn dist:analyze

5. run tests:
   yarn test

6. 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:

Webpack bundle analyzer:

Examples

1. examples/react - trivial hello world using React
2. examples/redux/one-file - the simplest redux example, all in one file (for fast prototyping)
3. examples/redux/separate-files - counter example with redux and redux-saga