React应用

React应用

Amumu121382026-01-10 10:53

一、react脚手架介绍

1、脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

复制代码

1.1 包含了所有需要的配置,其中有语法检查、jsx编译、devServer等
1.2 下载好了所有相关依赖
1.3 可以直接运行一个简单效果

2、使用vite构建工具用于创建react项目脚手架

3、项目整体架构为react+vite+es6+eslint等

4、使用脚手架开发的项目特点: 模块化、组件化、工程化

二、创建项目并启动流程

1、安装nodeJs,前往官网自行下载

2、切换到想创建项目目录,使用命令

bash 复制代码

//使用vite构建工具用于创建react项目 my-react
npm create vite@latest my-react

3、进入项目文件夹

bash 复制代码

cd my-react

4、下载相关依赖,生成node_modules

bash 复制代码

npm install

5、启动项目

bash 复制代码

npm run dev

三、文件目录介绍

html 复制代码

public --静态资源文件夹
	vite.svg --网站页签图标
src --源码文件夹
	App.tsx -- App组件
	main.ts -- 项目入口文件
.gitignore -- git忽略目录
eslint.config.js -- eslint代码检查配置
index.html -- 主页面
package-lock.json -- pageage文件相关依赖锁
pageage.json -- 项目依赖配置
vite.config.ts -- vite配置

四、功能界面组件化编码流程

1、拆分组件: 拆分界面,抽取组件

2、实现静态组件: 使用组件实现静态页面效果

3、实现动态组件

复制代码

3.1 动态显示初始化数据: 数据类型、数据名称、保存在xxx组件
3.2 交互绑定事件监听