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:
or
- 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:
Also code coverage in the browser:
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.