JSX compiler output invalid javascript

Question

I play with React and I had a problem with the standalone JSX compiler.

Here is my JSX code in a file called helloworld.js , placed in a folder named src in the root directory of my project:

/** @jsx React.DOM */ var Hello = React.createClass({ render: function () { return <div> <h3>Hello, {this.props.name}</h3> </div> } }); React.renderComponent( <Hello name={"Jane Doe"} />, document.getElementById('example') ); 

On the command line, when I go to the root directory of my project and I run this:

 jsx /src /build 

The output helloworld.js file is created in the build folder, but it does not contain valid JavaScript.

Here is what the content looks like:

 /** @jsx React.DOM */ var Hello = React.createClass({displayName: "Hello", render: function () { return <div> <h3>Hello, {this.props.name}</h3> </div> } }); React.renderComponent( <Hello name={"Jane Doe"} />, document.getElementById('example') ); 

As you can see, it still contains embedded HTML instead of valid JavaScript. There is no error message on the command line. It looks like this:

 built Module("helloworld") ["helloworld"] 

Does anyone have an idea why this could happen?

Answer 1

Perhaps try wrapping your html in brackets.

 var Hello = React.createClass({displayName: "Hello", render: function () { return ( <div> <h3>Hello, {this.props.name}</h3> </div> ); } }); 

Answer 2

I'm not sure if this will help, but I wrote jsx for the javascript compiler using gulp using the browser and reactivating it works in the background

https://github.com/jedt/basic-react-boilerplate

(PS. I tested your jsx and it works for me.)

Answer 3

From the docs I saw that the default output stream for jsx is stdout, this means that it should output the file to the console. Try using the --output option or redirecting the command to a file:

 jsx ./src/helloworld.jsx --output ./build/helloworld.js 

or

 jsx ./src/helloworld.jsx > ./build/helloworld.js 

I myself could not run your code using jsx (did he say that my syntax is not very good?), Maybe try using babel-cli: How to convert processed JSX files to a simple JavaScript file [offline transform]