React 分类 | ThatManK

47 articles

8 articles

初始化项目项目创建与配置一、初始化项目创建项目安装依赖查看项目配置二、调整项目文件项目目录 App.tsx 调整内容入口文件 main.tsx 三、样式初始化安装 reset-css main.
全局样式配置一、模块化引入样式创建两个组件 src\components\Comp1\Comp1.tsx src\components\Comp2\Comp2.tsx 创建 src\components\Com
配置路由一、路由配置创建两个页面 src\pages\Home\Home.tsx src\pages\About\About.tsx 创建路由 src\router\router.tsx main.tsx
配置左侧边栏 Home.tsx 配置为首页, 引入 antd 组件创建全局参数配置目录, 配置 Home.tsx 页面参数 src\pages\config\home.tsx App.tsx 中保持不变
实现Home页面导航的切换实现 Home 页面导航的切换一、Home 页面配置左侧 tab 的点击事件配置点击跳转 src\pages\config\home.tsx 参数修改创建两个页面 src\pages\Page
实现页面保持和组件抽取 Home 页面组件提取组件 src\pages\Home\HomeMenu.tsx 删除 config 目录 = src\pages\config
补全剩余页面 xx 创建页面, 修改路由修改组件参数
创建登陆页(结束) 创建登陆页 src\pages\Login\Login.tsx 样式 src\pages\Login\Login.module.scss 路由中引入课程地址

8 articles

创建项目一、项目初始化配置一、项目初始化创建项目安装依赖包启动配置 package.json 二、配置 sass 创建文件 src\styles\sassConfig.scss vite 引入 vit
基本路由配置一、配置路由 src\main.tsx 引入 BrowserRouter 创建 Login 主页面 src\pages\Login\Login.tsx Home、User 子页面 src\pages\
Layout框架搭建 Layout 框架搭建创建布局 src\pages\Layout\Layout.tsx 创建全局样式 App.tsx 引入 src\index.css 精简
路由封装创建文件 src\router\router.tsx App.tsx 中引入
引入Menu 引入 Menu 调整 router 调整 App 封装 Aside, 新建 src\pages\Layout\Aside.tsx Layout 引入适应 antd 样式 src\pages\Layo
实现页面切换和保持 router 调整 Aside.tsx
登录页面创建创建登录页面 src\pages\Login\Login.tsx 样式 src\pages\Login\Login.scss
配置登录拦截创建拦截组件 src\components\AuthRouter\AuthRouter.tsx App.tsx 中引入 Login 页面课程目录

7 articles

创建项目创建项目删除多余文件引入 Router
实现登陆一、创建登陆页面 src\pages\login\index.tsx 样式 src\pages\login\login.module.scss 背景图片可以随便找一张图放在对应目录下全局的变量
User页面渲染新建 User 页面, 并渲染样式 src\pages\user\user.module.scss 全局参数类型声明 src\pages\user\user.d.ts 页面部署 src\pages\
User页面获取数据 xxx User 页面新增用户所有 API 请求 src\api\user.tsx 重复一下声明文件 src\react-app-env.d.ts
User操作用户操作一、新增用户新增组件 src\pages\user\components\AddUser.tsx User 引入组件二、删除用户 src\pages\user\components\De
新建公共布局创建布局组件 src\components\AppLayout\AppLayout.tsx App.tsx 中引入
集中式路由创建路由 src\router\index.tsx 创建布局管理页面 src\components\AppLayout\index.tsx 需要新增的页面 App.tsx 引入路由

React