1.创建项目

  1. npm i -g create-react-app
  2. create-react-app react-demo
  1. //创建js版项目
  2. npx create-react-app react-demo
  5. //创建ts版项目
  6. npx create-react-app react-demo --template=typescript

2.public文件夹

image.png
index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <!-- %PUBLIC_URL%/代表public的路径 -->
  6.     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  7.     <!-- 用于移动端适配 -->
  8.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  9.     <!-- 配置浏览器页签和地址栏颜色（仅适用安卓） -->
  10.     <meta name="theme-color" content="#000000" />
  11.     <!-- 描述网站信息 -->
  12.     <meta
  13.       name="description"
  14.       content="Web site created using create-react-app"
  15.     />
  16.     <!-- 苹果手机用于网页添加到手机主屏幕后的图标 -->
  17.     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  19.     <!-- mainfest.json做应用加壳配置文件 -->
  20.     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  21.    <!-- 标题 -->
  22.     <title>React App</title>
  23.   </head>
  24.   <body>
  25.     <!-- 浏览器不支持js运行 -->
  26.     <noscript>You need to enable JavaScript to run this app.</noscript>
  27.     <!-- 根标签 -->
  28.     <div id="root"></div>
  30.   </body>
  31. </html>

3.src文件夹

index.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import './index.css';
  4. import App from './App';
  5. import reportWebVitals from './reportWebVitals';
  7. ReactDOM.render(
  8.   // React.StrictMode检查app和app包裹的组件是否合理
  9.   <React.StrictMode>
  10.     <App />
  11.   </React.StrictMode>,
  12.   document.getElementById('root')
  13. );
  15. //记录页面的性能
  16. reportWebVitals();

setupTests.js

  1. //检查测试
  2. import '@testing-library/jest-dom';

reportWebVitals.js
记录性能

  1. const reportWebVitals = onPerfEntry => {
  2.   if (onPerfEntry && onPerfEntry instanceof Function) {
  3.     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
  4.       getCLS(onPerfEntry);
  5.       getFID(onPerfEntry);
  6.       getFCP(onPerfEntry);
  7.       getLCP(onPerfEntry);
  8.       getTTFB(onPerfEntry);
  9.     });
  10.   }
  11. };
  13. export default reportWebVitals;