React + 项目(从基础到实战) -- 第一期

react是什么

任何领域,强大,高效的东西一定是简单的

• react 是js,外加一点模板语言JSX(像HTML)
• 下载最多,生态丰富

符合js语法

React 官方中文文档 (docschina.org)

核心价值

组件化 + 数据驱动视图

组件化

• 不是react原创,在React流行开
• 拆分组件页面,通过组件拼接页面,实现组件复用
• 易于多人合作

数据驱动视图

UI=f(state)

• state 数据
• ui 视图(user interface)
• 数据经过函数的封装驱动视图

只关注业务数据的修改,不再操作DOM,增加开发效率

创建项目

使用脚手架

为什么

• 前端项目配置多,由0开始成本高

常用脚手架

1. create-React-App创建React项目
2. vite创建React项目
3. 使用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

1. 安装相关插件
2. 创建配置文件
3. 创建命令并使用

在文件一保存的时候进行处理

.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 “注释” 之后的注释部分