React脚手架
一 初始化 react 脚手架
需要理解的概念有:
- 脚手架的作用是什么
- 脚手架的支持技术是什么?webpack(入口、出口、加载器、模式、插件)
- 脚手架将会做哪些工作
- JSX的预解析编译等
- 模块化、组件化、工程化
reac脚手架
- xxx脚手架:用来帮助程序员快速创建一个基于xxx库的模板项目
- 包含了所有需要的配置(语法检查、jsx编译、devServer…)
- 下载好了所有相关的依赖
- 可以直接运行一个简单效果
- react提供了一个用于创建react项目的脚手架库: create-react-app
- 项目的整体技术架构为: react + webpack + es6 + eslint
- 使用脚手架开发的项目的特点:模块化、组件化、工程化
创建项目并启动
第一步,全局安装:npm i -g create-react-app
第二步,切换到想创项目的目录,使用命令:create-react-app hello-react(或者直接npx create-react-app hello-react 不用进行全局安装)
第三步,进入项目文件夹:cd hello-react
第四步,启动项目:npm start
二 分析脚手架整体结构(
需要理解的概念有:
- 项目分析的流程:
- 有文档先看文档
- 目录结构分析
- 文件结构分析
- 代码结构分析
三 分析脚手架-src 文件夹
需要理解的概念有:
- 单元测试
- 性能报告
- svg图片格式(位图与矢量图)
- css样式引入(预编译样式类型:scss、less、stylus等)
1.如何测试App.test.js:
运行命令:npx jest App.test.js --watch
报的错误是jsx的解析目前不支持
可以配置babel.config.js,并且安装cnpm i @babel/plugin-transform-runtime @babel/preset-flow -D再测试
module.exports = function (api) {
const presets = ['@babel/preset-env', '@babel/preset-react',
'@babel/preset-flow'];
const plugins = ['@babel/plugin-transform-runtime'];
api.cache(false);
return {
presets,
plugins,
};
};
则发现不再报jsx的解析不成功,而是报svg文件格式不支持解析了。所以,可以利用test进行项目文件的逐一测试操作。
2.页面加载性能之Web Vitals
- Largest Contentful Paint (LCP): 衡量加载性能。为了提供一个好的用户体验,LCP应该在2.5秒内。
- First Input Delay (FID): 衡量可交互性。为了提供一个好的用户体验,FID应该在100毫秒内。
- Cumulative Layout Shift (CLS): 衡量视觉稳定性。为了提供一个好的用户体验,CLS应该小于0.1。
- Time to F