react-dom 如何识别正确的 HTML 文件？

Question

我正在尝试使用 codesandbox.io 进行 React。启动新项目时，显示默认代码。

在 index.js 文件中，我们引用了 HTML 文件中的 "root" 元素。但是我没有意识到JS文件是如何连接到HTML文件的。

在 Vanilla JS 中，HTML 文件可以有一个 "script" 标签。 为什么这里不需要 "script" 标签？

代码

index.js  
import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);



index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-    scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
create a production bundle, use `npm run build` or `yarn build`.

</body>

Answer 1

如果您将弹出应用程序并检查 webpack.config 文件，您可能会发现这部分：

plugins: [
      // Generates an `index.html` file with the <script> injected.
      new HtmlWebpackPlugin(...)
    ]

所以，简单的 webpack 将 bundle 脚本注入 HTML 页面。如果你在没有 create-react-app 的情况下使用 React，你将不得不使用脚本标签或自己编写类似的插件。

此外，您正在查看源代码。如果您将提供应用程序并检查检查器，您将在脚本标签中看到该包。

Answer 2

JS文件如何连接到HTML文件？

这是反应如何做的一个例子

index.html:

<div id="root"></div>

index.js:

ReactDOM.render(<App/>, document.getElementById('root'))

app.js:

function App() {
  return (
    <div className="App">
      Hello React!
    </div>
  );
}

这是 JSX，它将被翻译成其他东西并在 React 中创建一个 DOM，类似于：

const app = document.createElement('div');
app.innerText= 'Hello React!';

所以，现在您在 app.js 中创建了一个 dom(app)，并且在 index.js 中创建了一个 dom(root) 查询，ReactDOM.render(, rootDOM) 就像这样：

rootDom.appendChild(app);

最后，您的组件 (App) 将显示在根目录中 dom;

为什么这里不需要 "script" 标签？

因为 webpack 为你做了这件事，webpack 会将你的代码打包到一个 javascript 文件中，并将 link 插入到 index.html.

react-dom 如何识别正确的 HTML 文件？

How react-dom identify the correct HTML file?

javascript

reactjs

react-dom