无法运行ReactJS的Hello World示例
[英]Unable to run the Hello World example of ReactJS
问题描述
I am a newbie of ReactJS and is learning it through a Hello World example as shown below: 
我是ReactJS的新手，正在通过Hello World示例学习它，如下所示：
abc.html 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 abc.js
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
I expect Hello, world should be shown, but instead, an empty page is rendered. 我希望Hello，应该显示world，但是会呈现一个空白页。 I have already put the abc.html and abc.js in the same folder. 我已经将abc.html和abc.js放在同一文件夹中。 Did I miss anything or do anything wrong? 我错过了什么还是做错了什么？
3 个解决方案
解决方案1
1 2019-01-29 05:06:21
I have just copy pasted your code and it's working fine. 我刚刚复制粘贴了您的代码，它工作正常。 Just one correction where you don't need to add your abc.js file in html file like you have done in your code. 只需进行一次更正，就无需像在代码中一样在html文件中添加abc.js文件。
<script src="abc.js"/>
Can you please verify what is your entry point because by default index.js/index.tsx file is your entry point in react. 您能否验证您的入口点是因为默认情况下index.js / index.tsx文件是您的react入口点。 Please try something below and it should work properly. 请尝试以下操作，它应该可以正常工作。
index.html 的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 index.js
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
解决方案2
0 已采纳 2019-01-29 04:22:53
When using the Babel in-browser compiler you must include your code inline and set the script tag type to text/babel : 使用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
What you have seems to work - I just copy and pasted into a codepen. 您似乎可以使用的功能-我只是复制并粘贴到Codepen中。 It's possible that your browser is blocking the react script or something 您的浏览器可能阻止了React脚本或其他内容
Maybe try it in a different browser? 也许可以在其他浏览器中尝试？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.