我在互联网上读到过一篇文章,说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的代码?
index.html
中的 "root" div。从那时起,所有内容都由你的 JS 渲染。对我来说,应用程序的入口点是 HTML,但对于 React 来说,index.js
是它的入口点。 - Joshua