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

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值