Includes only the latest and greatest web technologies (dependencies updated at May 15 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.
- Use plain ES2015/16/17. Minimize use of experimental Stage-X javascript features. Only stage-3/4 features are supported, because they're relatively stable
- Use tests (by jest, example)
- Use linting (by airbnb eslint config)
- Education
- Small pet projects/prototypes
- Production
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 | ||
| react-redux | Data management | Official React bindings 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 2 | Build/Bundler | A module bundler for modern javascript applications (bundling, minification, watch mode, ect.) | webpack.config.js | Loaders: babel-loader, eslint-loader, sass-loader |
| 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 | |
| sass | CSS Preprocessor | CSS with superpowers | ||
| 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 todistfolder)
If you have problems with running it please file an issue or contact me on Facebook. Thanks!
- examples/react - trivial hello world using React
- examples/redux - counter example with
reduxandredux-saga