为什么我的ReactJS页面无法加载？
[英]Why won't my ReactJS page load?
问题描述
我想使用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'));
3 个解决方案
解决方案1
1 2017-01-24 02:11:26
尝试将示例div放在主体中之后，将index.js脚本放到正文中！
解决方案2
1 已采纳 2017-01-24 09:09:50
您的代码有效，但我认为您无法正确加载。 您如何打开应用程序？ 您只是打开HTML文件吗？ 您的网址看起来像file:///path-to-your-html-file.html吗？
使用文件路径对我不起作用； 因此，我建议您使用Web服务器来处理文件。 一种简单的管理方法是运行NodeJS http服务器应用程序。 只需运行npm install -g http-server 。 然后，进入终端中的应用程序目录并执行http-server 。
解决方案3
0 2017-01-24 02:16:53
就像/ 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依赖项之后将其添加到头部。
另外，要正确运行react应用，您需要通过静态服务器运行index.html文件。 这是一个简单的入门：
https://www.npmjs.com/package/http-server
在浏览器中打开index.html文件（通过双击）将返回跨域请求错误。
我的页面无法加载（ReactJS）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.