我是 React 的新手，想問一下為什么 vs code 中的以下代碼不會在我的 html 頁面中呈現 h1 組件？
當我運行 html 頁面時，它只顯示空頁面。有誰知道發生了什么？
代碼如下：
我的 index.html 代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React</title>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
我的 index.js 代碼如下：
ReactDOM.render(<p>Hello, everyone!</p>,document.getElementById("root"))
每當我運行 html 檔案時，它只顯示空白頁而不是“大家好！”。有誰知道這里發生了什么？
uj5u.com熱心網友回復：
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
React 使用 JSX 來渲染所有組件。這意味著簡單來說，它收集所有組件并將它們轉換為 HTML 頁面。
React 將每個組件呈現為一棵樹。因此，不建議將所有代碼添加到單個組件中。與您的情況一樣，您嘗試列印 Hello Everyone！在沒有指定 HTML 標簽的情況下渲染函式。
應用程式.js
import React from "react";
function App() {
return (
<div>
<h1>Hello Everyone</h1>
</div>
);
}
export default App;
如果你想知道我是如何匯入 App.js 和 CSS 檔案的，它被稱為檔案的路徑指定。如果檔案存在于同一檔案夾中，則使用./filename.extension(css/js)
什么是React.StrictMode？
- 它以嚴格模式呈現所有子組件。
- 這可以防止采取某些操作并在有任何錯誤/警告時拋出錯誤/警告
- 最重要的是，它會進行大量檢查，這對于糾正所有可能的錯誤非常有幫助。
您不應該打開 HTML 頁面來查看更改，而是使用任何包管理器來運行反應代碼。例如：
npm start or yarn start
一切順利！??
uj5u.com熱心網友回復：
<html>
<head>
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<p>Hello world!</p>, document.getElementById("root"));
</script>
</body>
</html>uj5u.com熱心網友回復：
在這里你必須指定data-preset="react"
<script src="index.js" type="text/babel" data-preset="react"></script>
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React</title>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel" data-preset="react"></script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/452177.html