react是什么
任何领域,强大,高效的东西一定是简单的
- react 是js,外加一点模板语言JSX(像HTML)
- 下载最多,生态丰富
符合js语法
React 官方中文文档 (docschina.org)
核心价值
组件化 + 数据驱动视图
组件化
- 不是react原创,在React流行开
- 拆分组件页面,通过组件拼接页面,实现组件复用
- 易于多人合作
数据驱动视图
UI=f(state)
- state 数据
- ui 视图(user interface)
- 数据经过函数的封装驱动视图
只关注业务数据的修改,不再操作DOM,增加开发效率
创建项目
使用脚手架
为什么
- 前端项目配置多,由0开始成本高
常用脚手架
- create-React-App创建React项目
- vite创建React项目
- 使用eslint prettier husty等,制定编码规则
vite 和webpack的区别
- webpack :
传统的前端打包工具(将文件整合在一起–打包),create-React-app脚手架底层实现 - vite:
打包工具(使用ESMoudle 语法,比较快,将分散的文件联系),也是构建工具
工具准备
下载 nodeJs
换成淘宝镜像
下载vsCode
下载git
create-react-app创建
Getting Started | Create React App 中文文档 (bootcss.com)
npx create-react-app my-app --template typescript
默认是js,注意之后添加 --template typescript 使用ts
cd 你的文件
npm start
vite 创建
开始 | Vite 官方中文文档 (vitejs.dev)
代码规范–使用eslint,prettier
- 安装相关插件
- 创建配置文件
- 创建命令并使用
在文件一保存的时候进行处理
.vscode 全局的配置
{"editor.codeActionsOnSave": {"source.fixAll.eslint": true}}
自己的配置
有点麻烦先不做了,使用vite构建项目
提交到git仓库
常见命令:
git init
git status
git add .
git commit -m “注释”
代码流程—使用husky,commit-lint
husky
在代码提交之前检查现有的代码是否符合规范,不符合定义
命令修改
commit-lint
规范提交git commit -m “注释” 之后的注释部分
)
)
