JSX compiler output is not valid JavaScript

Question

I'm playing with React and I've run into a problem with the offline JSX compiler.

Here's my JSX code in a file named helloworld.js, placed in a folder named src within 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')
);

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

jsx /src /build

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

Here's how 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 the inline HTML instead of valid JavaScript. There is no indication of an error in the command line. It looks like this:

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

Does anyone have an idea why that might be happening?

Answer 1

Maybe try to wrap your html in brackets.

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