无法弄清楚为什么我的代码无法呈现

Question

我正在尝试使用React构建一个简单的应用程序，并且正在使用Codepen。我无法渲染第一个组件，即使它是一个非常基本的代码，并且对我来说看起来是正确的。我包括了React，ReactDOM和Babel。 该项目的html部分有一个id为“ =“ root”的div。以下代码不会渲染任何内容，我似乎也无法弄清楚原因。

class App extends React.Component {
  render() {
    return(
    <div>Hello World</div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById("root"));

Answer 1

似乎出现了脚本顺序错误的问题。确保在ReactDOM之前加载React脚本。

更改它们似乎可以解决问题，here's a forked version

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>

Answer 2

您的CDN链接似乎有问题。 我使用了https://reactjs.org/docs/cdn-links.html

中的这些

https://unpkg.com/react@16/umd/react.production.min.js

https://unpkg.com/react-dom@16/umd/react-dom.production.min.js

效果很好。