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

相关推荐
F2E_Zhangmo1 分钟前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户214118326360217 分钟前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc1 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|1 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之1 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦3 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro3 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹4 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风4 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱4 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript