How to use “grunt-react” #2
Collaboration with grunt-browserify

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Browserify enables CommonJS syntax where module importing is available.

This post is an additional version of the previous “How to use “grunt-react” Auto translation from jsx to js“. The “grunt-react” plugin can be more useful & effective with Browserify. And a plugin called “grunt-browserify” is the great contributor!

Install

If you did not install “grunt-react”, please refer to the previous post here.

Grunt configuration

A value in options “tranform: transform: [ require('grunt-react').browserify ]” imports grunt-react config.

JS

Only with grunt-react

For grunt-react config, please refer to the previous post.

Obviously, we need to read react.js prior to the above js file, otherwise the script fails to run.

With Browserify

Here employs react.js from bower (bower install react). You don’t need react.js line in html anymore!

How to use “grunt-react”
Auto translation from jsx to js

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

React.js allows jsx scripting along with one of those translation tools like “JSXTransformer.js”.The “grunt-react” automates the conversion so that you only read a converted js file in your page.

Without grunt-react

HTML

JS

With grunt-react

We don’t need JSXTransformer.js anymore because grunt-react converts “jsx/main.jsx” (totally same contents as “main.js” above) to “js/main.js” of normal JS format. So only you need to do is to read react.js itself and the main.js.

HTML

Grunt config