I'm curious if any of the transpiling tools will convert from plain JS to JSX. Babel will transpile JSX to JS, but as far as I know it cannot go back to JSX.

From the example:

var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});

Are there tools that go the other direction:

var Nav;
// Input (JS):
var app = React.createElement(Nav, {color:"blue"});
// Output (JSX):
var app = <Nav color="blue" />;

Thanks!

I'm curious if any of the transpiling tools will convert from plain JS to JSX. Babel will transpile JSX to JS, but as far as I know it cannot go back to JSX.

From the example:

var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});

Are there tools that go the other direction:

var Nav;
// Input (JS):
var app = React.createElement(Nav, {color:"blue"});
// Output (JSX):
var app = <Nav color="blue" />;

Thanks!

• javascript
• babeljs
• reactjs

Share Improve this question Follow asked Dec 9, 2015 at 22:44 thomasthomas 7311 gold badge11 silver badge33 bronze badges 3

• Why on earth would you want to do this haha. The point of JSX is to make it easy to write React ponents. Not to retroactively make React ponents easier to understand for the developer. If you're looking for something to help with debugging, try the official developer tools: facebook.github.io/react/blog/2015/09/02/… – jered Commented Dec 9, 2015 at 23:08
• 2 Hey JCD, thanks for the response. The reason to do this is inheriting an app that was written using React.createElement. I'd like to replace all React.createElements with the jsx version. – thomas Commented Dec 10, 2015 at 23:30
• I doubt such a thing exists. Your best bet is probably to find the original author and ask them for the source JSX. – jered Commented Dec 11, 2015 at 0:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

I haven't tried it myself, but there is apparently now a babel plugin to do exactly what you ask.

babel-js-to-jsx

https://github./JoeStanton/babel-js-to-jsx

Per the documentation:

Babel 6 plugin to convert from desugared React.DOM CallExpressions -> the equivalent JSX. Currently used to migrate to ES6+ from other pile to JS languages.

It can be used as a plugin:

require("babel-core").transform(code, {
  plugins: ["js-to-jsx", "syntax-jsx"],
}).code

Or from the mand line for position with other tools:

npm install babel-plugin-js-to-jsx
cat example.ls | lsc -cb --no-header | js-to-jsx | esformatter -c format.json