反应没有输出

Question

我正在学习使用 babel 反应，但 window 显示空白页面。我已经使用了必要的 CDN 链接-

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<body>
  <div id='app'></div>
  <script type="text/babel">
    class App extends React.Component {
      render() {
        return (<div className = "app-content">
          <h1> Hey, this message is not SHOWING </h1>
          </div>
        )
      }
    }
    ReactDOM.render(<App/>, document.getElementById('app'));
  </script>
</body>

Answer 1

与此 CORS 问题相关：
https://github.com/babel/babel/issues/8515
您不能运行在本地或使用本地文件。您也许可以使用非缩小版本。

unpkg 的@babel/standalone 7.x 似乎还有更多问题。如果仍有问题，请尝试使用 6.x 版本。我已将其作为注释掉的脚本标签包含在内以供参考。

另外，这不适合生产使用。这主要是为了玩耍。有一些有效的用例，但您不太可能匹配 any of them。即使在开发中，您也确实应该使用适当的环境。

<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<!--
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<body>
    <div id='app'></div>

</body>
    <script type="text/babel">
        class App extends React.Component {
            render() {
                return (
                    <div className="app-content">
                        <h1> Hey, this message is not SHOWING</h1>
                    </div>
                )
            }
            
        }
        ReactDOM.render(<App />, document.getElementById('app'));
    </script>
</body>

反应没有输出

React giving no output

javascript

reactjs

babeljs