react-es7

Example of React + Flow types + Reflux + routing + ES6 with experimental ES7 syntax + Semantic-UI

• All JavaScript files are transpiled with Babel library with enabled experimental ES7 syntax.
• The project support Flow type annotations
• For using experimental ES7 code in Jest tests
• The workflow and communication between components is built using Reflux, a slighty improved Flux paradigm.
• Unit testing is provided by Jest.
• Using Semantic-UI framework with React components (react-semantify).

If for some reasons you can't or don' want to use Node for file processing, you can use hipertracker/react-babel. It uses only the browser but with AMD. All ES6 files are transpiled only once (during module loading), and cached.

Install

npm install -g broccoli-cli
npm install

Usage

• fast processing in memory:

broccoli serve

or

npm start

• with watcher and generating files:

broccoli-timepiece dist
http-server dist/ -p 4200

Open http://localhost:4200

• building files for production (minified, mangled and compressed):

BROCCOLI_ENV=production broccoli build dist

Test and code coverage:

$ npm test

Also code coverage in the browser:

npm run coverage

Todo

• Replace Reflux with nuclear-js
• Add examples of Flow types checking
• Add more prop validation examples
• Add more unit tests showing Jest testing ES5/ES7 code with Flow types checking.