Coffeescript + React = Awesome. Here's a sample with grunt runners to get you started,
Coffeescript React.js -> views Require.js -> AMD modules Grunt -> task runners less -> css Flask -> web server
Making it a Flask blueprint is just to make it easy to drop into a flask app. Just change the script/style tags register this blueprint in your flask app, mounted at UI. Read more about Blueprints
npm install -g coffeescript
npm install -g grunt-cli
npm install
grunt build
grunt watch
In order to build React components in coffeescript with jsx, you need to compile .coffee
to .jsx
and then to .js
the grunt build
command will compile your static/coffee folder to .jsx
and compile that to .js
. It will also compile your .less
as well
Lastly, it will copy the sourcemaps over appropriately
React makes use of jsx, which has html/xml like tags. This will break the coffeescript compiler. Theres two solutions to writing react components in coffeescript.
`(<HelloMessage name=Michael />)`
(HelloMessage {name:Michael}, [])
With the latter, you can compile straight to javascript and skip the jsx