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 全局的配置

json 复制代码
{

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

相关推荐
excel2 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着2 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友3 小时前
什么是API签名?
前端·后端·安全
会豪5 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子6 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶6 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子6 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_6 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23336 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin6 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js