π React starter kit for a modern single page (SPA) application (dependencies updated at 28 July 2017). Zero configuration. Ready to go. Just paste your code!
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.
import 'components/button'
instead of import '../../../components/button'
)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 |
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 to dist
folder)
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:
redux
and redux-saga