react默认模板结构详解

• npx create-react-app my-app创建的项目模板目录详解：
• 整体目录如下：

my-app │── node_modules     [相关依赖包] │── public                   [存放相关静态资源公共目录] │  ├── favicon.ico       [浏览器地址栏图标] │  ├── index.html        [入口根文件页面] │  ├── logo192.png    [默认图片资源] │  ├── logo512.png    [默认图片资源] │  ├── manifest.json   [移动端配置文件] │  └── robots.txt         [允许哪些被爬虫，哪些不能] │ │── src                        [项目代码目录] │  ├── App.css            [入口文件绑定的组件样式] │  ├── App.js               [入口文件绑定的组件] │  ├── App.test.js        [入口文件绑定的组件测试] │  ├── index.css          [入口根文件样式] │  ├── index.js             [入口根文件] │  ├── logo.svg            [图标矢量图] │  ├── reportWebVitals.js  [项目性能分析文件] │  └── setupTests.js    [index.js的单元测试文件] │ │── package-lock.json [Git上传时锁定依赖的版本] │── package.json        [webpack配置，增删依赖] │── .gitignore             [Git选择性上传的配置文件] └── README.md      [Git上传时的，项目说明文件]

• 其中index.js文件详解如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));    //绑定根DOM元素
root.render(                     //元素渲染
  <React.StrictMode>             //语法检验
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();               //性能分析,reportWebVitals(console.warn)可以在控制台中查看

• reportWebVitals.js文件详解如下：

const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);        //最大内容渲染时间：指的是从用户请求网址到窗口中渲染最大可见内容所需要的事件（最大可见内容通常是图片或者视频，或者大块的文本）
      getFID(onPerfEntry);        //首次输入延迟。指的是从用户首次与网页互动（点击链接、按钮等）到浏览器响应此次互动直接的时间。用于判断网页进入互动状态的时间
      getFCP(onPerfEntry);        //首次内容绘制，标记浏览器渲染来自 DOM 第一位内容的时间点，内容可能是文本、图像等元素。
      getLCP(onPerfEntry);        //最大内容渲染时间。指的是从用户请求网址到窗口中渲染最大可见内容所需要的事件（最大可见内容通常是图片或者视频，或者大块的文本）
      getTTFB(onPerfEntry);       //首字节到达的时间点
    });
  }
};

export default reportWebVitals;