martinbalfanz / essential-react

A minimal skeleton for building testable React apps using ES6

A minimal skeleton for building testable React apps using ES6.

• Design Goals
• Getting Started
• Dependencies
  • Dev
• Project structure
• Commands
  • watch
  • build
  • test
  • cover
  • server
  • clean
• TODO

Design Goals

• 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

Getting Started

$ 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.

Dependencies

• react v0.12
• react-router v0.12
• xhr v2.0
• es5-shim v4.1
• console-polyfill v0.2

Dev

• browserify v9.0
• babelify v5.0
• mochify v2.6
• expect.js v4.12

Check out package.json for complete list.

Project structure

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.

Commands

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.

watch

$ npm run watch

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:

build

$ 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.

test

$ 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.

cover

$ 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.

server

$ npm run server

Input: server.js

Runs a local dev server using express on port 8080, serving static files in the build/ directory.

clean

$ npm run clean

Input: build/app.js

Removes the compiled app file from build.

TODO

• Styling using Radium.
  • Responsive design with media query mixins
• Testing
  • Unit test suite
  • CI
  • Code coverage
• Examples of nested views
• More complex navigation