ReactJS 入门教程：jsx 转换未发生且元素未显示

Question

我已经根据 React 教程 (http://facebook.github.io/react/docs/tutorial.html) 设置了所有内容。我在 Python 服务器下进行。

React 已加载（实际上已插入影子 dom，它建议我安装 React 工具）。

我通过以下方式使用 jsx 离线转换器：

# 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）

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')
);

应该转换为(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')
);

但它实际上没有（我在终端中看到 "files have changed..."，其中 jsx 转换器是运行）。

此外，我尝试关闭 jsx 转换器并用第二个代码块手动覆盖 build/app.js。但是 在 none 的情况下，任何东西都会被渲染。

Answer 1

实际上，您的 src 文件应该包含 JSX 文件，而您的分发或构建文件夹应该包含编译的（仅 javascript）文件。

我运行 jsFiddle 中的代码并且代码有效。它可能与文件位置有关。如果您可以检查浏览器控制台日志并向我们显示任何对我们有很大帮助的错误消息。

Answer 2

如果您已经离线转换 jsx 文件，您的脚本标签应该是

 <script type="text/js" src="js/build/app.js"></script>

而不是

 <script type="text/jsx" src="js/build/app.js"></script>

ReactJS 入门教程：jsx 转换未发生且元素未显示

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

reactjs

react-jsx