React脚手架案例

本文详细介绍了React脚手架的初始化、整体结构、src文件夹分析、public文件夹内容、eject操作、组件创建及样式的模块化。通过实例讲解如何测试App.test.js,分析Web Vitals以优化性能,以及探讨vscode中React插件的安装和组件化编码流程。
摘要由CSDN通过智能技术生成

React脚手架

一 初始化 react 脚手架

需要理解的概念有:

  • 脚手架的作用是什么
  • 脚手架的支持技术是什么?webpack(入口、出口、加载器、模式、插件)
  • 脚手架将会做哪些工作
  • JSX的预解析编译等
  • 模块化、组件化、工程化

reac脚手架

  1. xxx脚手架:用来帮助程序员快速创建一个基于xxx库的模板项目
  2. 包含了所有需要的配置(语法检查、jsx编译、devServer…)
  3. 下载好了所有相关的依赖
  4. 可以直接运行一个简单效果
  5. react提供了一个用于创建react项目的脚手架库: create-react-app
  6. 项目的整体技术架构为: react + webpack + es6 + eslint
  7. 使用脚手架开发的项目的特点:模块化、组件化、工程化

创建项目并启动
第一步,全局安装: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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值