Gra*_*ful 3 javascript reactjs
我在互联网上的某个地方读到index.html了 React 应用程序的入口点。然而，同一篇文章接着说这index.js是主要入口点（以及大多数节点应用程序）。那么是哪一个呢？
当有人在浏览器中加载 React 应用程序时，我假设index.js首先运行，然后加载index.html. 但是这通常是如何发生的......就像在浏览器中加载应用程序到第一次运行的流程一样index.js？
索引.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>
索引.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 的代码在哪里？
我相信你正在使用
create-react-app. 当您检查文件夹内npm install指定的文件后。你会看到下面的代码。node_modules/react-scripts/config/paths.jsnode_modules
....
....
appHtml: resolveApp('public/index.html'),
....
paths.appIndexJs 是 webpack 配置中的入口文件。
HtmlWebpackPlugin 在路径 paths.appHtml 处加载 html。因此，在您的应用程序目录中， appHtml 是 file public/index.html， appIndexJs 是 file src/index.js。
简单来说：
index.html是 React 渲染所有 UI 的index.js地方，也是所有 JS 代码所在的地方。所以浏览器，首先获取index.html，然后渲染文件。然后 JS inindex.js负责 UI 的所有逻辑渲染，它以带有 id 的元素root作为其渲染所有 UI 的基本元素。
就像在 vanilla JS 中一样，React 搜索带有 ID 的元素，'root'并使用虚拟 DOM 概念将所有要呈现的 UI 保留在该元素内。您可以查看此概念。
在你完成 React 开发后，你必须使用构建工具通过npm build或来构建 React App yarn build，它将你的所有代码合并到一个文件中。因此，当客户端请求您的站点时，服务器会.html随 JS 文件一起发送。所以，最后，JS 文件操作单个.html文件。
关于create-react-app,react-scripts当您创建一个 React 应用程序时附带的包npx create-react-app处理使用node.js 处理开发服务的所有要求。包的所有文件都在 node_moudles 中。
此链接可能会有所帮助：
| 归档时间： |
|
| 查看次数： |
2560 次 |
| 最近记录： |