在html中引用jsx文件时反应渲染方法不起作用答案

【问题标题】：React render method not working when referencing jsx file in html在html中引用jsx文件时反应渲染方法不起作用
【发布时间】：2016-09-29 11:15:56
【问题描述】：

我试图从我的 html 中引用一个 jsx 文件，但渲染函数没有显示任何内容，并且控制台中没有任何错误。

*注意 - 我更改了下面的 fb CDN 链接，因为 SO 不允许它们。 CDN 链接不是问题。

我的代码如下所示：

HTML

<html>
  <head>
    <script src="https://f*b.me/react-0.14.6.js"></script>
    <script src="https://f*b.me/react-dom-0.14.6.js"></script>
    <script src="http://f*b.me/JSXTransformer-0.12.1.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>

  <body>
    <div class="container">
      <div id="loggedin"></div>
    </div>
    <script type="text/babel" src="js/script.jsx"></script>
  </body>
</html>

JSX

var App = React.createClass({
    render: function() {
        return(
            <h1>Hello</h1>
        )
    }
});

ReactDOM.render(<App />, document.getElementById('loggedin'));

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

React 使用 babel 将你的 jsx 转换为 js。因此，添加babel 而不是JSXTransformer 并将文件另存为.js 而不是.jsx

将此添加到您的脚本中

<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

Reference

【讨论】：

应该是 React uses 而不是 React not uses，对吧？