react+ts实现简单jira项目

最新推荐文章于 2024-02-16 00:59:54 发布
最新推荐文章于 2024-02-16 00:59:54 发布
阅读量676 收藏 2
点赞数
分类专栏： react系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lin_fightin/article/details/119222222
版权

练手的一套项目
react+ts
虽然内容较少，但是干货挺多，尤其是对hooks的封装，ts的泛型的理解，使用更上一层楼
项目代码：https://gitee.com/fine509/react_jiar

效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这是三个主要页面，还有一些小细节

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
等等

一些值得注意的地方（只是讲大概的功能，没有具体的详解怎么用）

在这里插入图片描述
使用错误边界处理，getDerivedStateFromError来处理当某个页面某处地方有报错的时候显示报错组件而不是挂掉。

useSearchParams的使用

在这里插入图片描述
在这里插入图片描述

这个api可以获取和设置我们这里的params。

react-query的使用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这个库网上对他的介绍是用来管理服务端数据的状态管理库，他好像有点类似于redux，但是不用编写很多的actions,reducer，支持异步请求，用key唯一标识数据，存在一个类似于全局状态管理库的地方。特别适合用于某些表格，比如增删改改查这些，而且也很支持乐观更新。
思路就是 比如增删改查，再发送数据的那一刻直接拿到原来的数据，通过自己编写的逻辑代码，获取到增删改查后的数据，然后直接渲染到页面，看上去就像是直接更新了一样，实际上是先渲染，后台再自己发送请求，当失败的时候，你也可以拿到原始的数据然后重新渲染到页面去，再提示失败。

最后就是我做这个项目特别纠结的一点，数据的管理。

我首先是自己封装了一个hooks。
在这里插入图片描述
我的思路是，一个页面可能要获取很多数据，那么Loading这些如果自己写很麻烦，还有多个，为什么loading不能统一管理呢，然后data就设为一个对象，在使用的时候你可以传一个类型过来定义你这个data的类型
在这里插入图片描述
然后sendHttp用来发送数据
在这里插入图片描述
接受两个参数，第二个参数是当前的数据要放在data的哪个属性上，

使用效果就是

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这样就可以统一管理这些数据的状态，但后面发现用起来也是很麻烦。所以我又放弃了，还是原生的写起来舒服啊
直接定义接口
在这里插入图片描述
直接使用
在这里插入图片描述
害，当然我也想到用redux，但是redux很多都要编写action，reducer这些，也是很繁琐。
最近听朋友说ahooks的usequest也不错，下个项目试试。

最后这个项目学到最多的就是封装各种hooks

封装redux的

在这里插入图片描述

封装请求的

在这里插入图片描述

还有就是ts的学习，

看到不懂得api就直接类型定义点进去
在这里插入图片描述
像这种不懂就点进去，一个一个点击去在这里插入图片描述
在这种狂轰乱炸的情况下，会慢慢了解泛型的使用

coderlin_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
React 实战 Todolist (上)
面向生活编程
02-07 1392
最近在学 react ，所以就顺手写一个Todolist作为练手项目。
前端练手项目合集40，2024年春招前端面试题
2301_76348242的博客
04-02 398
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料我特地针对初学者整理一套前端学习资料。
实践！使用Webpack搭建【React + TS】开发环境
2201_75866478的博客
12-25 1103
理解模块化：Webpack是一个模块打包工具，可以将多个模块打包成一个或多个文件，方便开发者调用。掌握配置文件：Webpack的配置文件（webpack.config.js）允许自定义打包规则，满足项目的特定需求。熟悉Loader和Plugin：Loader用于处理模块的加载，Plugin用于扩展Webpack的功能。了解常见的Loader和Plugin，如Babel Loader、CSS Loader等。掌握代码拆分：代码拆分可以将大型项目分成多个较小的包，提高应用的加载性能。
react+ts【项目实战一】配置项目/路由/redux
weixin_46738453的博客
02-16 1985
return (发现音乐我是downLoad的插槽{useRoutes(routes)}
React+TS学习和使用
aiyang1214878408的博客
06-22 7132
开启学习react+ts，本篇主要是用react创建项目和了解Function Component。
最详细教程【React+TS】从零开始搭建React+TypeScript+Router+Redux+Less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile
热门推荐
weixin_56529964的博客
08-17 1万+
你需要准备好node.js版本不低于6.14.8 和 git文章内容比较长(保姆级别教程)，全是干货，请耐心看完 注: 项目名称不可以出现大写字母出现Happy hacking! 就说明项目搭建成功 打开vscode查看项目当项目中出现tsx 就说明项目搭建成功然后启动项目 npm start / npm run start下载路由 src目录下创建views文件夹，views内创建Home，Contact，About，Navbar四个tsx文件，其中Navbar用来控制路由，其他三个
React+TS基础
qq_45897636的博客
10-31 1821
项目的初始化 JSX的命名约定 JSX中的模块化CSS 组件的类型 State和Props react的事件处理 React的生命周期 hooks构子 useState的基本使用 useEffect的基本使用 useContext的基本使用 介绍HOC HOC组件的简单应用 props父传子 props子传父 props插槽 跨级传输 React的依赖注入 使用useContext消费 使用依赖注入实现全局状态管理 跨级传输
React+Ts，这样学起来确实简单！！！
wang_yu_shun的博客
03-22 1万+
React这样的框架存在对应的声明文件，声明文件通过一些基础语法定义了一些类型，从而获取到TypeScript中诸如类型检查、接口提示等特性功能，也可以在自己用TS开发时避免自己写一些复杂的ts结构类型了，下面就来看一下React中定义ts语法如何使用。茶已备好，只待君来！感谢关注 前端点线面 (>‿<）,本号干货满满：1.14个门类（100+篇原创）内容——...
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile最详细教程
m0_64387562的博客
06-22 5575
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile最详细教程
【JavaScript源代码】react+ts实现简单jira项目的最佳实践记录.docx
12-29
react+ts实现简单jira项目的最佳实践记录 　练手的一套项目 react+ts 虽然内容较少，但是干货挺多，尤其是对hooks的封装，ts的泛型的理解，使用更上一层楼 项目代码：https://gitee.com/fine509/react_jiar　　效果...
react-jira:react + ts 仿写jira
04-12
React吉拉React+ ts吉拉
jirara:React 17 + Hooks + TypeScript模拟Jira
03-17
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何...
基于React17+React Hooks+TS4开发的仿Jira项目+源码+开发文档（毕业设计&课程设计&项目开发）
最新发布
05-28
基于React17+React Hooks+TS4开发的仿Jira项目+源码+开发文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 项目简介： 可用脚本 在项目目录中，可以运行： 在...
初始化React电商+TS实战项目
站在巨人的肩膀上前行
09-30 1195
2.根目录下创建 craco.config.js 配置按需导入和自定义主题。1.修改 package.json 里的 scripts 属性。3.根目录下package.json文件。
使用 TS 开发 React 项目起手式
超超超Man的博客
12-19 1723
创建项目实际开发过程中，我们一般会使用 Typescript 开发 React 应用，所以不要直接运行 create-react-app 脚手架命令，而应该使用如下方式：// 1. 全局安装 create-react-app yarn global add create-react-app // 2. 创建支持 TS 语法的 React 应用 create-react-app my-app --template typescript 参考文档： https://create-react-app.dev/do
TypeScript(二)--React与TS
qq_44930306的博客
10-27 1835
TypeScript在React中的应用
可能是你需要的 React + TypeScript 50 条规范和经验
zhangwenok的博客
05-19 1941
1. 注释 (1) 文件顶部的注释，包括描述、作者、日期 /** * @description xxxxxx * @author chengfeng * @since 19/05/21 */ (2) 模块的注释 /** * 拷贝数据 * @param {*} data 要拷贝的源数据 * @param {boolean} [isDeep=false] 是否深拷贝，默认浅拷贝 * @return {*} 返回拷贝后的数据 */ (3) 业务代...
react+ts搭建
m0_56540662的博客
04-19 1万+
react+ts搭建
react+ts+vite搭建一个项目
05-20
好的，下面是搭建 React + TypeScript + Vite 项目的步骤： 1. 安装 Node.js 和 npm 如果你还没有安装 Node.js 和 npm，请先去官网下载并安装。 2. 初始化项目 打开终端，进入你想要创建项目的目录，运行以下命令： ``` npm init @vitejs/app my-react-ts-app --template react-ts ``` 这个命令会使用 Vite 提供的 React + TypeScript 模板来初始化一个项目，并将其命名为 `my-react-ts-app`。在命令执行过程中，你需要回答一些问题，比如项目名称、描述等。 3. 安装依赖 进入项目目录，运行以下命令安装依赖： ``` cd my-react-ts-app npm install ``` 4. 运行项目 运行以下命令启动项目： ``` npm run dev ``` 这个命令会启动一个开发服务器，并在浏览器中打开应用。你可以在项目文件夹中的 `src` 目录下修改代码，保存后浏览器会自动刷新。 5. 构建项目 运行以下命令构建项目： ``` npm run build ``` 这个命令会将项目打包成静态文件，保存在 `dist` 目录下。 以上就是使用 React + TypeScript + Vite 搭建项目的全部步骤。祝你成功！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderlin_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值