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

【问题标题】：ReactJS starter tutorial: jsx transform not happening and element not displayedReactJS 入门教程：jsx 转换未发生且元素未显示
【发布时间】：2015-12-04 17:00:49
【问题描述】：

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

React 已加载（实际上 shadow 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')
);

但实际上并没有（我在运行 jsx 转换器的终端中看到“文件已更改...”）。

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

【问题讨论】：

您要么切换了 src 和构建代码，要么问题是您尝试将 JS 转换为 JSX，但想要做相反的事情。

标签： reactjs react-jsx

【解决方案1】：

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

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

【讨论】：

能否提供 jsfiddle 以便我调查问题？
问题到底是什么。基本上我不明白的是 JS 语法和 JSX 一个

【解决方案2】：

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

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

代替

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

【讨论】：

谢谢。但是问题似乎jsx没有将其转换为js（相同的文件内容）有什么想法吗？