A minimal skeleton for building testable React apps using ES6.
- As few tools as possible (no task runners, etc...)
- ES6 with support for legacy browsers (IE 8)
- Testability
- No templates, compose DOM alongside components via JSX
- No stylesheets, leverage Radium for styling in JavaScript
- Session-driven routing using react-router with async data fetching
$ npm install
You can now start the local dev server:
$ npm run server
and start the watcher:
$ npm run watch
Navigate to http://localhost:8080/ to view the app.
Check out package.json for 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 watch
Runs watch-js
and server
in a single command.
$ npm run watch-js
Input: src/main.jsx
Output: build/app.js
This leverages watchify to efficiently cache and build your browserify bundle on-the-fly as you save various files.
It also automatically includes source maps into the output file, allowing you to browse code and set breakpoints on the original ES6 code:
$ npm run build
Input: src/main.jsx
Output: build/app.js
Very similar to watch, but doesn't include source maps and minifies the output using uglifyjs2.
$ npm test
$ npm run test-watch
Input: test/main.js
Leverages Mochify to run through all tests require-d
in the input file.
Running test-watch
will listen for changes and re-run the specs on-the-fly.
$ npm run cover
Input: test/main.js
Executes cover.js that leverages mochify-istanbul to generate a code coverage report that is then sent to Coveralls.
$ npm run server
Input: server.js
Runs a local dev server using express on port 8080, serving static files in the build/ directory.
$ npm run clean
Input: build/app.js
Removes the compiled app file from build.
- Styling using Radium.
- Responsive design with media query mixins
- Testing
- Unit test suite
- CI
- Code coverage
- Examples of nested views
- More complex navigation