React入口点：Index.html vs index.js？Node代码在哪里？

Question

React入口点：Index.html vs index.js？Node代码在哪里？

8

我在互联网上读到过一篇文章，说index.html是React应用程序的入口点。然而，同一篇文章后来又说index.js是主要的入口点（以及大多数Node应用程序的入口点）。那么，到底是哪一个呢？

当有人在浏览器中加载React应用程序时，我认为首先运行的是index.js，然后它再加载index.html。但是这通常是如何发生的呢？也就是说，从在浏览器中加载应用程序到首次运行index.js的流程是怎样的？

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

其次，在运行npx create-react-app app之后，使用npm start运行代码。因此，我认为node.js也参与其中。但是，我在这里找不到任何熟悉的node代码。例如，哪里是使服务器监听端口3000的代码？

- Grateful

据我理解，HTML 和 CSS 首先在浏览器中被解析，然后是 JS。当 HTML 完全加载后，你的 React 代码（应该在浏览器中编译为普通的 JS，因为浏览器不理解 "React" 而只理解 JS）将尝试查找一个钩子，在你的 index.html 中的 "root" div。从那时起，所有内容都由你的 JS 渲染。对我来说，应用程序的入口点是 HTML，但对于 React 来说，index.js 是它的入口点。 - Joshua

Aditi Lamkhede 发布了一个回答，说：“我发现这个帖子很有帮助：如何在 React 应用程序中连接 Index.js 和 Index.html。我希望它能帮助其他寻找同样问题答案的人。” - Scratte

3个回答

7

我相信您正在使用create-react-app。在运行npm install之后，当您在node_modules文件夹内检查名为node_modules/react-scripts/config/paths.js的文件时，您会看到以下代码。

....
....
appHtml: resolveApp('public/index.html'),
....

paths.appIndexJs是Webpack配置文件中的入口文件。

HtmlWebpackPlugin会加载路径paths.appHtml中的HTML文件。因此，在应用程序目录中， appHtml是public/index.html文件，而appIndexJs是src/index.js文件。

- Sajal Shrestha

0

这实际上是一个基本的理论问题，即使我开始使用React开发时也遇到过。以下是负责React应用程序流程的概念。

当你使用npm start时，React应用程序的流程是固定和预定的，它引用了"react-scripts start"，这是一个在react-scripts内置包中编写的标准命令...因此它始终将""index.js""作为React应用程序的入口点，并搜索公开访问的index.html（因为它在public文件夹中定义），因此我们不需要在index.html中显式地链接index.js。

React应用程序默认监听端口3000，这是在react-scripts内置包中定义的，如果你想要更改它，可以通过npm eject弹出React应用程序，然后更改预定义的命令。

- Jagrit Joshi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TeachMe · Accepted Answer

简单来说，index.html 是 React 渲染所有 UI 的地方，index.js 则是存放所有 JS 代码的地方。所以浏览器首先获取 index.html，然后渲染文件。然后位于 index.js 中的 JS 代码负责所有逻辑渲染 UI，它以 id 为 root 的元素作为基础元素来渲染所有 UI。

与原生 JS 类似，React 搜索 ID 为 'root' 的元素，并使用虚拟 DOM 的概念在其中保持所有要渲染的 UI。您可以查看此概念。

完成 React 开发后，您必须使用构建工具通过 npm build 或 yarn build 构建 React 应用程序，将所有代码合并到单个文件中。因此，当客户端请求站点时，服务器会发送带有 JS 文件的 .html。所以最后，JS 文件操作单个 .html 文件。

关于使用 npx create-react-app 创建 React 应用程序时附带的 create-react-app 和 react-scripts 包处理使用 node 提供开发服务的所有要求。所有包的文件都在 node_modules 中。

这些链接可能有所帮助：