Best Practices for Implementing Simple Jira Projects with React+TS

A set of projects for training
react+ts
Although the content is less, there are a lot of dry goods, especially the encapsulation of hooks, the understanding of ts generics, and the use of the next level project code: https://gitee.com/fine509/react_jiar

Rendering

These are the three main pages, and some small details

etc.

Some points worth noting (just talking about the general functions, no specific details on how to use them)

Use error boundary processing and getDerivedStateFromError to display the error component instead of hanging up when there is an error somewhere on a page.

Use of useSearchParams

This api can get and set our params here.

Use of react-query

The library is introduced online as a state management library for managing server-side data. It seems to be a bit similar to redux, but it does not require writing many actions and reducers. It supports asynchronous requests, uses keys to uniquely identify data, and has a place similar to a global state management library. It is particularly suitable for certain tables, such as adding, deleting, modifying, and checking, and it also supports optimistic updates. The idea is that, for example, when adding, deleting, modifying, and checking data, you can directly get the original data at the moment of sending the data. Through the logic code you write yourself, you can get the data after adding, deleting, modifying, and checking, and then render it directly to the page. It looks like it has been updated directly, but in fact it is rendered first, and then the background sends the request itself. When it fails, you can also get the original data and re-render it to the page, and then prompt the failure. The last point that particularly bothered me when doing this project was data management.

I first encapsulated a hook myself.

My idea is that a page may need to obtain a lot of data, so it is very troublesome to write Loading by yourself. There are multiple, why can't loading be managed uniformly? Then set data as an object. When using it, you can pass a type to define the type of your data.

Then sendHttp is used to send data

Accepts two parameters. The second parameter is the attribute of data where the current data is to be placed.

The effect of use is

This way, the status of this data can be managed in a unified manner, but later I found that it was very troublesome to use. So I gave up again. It's more comfortable to write natively. Just define the interface directly.

Direct use

Of course, I also thought of using redux, but redux requires writing actions and reducers, which is also very cumbersome.
Recently I heard from a friend that Ahooks' usequest is also good, so I'll try it in my next project.

Finally, the most learned thing from this project is to encapsulate various hooks

Encapsulating redux

Encapsulation request

There is also the study of ts,

If you don't understand an API, just click on the type definition.

If you don't understand something like this, just click in and click one by one.

In this bombardment, you will slowly understand the use of generics.

This is the end of this article about implementing a simple jira project with react+ts. For more relevant react+ts jira project content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!