为什么我的 ReactJS 页面无法加载？答案

【问题标题】：Why won't my ReactJS page load?为什么我的 ReactJS 页面无法加载？
【发布时间】：2017-01-24 17:09:50
【问题描述】：

我想使用 ReactJS 创建一个练习 Web 应用程序，但我什至无法加载这个简单的测试以查看是否可行，因此我可以继续并创建应用程序。

这是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'));

【问题讨论】：

您收到了哪些错误消息？页面上或控制台中的任何内容？包括这些通常会帮助您更快地得到答案

标签： javascript html css reactjs

【解决方案1】：

您的代码有效，但我认为您没有正确加载。你是如何打开你的应用程序的？你只是打开HTML文件吗？您的网址是否类似于file:///path-to-your-html-file.html？

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

【讨论】：

谢谢，它有效！我一开始使用的是 Sublime IDE，它工作正常。但后来我决定切换到 Atom IDE。当我切换到 Atom IDE 时，它停止工作。怎么可能？
查看错误输出。我在 Atom 中测试了你的应用程序，它运行良好。老实说，如果我是你，我会学会如何使用 webpack 进行设置。更容易维护 IMO。

【解决方案2】：

尝试将 index.js 的脚本放在正文中的示例 div 之后！

【讨论】：

【解决方案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 文件（通过双击）将返回跨域请求错误。

【讨论】：

我试过了，还是不行。我将发布我在原始帖子中所做的事情。
这很奇怪。我在我的电脑上试了一下，效果很好。我可以知道您的项目使用什么文件夹结构吗？ index.js 文件是否与index.html 在同一目录中？
是的，都在同一个文件夹中。
您如何查看您的 html 文件，通过静态服务器或只是在浏览器中打开它？当我在浏览器中打开 index.html 文件（双击该文件并在 chrome 中打开它）时，我使用节点 http-server npmjs.com/package/http-server 打开了我的，没有任何反应。
只是在我的浏览器中打开它。