我正在学习使用对babel的反应，但是窗口显示空白页。我已经使用了必要的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>与该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/[email protected]/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>