I've had great luck using React's JSXTransformer.js to develop using JSX in the browser:

<script src=".11.1.js"></script>
<script type="text/jsx">
/** @jsx React.DOM */
...
</script>

To reduce boilerplate, I'd like to use some of the features from Harmony, e.g. arrow functions. Facebook's JSX Compiler Service has a harmony checkbox which transforms ES6 to more traditional JS:

var f = v => this.props[v];
// becomes var f = function(v) { return this.props[v]; }.bind(this);

Is it possible to enable this transformation with the in-browser JSX?

I've had great luck using React's JSXTransformer.js to develop using JSX in the browser:

<script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
<script type="text/jsx">
/** @jsx React.DOM */
...
</script>

To reduce boilerplate, I'd like to use some of the features from Harmony, e.g. arrow functions. Facebook's JSX Compiler Service has a harmony checkbox which transforms ES6 to more traditional JS:

var f = v => this.props[v];
// becomes var f = function(v) { return this.props[v]; }.bind(this);

Is it possible to enable this transformation with the in-browser JSX?

• javascript
• reactjs
• ecmascript-harmony

1 Answer 1

This feature was added in React v0.11. Instead of type="text/jsx", you set type="text/jsx;harmony=true". For example:

<script type="text/jsx;harmony=true">
/** @jsx React.DOM */
var f = v => v*v;
console.log(f(2));  // logs 4
</script>