反应入口点：Index.html vs index.js？ 节点代码在哪里？
[英]React Entry Point: Index.html vs index.js? Where is the node code?
问题描述
I read somewhere on the internet that index.html is the entry point for a react app.
我在互联网上某处读到index.html是 React 应用程序的入口点。 However, the same article then went on to say that index.js is the main entry point (as well as for most node apps).然而，同一篇文章接着说index.js是主要入口点（以及大多数节点应用程序）。 So, which one is it?那么是哪一个呢？
When someone loads a react app in the browser, I assume index.js is run first, which in return loads index.html .当有人在浏览器中加载 react 应用程序时，我假设index.js首先运行，然后加载index.html 。 But how does that happen typically... As in, how does the flow go from loading the app in the browser to first running index.js ?但是这通常是如何发生的......就像 go 从在浏览器中加载应用程序到首先运行index.js的流程如何？
index.html索引.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 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();
Secondly, after npx create-react-app app , the code was run using npm start .其次，在npx create-react-app app之后，代码使用npm start运行。 So, I presume node.js is also involved.所以，我认为 node.js 也参与其中。 However, I can't find any familiar looking node code here.但是，我在这里找不到任何看起来很熟悉的节点代码。 Where is the code that makes the server listen to port 3000, for instance?例如，使服务器侦听端口 3000 的代码在哪里？
2 个解决方案
解决方案1
5 2020-08-14 04:29:46
In simple words: index.html is where all your UI is rendered by React and index.js is where all your JS codes exist.简而言之： index.html是 React 渲染所有 UI 的地方，而index.js是所有 JS 代码所在的地方。 So browser, first get index.html and then renders the file.所以浏览器，先获取 index.html 然后渲染文件。 then JS in index.js is responsible for all the logical rendering of UI, which takes element with id root to be its base element for rendering all the UIs.然后index.js中的 JS 负责 UI 的所有逻辑渲染，它将 id 为root的元素作为其基本元素，用于渲染所有 UI。
Like in vanilla JS, React searches for element with ID 'root' and keeps all the UI to be rendered inside that element using the virtual DOM concept.就像在 vanilla JS 中一样，React 搜索 ID 为'root'的元素，并使用虚拟 DOM 概念将所有要在该元素中呈现的 UI 保留。 You can view this concept.您可以查看此概念。
After you complete the React development, you have to use a build tool to build React App by npm build or yarn build , which merges all your codes to single file.完成 React 开发后，您必须使用构建工具通过npm build或yarn build构建 React App，将所有代码合并到一个文件中。 So when a client requests your site, the server sends .html with the JS files.因此，当客户端请求您的站点时，服务器会发送带有 JS 文件的.html 。 So, at last, JS files manipulates the single .html file.因此，最后，JS 文件操作了单个.html文件。
About the create-react-app , react-scripts package that comes when you create a react app with npx create-react-app handles all the requirements to serve a development serve using node.关于create-react-app ， react-scripts package 当您使用 npx create-react-app 创建一个反应应用npx create-react-app时会处理所有使用节点服务开发服务的要求。 All the files of packages are inside node_moudles.包的所有文件都在 node_moudles 中。
This links may be helpful:此链接可能会有所帮助：
解决方案2
3 2020-08-14 04:23:22
I believe you are using
create-react-app.create-react-app。 Afternpm installwhen you check a file namednode_modules/react-scripts/config/paths.jsinside thenode_modulesfolder.npm install后，当您检查 node_modules 文件夹中名为node_modules/react-scripts/config/paths.jsnode_modules文件时。 You see the below code.
....
....
appHtml: resolveApp('public/index.html'),
....
paths.appIndexJs is the entry file in the webpack config. path.appIndexJs 是 webpack 配置中的入口文件。
HtmlWebpackPlugin loads the html at the path paths.appHtml. HtmlWebpackPlugin 在路径 paths.appHtml 加载 html。 So inside your application directory, appHtml is file public/index.html and appIndexJs is file src/index.js .因此，在您的应用程序目录中， appHtml 是文件public/index.html而 appIndexJs 是文件src/index.js 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.