ReactJS starter tutorial: jsx transform not happening and element not displayed

Question

I've set up everything according to React tutorial (http://facebook.github.io/react/docs/tutorial.html). I'm doing it under Python server.

React is loaded (in fact shadow dom is inserted and it suggests me to install React tools).

I'm using jsx offline transformer by:

# in public/js directory
jsx --watch src/ build/
# terminal output (Linux) follows....
built Module("react")
["app","react"]
app.js changed; rebuilding...
built Module("app")
["app","react"]

public/index.html

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="js/build/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
    <script type="text/jsx" src="js/build/app.js"></script> 
  </head>
  <body>
    <div id="content"></div> <!-- here the React component is instantiated -->

  </body>
</html>

public/js/src/app.js (JSX as in tutorial )

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement('div', {className: "commentBox"},
        "Hello, world! I am a CommentBox."
      )
    );
  }
});
React.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);

should be converted to (public/js/build/app.js):

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
React.render(
  <CommentBox />,
  document.getElementById('content')
);

but it actually doesn't (and I see "files have changed..." in terminal where jsx transformer is running).

Furthermore I tried to close jsx transformer and overwrite manually build/app.js with the 2nd block of code. However in none of the cases, anything is rendered.

You have either switched your src and build codes or the problem is that you try to transform JS to JSX, but want to do the opposite. — marizikmund

Manuel Yang Manuel Yang · Accepted Answer · 2015-09-08T22:03:55

Actually, your src files should be containing the JSX files while your distribution or build folder should contain the compiled (javascript only) file.

I ran the code in jsFiddle and the code works. It probably has to do with file location. If you can check the browser console log and show us any error messages that would help us out a lot.

ReactJS starter tutorial: jsx transform not happening and element not displayed

2 Answers