Question

我想使用ReactJS创建一个练习网络应用程序，但我甚至无法加载这个简单的测试，看看事情是否会有效，所以我可以继续前进创建应用程序。

这里是index.html文件：

<!DOCTYPE html>
<html>

  <head>
    <title>My website</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script type="text/babel" src="index.js"></script>
  </head>

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

</html>

这里是index.js文件：

ReactDOM.render(<h1>Testing.</h1>, document.getElementById('example'));

以下编辑：

这里是index.html文件：

<!DOCTYPE html>
<html>

  <head>
    <title>My website</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
  </head>

  <body>
    <div id="example"></div>
    <script type="text/babel" src="index.js"></script>
  </body>

</html>

这里是index.js文件：

ReactDOM.render(<h1>hiii</h1>, document.getElementById('example'));

Answer 1

尝试在示例div中添加index.js的脚本！

Answer 2

您的代码有效但我认为您没有正确加载。你是如何开设申请的？你刚刚打开HTML文件吗？您的网址是file:///path-to-your-html-file.html吗？

使用文件路径对我不起作用;所以，我建议你使用网络服务器来处理你的文件。一种简单的方法是运行NodeJS http-server应用程序。只需运行npm install -g http-server。然后，转到终端中的应用程序目录并执行http-server。

Answer 3

喜欢/ u / Peter Qiu说，您需要在<script type="text/babel" src="index.js"></script>元素之后放置<div id="example"></div>才能使用它。

此外，您必须添加babel转换器才能让您的babel代码在浏览器中运行：

https://github.com/babel/babel/tree/master/packages/babel-core

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>

您可以在您的react / react-dom依赖项之后将其添加到head部分。

此外，要正确运行react应用程序，您需要通过静态服务器运行index.html文件。这是一个简单的入门：

https://www.npmjs.com/package/http-server

将index.html文件打开到浏览器中（通过双击）将返回跨源请求错误。

为什么不能加载我的ReactJS页面？

3 个答案: