无法运行ReactJS的Hello World示例
[英]Unable to run the Hello World example of ReactJS
问题描述
我是ReactJS的新手，正在通过Hello World示例学习它，如下所示：
abc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="abc.js"/>
</body>
</html>
abc.js
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
我希望Hello，应该显示world，但是会呈现一个空白页。 我已经将abc.html和abc.js放在同一文件夹中。 我错过了什么还是做错了什么？
3 个解决方案
解决方案1
1 2019-01-29 05:06:21
我刚刚复制粘贴了您的代码，它工作正常。 只需进行一次更正，就无需像在代码中一样在html文件中添加abc.js文件。
<script src="abc.js"/>
您能否验证您的入口点是因为默认情况下index.js / index.tsx文件是您的react入口点。 请尝试以下操作，它应该可以正常工作。
的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
解决方案2
0 已采纳 2019-01-29 04:22:53
使用Babel浏览器内编译器时，必须包括代码内联并将脚本标记类型设置为text/babel ：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- Don't use this in production: --> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const element = <h1>Hello, world</h1>; ReactDOM.render( element, document.getElementById('root') ); </script> </body> </html>
解决方案3
0 2019-01-29 04:23:19
您似乎可以使用的功能-我只是复制并粘贴到Codepen中。 您的浏览器可能阻止了React脚本或其他内容
也许可以在其他浏览器中尝试？
ReactJS中的简单“Hello World”无法正常工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.