Performing jsx transforms on the client

Question

I'm building an application which allows users to build and apply their own components and templates. I want to allow users to edit strings of jsx data and then perform the transform client-side for render.

While the in the in browser transform performs jsx transforms on embedded scripts, and react-tools is available on the server, I can't determine how to make the transform function available to the client.

The inline browser transform doesn't appear to have provide any methods for access, and Atomify/Browserify crashes when I try to using the react-tools transform on the client.

Answer 1

The JSXTransformer module exports two functions:

• transform takes JSX source code as a string and returns an object with a key named code whose value is a JavaScript string that can then be eval'd.

• exec works like transform and the result is then passed to eval.

This call:

JSXTransformer.transform("React.createClass({render: function() { return <div></div>; } });").code

...produces this plain JavaScript output:

"React.createClass({render: function() { return React.createElement("div", null); } });"