Question

我在互联网上的某个地方看到index.html是React应用程序的切入点。但是，同一篇文章接着说index.js是主要入口点（以及大多数节点应用程序）。那是哪一个？

当某人在浏览器中加载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。但是，我在这里找不到任何熟悉的外观节点代码。例如，使服务器侦听端口3000的代码在哪里？

Answer 1

简单来说： index.html是您的所有UI由React呈现的位置，而index.js是您的所有JS代码存在的位置。因此，浏览器首先获取index.html，然后呈现文件。然后index.js中的JS负责UI的所有逻辑呈现，它将ID为root的元素作为呈现所有UI的基础元素。

与普通JS一样，React搜索ID为'root'的元素，并使用虚拟DOM概念将所有UI呈现在该元素内。您可以查看此概念。

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

关于使用create-react-app创建react应用时出现的react-scripts，npx create-react-app软件包，该文档处理了使用节点为开发服务提供服务的所有要求。软件包的所有文件都位于node_moudles中。

此链接可能会有所帮助：

Answer 2

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

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

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

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

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

2 个答案: