無法運行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.