A minimal skeleton for building testable React apps using ES6.
- As few tools as possible (no yeoman, gulp, bower, etc...)
- ES6 with polyfills for current browsers
- Testability: ease of writing unit tests and generating code coverage
- Minimize templates, compose DOM alongside components via JSX
- Session-driven routing using react-router with async data fetching
$ npm installStart the local dev server:
$ npm run serverNavigate to http://localhost:8080/ to view the app.
Check out package.json for the complete list.
Components are grouped into 2 main categories:
- common - contains various classes and components that are shared between pages and views
- pages - contains components grouped by the page / view / feature they belong to.
A case can be made to move routers into common, but I felt it made sense to keep them in their own section.
A core philosophy of this skeleton app is to keep the tooling to a minimum. For this reason, you can find all the commands in the scripts section of package.json.
$ npm run serverInput: src/main.jsx
This leverages React Hot Loader to automatically start a local dev server and refresh file changes on the fly without reloading the page.
It also automatically includes source maps, allowing you to browse code and set breakpoints on the original ES6 code:
$ npm run buildInput: src/main.jsx
Output: build/app.js
Build minified app for production using the production shortcut.
$ npm testInput: test/main.js
Output: coverage/
Leverages Karma to run through the test suite using PhantomJS and generate code coverage reports.
$ npm run test-cross-browserInput: test/main.js
Runs the unit test suite against various browsers using the Sauce Labs automated cross-browser testing tool.
$ npm run coverallsInput: coverage/lcov.info
Sends the code coverage report generated by Istanbul to Coveralls.
$ npm run cleanInput: build/app.js
Removes the compiled app file from build.