Perform jsx conversions on the client

Question

I am creating an application that allows users to create and apply their own components and templates. I want to allow users to edit jsx data strings, and then do the client-side conversion for rendering.

While in the browser transfer jsx conversion is performed in the built-in scripts, and react-tools is available on the server, I can’t determine how to make the conversion function available to the client.

The built-in browser transform does not seem to provide any methods for access, nor does Atomify / Browserify crash when I try to use responsive conversion tools on the client.

Answer 1

The JSXTransformer module exports two functions:

• transform takes the JSX source code as a string and returns an object with a key called code , whose value is a JavaScript string that can then be evaluated.

• 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 simple JavaScript output:

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

Answer 2

JSXTransformer was deprecated in mid-2015 in favor of the Babel solution in the browser, babel-standalone : https://babeljs.io/docs/setup/#installation

Discussion here: https://github.com/facebook/react/issues/5497