javascript - 简单的React代码段不起作用

嗨，我是新来的人，
我正在尝试运行这个琐碎的代码段，但是它不起作用:



 <head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
    </head>

    <body>
      <div id="app_root"></div>

  <script type="text/babel">
        var Hello = React.createClass({
                   render: function() {
                      return(
                      <div>Hello World!</div>
                     );
             }
       });
        ReactDOM.render(<Hello />, document.getElementById("app_root"));
      </script>
    </body>

控制台不显示任何错误消息，并且运行脚本后没有得到任何输出

最佳答案

正如其他答案中提到的那样，这是因为JSX需要babel。在您的情况下，只需要包括babel而不是browser-polyfill即可:

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
</head>

<body>
    <div id="app_root"></div>

    <script type="text/babel">
        var Hello = React.createClass({
            render: function() {
                return(
                    <div>Hello World!</div>
                );
            }
       });

       ReactDOM.render(<Hello />, document.getElementById("app_root"));
    </script>
</body>

关于javascript - 简单的React代码段不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48119435/