返回顶部
首页 > 资讯 > 精选 >怎么用react+ts实现简单jira项目
  • 913
分享到

怎么用react+ts实现简单jira项目

2023-06-20 18:06:47 913人浏览 八月长安
摘要

这篇文章主要介绍“怎么用React+ts实现简单jira项目”,在日常操作中,相信很多人在怎么用react+ts实现简单jira项目问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用react+ts实现简单

这篇文章主要介绍“怎么用React+ts实现简单jira项目”,在日常操作中,相信很多人在怎么用react+ts实现简单jira项目问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用react+ts实现简单jira项目”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!



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

效果图

怎么用react+ts实现简单jira项目
怎么用react+ts实现简单jira项目
怎么用react+ts实现简单jira项目

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

怎么用react+ts实现简单jira项目
怎么用react+ts实现简单jira项目
怎么用react+ts实现简单jira项目
等等

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

怎么用react+ts实现简单jira项目

使用错误边界处理,getDerivedStateFromError来处理当某个页面某处地方有报错的时候显示报错组件而不是挂掉。

useSearchParams的使用

怎么用react+ts实现简单jira项目
怎么用react+ts实现简单jira项目

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

react-query的使用

怎么用react+ts实现简单jira项目
怎么用react+ts实现简单jira项目
怎么用react+ts实现简单jira项目

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

我首先是自己封装了一个hooks。

怎么用react+ts实现简单jira项目

我的思路是,一个页面可能要获取很多数据,那么Loading这些如果自己写很麻烦,还有多个,为什么loading不能统一管理呢,然后data就设为一个对象,在使用的时候你可以传一个类型过来定义你这个data的类型

怎么用react+ts实现简单jira项目

然后sendHttp用来发送数据

怎么用react+ts实现简单jira项目

接受两个参数,第二个参数是当前的数据要放在data的哪个属性上,

使用效果就是

怎么用react+ts实现简单jira项目
怎么用react+ts实现简单jira项目
怎么用react+ts实现简单jira项目

这样就可以统一管理这些数据的状态,但后面发现用起来也是很麻烦。所以我又放弃了,还是原生的写起来舒服啊
直接定义接口

怎么用react+ts实现简单jira项目

直接使用

怎么用react+ts实现简单jira项目

害,当然我也想到用redux,但是redux很多都要编写action,reducer这些,也是很繁琐。
最近听朋友说ahooks的usequest也不错,下个项目试试。

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

封装redux的

怎么用react+ts实现简单jira项目
怎么用react+ts实现简单jira项目

封装请求的

怎么用react+ts实现简单jira项目

还有就是ts的学习,

看到不懂得api就直接类型定义点进去

怎么用react+ts实现简单jira项目

像这种不懂就点进去,一个一个点击去

怎么用react+ts实现简单jira项目

在这种狂轰乱炸的情况下,会慢慢了解泛型的使用

到此,关于“怎么用react+ts实现简单jira项目”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: 怎么用react+ts实现简单jira项目

本文链接: https://lsjlt.com/news/299188.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 怎么用react+ts实现简单jira项目
    这篇文章主要介绍“怎么用react+ts实现简单jira项目”,在日常操作中,相信很多人在怎么用react+ts实现简单jira项目问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用react+ts实现简单...
    99+
    2023-06-20
  • react+ts实现简单jira项目的最佳实践记录
    练手的一套项目 react+ts 虽然内容较少,但是干货挺多,尤其是对hooks的封装,ts的泛型的理解,使用更上一层楼 项目代码:https://gitee.com/fine509...
    99+
    2024-04-02
  • Swift实现简单计算器项目
    本文实例为大家分享了Swift实现简单计算器项目的具体代码,供大家参考,具体内容如下 // //  ViewController.swift //  计算器 // //  Creat...
    99+
    2024-04-02
  • Flask登录注册项目的简单实现
    本文主要介绍了Flask登录注册项目的简单实现,分享给大家,具体如下: 目录结构 配置文件设计 /templates/config.py #数据库连接配置 import p...
    99+
    2024-04-02
  • Swift如何实现简单计算器项目
    本篇文章为大家展示了Swift如何实现简单计算器项目,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。////  ViewController.swift//  ...
    99+
    2023-06-28
  • React项目中应用TypeScript的实现
    目录一、前言 二、使用方式 无状态组件 有状态组件 受控组件 三、总结 一、前言 单独的使用typescript 并不会导致学习成本很高,但是绝大部分前端开发者的项目都是依赖于框架...
    99+
    2024-04-02
  • 使用Vite搭建vue3+TS项目的实现步骤
    目录vite简介初始化项目修改vite.config.ts安装ts依赖和ESLint安装Axios配置跨域安装Lessvite简介 vite 是一个基于 Vue3 单文件组件的非打包...
    99+
    2023-01-11
    Vite搭建vue3+TS项目
  • 怎么在Java项目中实现一个简单工厂模式
    今天就跟大家聊聊有关怎么在Java项目中实现一个简单工厂模式,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。简单工厂模式解释:     ...
    99+
    2023-05-31
    简单工厂模式 java ava
  • C语言实现简单的三子棋项目
    前言 三子棋是黑白棋的一种。三子棋是一种民间传统游戏,又叫九宫棋、圈圈叉叉、一条龙、井字棋等。将正方形对角线连起来,相对两边依次摆上三个双方棋子,只要将自己的三个棋子走成一条线,对方...
    99+
    2024-04-02
  • 怎么用vite简单搭建ts+vue3全家桶
    今天小编给大家分享一下怎么用vite简单搭建ts+vue3全家桶的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、vite环...
    99+
    2023-07-02
  • 怎么使用vite+vue3.0+ts+element-plus搭建项目
    这篇文章主要介绍“怎么使用vite+vue3.0+ts+element-plus搭建项目”,在日常操作中,相信很多人在怎么使用vite+vue3.0+ts+element-plus搭建项目问题上存在疑惑,小编查阅了各式资料,整理出简单好用的...
    99+
    2023-07-04
  • swift怎么实现简易计算器项目
    swift怎么实现简易计算器项目,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。首先在storyboard中搭建出界面接着上viewcontroller代码imp...
    99+
    2023-06-29
  • SpringBoot实现简单的登录注册的项目实战
    目录第一步:建立简单的项目第二步:建一个简单的数据表第三步:配置文件如下:第一步:建立简单的项目 第二步:建一个简单的数据表 第三步:配置文件如下: pom.xml文件配置:...
    99+
    2024-04-02
  • js简单选项卡功能怎么实现
    要实现简单的选项卡功能,你可以使用JavaScript和HTML的结合。以下是一个简单的选项卡实现示例:```html.tabcon...
    99+
    2023-09-22
    js
  • Django项目搭建之实现简单的API访问
    目录1、创建Django项目2、创建应用,我这里命名为demo3、编辑接口想要实现的功能4、配置路由5、配置djangoProject2文件夹下的urls6、迁移数据7、运行服务8、...
    99+
    2023-02-18
    django api访问 django写api接口 django api 权限
  • 怎么在React项目中使用Redux
    这篇文章主要介绍“怎么在React项目中使用Redux”,在日常操作中,相信很多人在怎么在React项目中使用Redux问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么在R...
    99+
    2024-04-02
  • 怎么使用docker部署react项目
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。怎么使用docker部署react项目?手把手教你在docker部署react项目(docker中部署nginx)1、拉取nginx镜像docker pu...
    99+
    2023-05-14
    React Docker
  • Python简单实现图片转字符画的实例项目
    1. 原理 利用 PIL 库来获取图片并修改大小, 利用灰度值转换公式把每一个像素的 RGB 值转为灰度值 gray = int(0.2126*r+0.7152*g+0.0722...
    99+
    2024-04-02
  • vue项目实现图片懒加载的简单步骤
    目录1、安装vue-lazyload插件2、在main.js中进行引用3、使用(将图片设置为懒加载)总结1、安装vue-lazyload插件 npm install vue-lazy...
    99+
    2024-04-02
  • .net6简单使用NPOI读取Excel的项目实践
    目录环境开始引用包:创建表格数据代码:环境 平台:.net6框架:DotNetCore.NPOI 读取Excel 数据,使用了 NPOI 这个框架,这个框架 NPOI是指构建在POI...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作