Appearance
脚手架
安装脚手架
shell
npm install -g create-react-app
1
创建 React 项目
注意：项目名称要遵循 npm 包命名规范：使用“数字、小写字母、_”命名
create-react-app 项目名称
cd 项目名称
yarn start
1
2
3
2
3
一个 React 项目中，默认会安装：
- react：React 框架的核心
- react-dom：React 视图渲染的核心「基于 React 构建 WebApp（HTML 页面）」 ---> react-native：构建和渲染 App 的
- react-scripts：脚手架为了让项目目录看起来干净一些，把 webpack 打包的规则及相关的插件 /LOADER 等都隐藏到了 node_modules 目录下。react-scripts 就是脚手架中自己对打包命令的一种封装，基于它打包，会调用 node_modules 中的 webpack 等进行处理！！
目录结构分析
├── README.md // 说明文档
├── package.json // 包管理工具
├── public
│ ├── favicon.ico // 引用顶部的 icon
│ ├── index.html // 引用 index.html入口文件
│ ├── logo192.png // manifest.json使用
│ ├── logo512.png // manifest.json使用
│ ├── manifest.json // web app配置相关
│ └── robots.txt // 指定索引可以或者无法爬取的文件
└── src
├── App.css // App 组件相关的样式
├── App.js // App组件的代码文件
├── App.test.js // App 组件的测试代码文件
├── index.css // 全局样式的文件
├── index.js // 整个项目的入口文件
├── logo.svg // 刚才启动项目，所看到的 React 图标
├── reportWebVitals.js // 默认帮助我们写好的 PWA 相关的代码
└── setupTests.js // 测试初始化文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
robots.txt
搜索引擎使用 spider 程序自动访问互联网上的网页并获取网页信息。
允许所有的 robot 访问
User-agent: * Allow: / 或者 User-agent: * Disallow:
禁止所有搜索引擎访问网站的任何部分
User-agent: *
Disallow: /
仅禁止 Baiduspider 访问您的网站
User-agent: Baiduspider
Disallow: /
仅允许 Baiduspider 访问您的网站
User-agent: Baiduspider
Disallow:
禁止 spider 访问特定目录
User-agent: *
Disallow: /cgi-bin/
Disallow: /tmp/
Disallow: /~joe/
允许访问特定目录中的部分 url
User-agent: *
Allow: /cgi-bin/see
Allow: /tmp/hi
Allow: /~joe/look
Disallow: /cgi-bin/
Disallow: /tmp/
Disallow: /~joe/
使用”*”限制访问 url
禁止访问 /cgi-bin/ 目录下的所有以”.htm”为后缀的 URL（包含子目录）。
User-agent: *
Disallow: /cgi-bin/*.htm
使用”$”限制访问 url
仅允许访问以”.htm”为后缀的 URL。
User-agent: *
Allow: .htm$
Disallow: /
禁止访问网站中所有的动态页面
User-agent: *
Disallow: /?
禁止 Baiduspider 抓取网站上所有图片
仅允许抓取网页，禁止抓取任何图片。
User-agent: Baiduspider
Disallow: .jpg$
Disallow: .jpeg$
Disallow: .gif$
Disallow: .png$
Disallow: .bmp$
仅允许 Baiduspider 抓取网页和。gif 格式图片
允许抓取网页和 gif 格式图片，不允许抓取其他格式图片
User-agent: Baiduspider
Allow: .gif$
Disallow: .jpg$
Disallow: .jpeg$
Disallow: .png$
Disallow: .bmp$
仅禁止 Baiduspider 抓取。jpg 格式图片
User-agent: Baiduspider
Disallow: .jpg$
manifest.json
web 应用程序清单文件，web 应用程序清单中定义的规范，提供了一个 web 应用程序的信息在一个 JSON 文本文件，web 应用程序所必需的下载，向用户提供类似于一个本地应用程序（例如，在屏上安装的设备，为用户提供更快的访问和更丰富的体验）。PWA 清单包括它的名称、作者、图标、版本、描述和所有必要资源的列表（以及其他内容）。
reportWebVitals.js
webVital 是 Google 提出的、检测用户体验的标准，这些指标包含三个关键指标（CLS、FID、LCP）和两个辅助指标（FCP、TTFB）
javascript
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
LCP (Largest Contentful Paint)
最大内容渲染时间：指的是从用户请求网址到窗口中渲染最大可见内容所需要的事件（最大可见内容通常是图片或者视频，或者大块的文本）
FID (First Input Delay)
首次输入延迟：指的是从用户首次与网页互动（点击链接、按钮等）到浏览器响应此次互动直接的时间。用于判断网页进入互动状态的时间。
CLS (Cumulative Layout Shift)
累计布局偏移：得分范围 0-1，指的是网页布局在加载期间的偏移量，0 表示没有偏移，1 表示最大偏移，这个指标指示用户与网站的交互体验，如果网址在加载过程布局一直跳动，用户体验会很差。比如加载一张图片，但没有大小空白占位，导致图片显示时页面高度跳动。
FCP(First Contentful Paint)
首次内容绘制，标记浏览器渲染来自 DOM 第一位内容的时间点，内容可能是文本、图像等元素。
TTFB (Time to First Byte)
首字节到达的时间点。
了解 PWA
整个目录结构都非常好理解，只是有一个 PWA 相关的概念：
- PWA 全称 Progressive Web App，即渐进式 WEB 应用；
- 一个 PWA 应用首先是一个网页，可以通过 Web 技术编写出一个网页应用；
- 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能；
- 这种 Web 存在的形式，我们也称之为是 Web App；
PWA 解决了哪些问题呢？
- 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏；
- 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能；
- 实现了消息推送；
- 等等一系列类似于 Native App 相关的功能；
基于 webpack
React 的脚手架是基于 Webpack 来配置的，但是本章节不对 webpack 有更多的描述
开启脚手架中的 webpack
yarn eject
1
它会执行 package.json 文件中的一个脚本："eject": "react-scripts eject"