React+TS を使用したシンプルな Jira プロジェクトを実装するためのベスト プラクティス

React+TS を使用したシンプルな Jira プロジェクトを実装するためのベスト プラクティス

トレーニングのための一連のプロジェクト
反応+ts
内容は少ないですが、フックのカプセル化、ts ジェネリックの理解、次のレベルのプロジェクト コードの使用など、退屈な内容がたくさんあります。https://gitee.com/fine509/react_jiar

レンダリング

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

これらは3つのメインページといくつかの細かい詳細です

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

注目すべき点がいくつかあります(一般的な機能についてのみ説明しており、具体的な使用方法については説明していません)

ここに画像の説明を挿入

ページのどこかにエラーがある場合にハングアップするのではなく、エラー境界処理と getDerivedStateFromError を使用してエラー コンポーネントを表示します。

useSearchParamsの使用

ここに画像の説明を挿入
ここに画像の説明を挿入

この API はここでパラメータを取得および設定できます。

react-queryの使用

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

このライブラリは、サーバー側のデータを管理するための状態管理ライブラリとしてオンラインで紹介されています。 redux に少し似ているようですが、多くのアクションとリデューサーを書く必要はありません。 非同期リクエストをサポートし、キーを使用してデータを一意に識別し、グローバル状態管理ライブラリに似た場所を持っています。これは、追加、削除、変更、チェックなどの特定のテーブルに特に適しており、楽観的更新もサポートしています。 例えば、データの追加、削除、変更、チェックを行う際に、データを送信した瞬間に元のデータを直接取得できるという考え方です。自分で記述したロジックコードを通じて、追加、削除、変更、チェックを行った後のデータを取得し、それを直接ページにレンダリングすることができます。直接更新されたように見えますが、実際には最初にレンダリングされ、その後バックグラウンドでリクエスト自体が送信されます。失敗した場合は、元のデータを取得してページに再レンダリングし、失敗を通知することもできます。 このプロジェクトを実行する際に特に気になった最後の点は、データ管理でした。

まず、フックを自分でカプセル化しました。

ここに画像の説明を挿入

私の考えでは、ページは大量のデータを取得する必要がある可能性があるため、自分で Loading を書くのは非常に面倒です。複数あるのに、なぜ loading を統一的に管理できないのでしょうか? 次に、データをオブジェクトとして設定します。それを使用するときは、データのタイプを定義するために型を渡すことができます。

ここに画像の説明を挿入

次にsendHttpを使ってデータを送信します

ここに画像の説明を挿入

2 つのパラメータを受け入れます。2 番目のパラメータは、現在のデータが配置されるデータの属性です。

使用効果は

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

こうすることで、このデータの状態を一元的に管理できるのですが、後になって、これが非常に使いにくいことに気づきました。それでまた諦めました。ネイティブで書くほうが楽です。インターフェースを直接定義するだけです。

ここに画像の説明を挿入

直接使用

ここに画像の説明を挿入

もちろん、redux を使うことも考えましたが、redux ではアクションとリデューサーを書く必要があり、これも非常に面倒です。
最近友人から、Ahooks の usequest も良いと聞いたので、次のプロジェクトで試してみようと思います。

最後に、このプロジェクトから最も学んだことは、さまざまなフックをカプセル化することです

カプセル化redux


ここに画像の説明を挿入

カプセル化リクエスト

ここに画像の説明を挿入

TSの研究もあります。

API がわからない場合は、型定義をクリックしてください。

ここに画像の説明を挿入

このようなことが分からない場合は、クリックして一つずつクリックしてください。

ここに画像の説明を挿入

この集中講義で、ジェネリック医薬品の使い方をゆっくりと理解できるようになります。

react+ts を使用したシンプルな jira プロジェクトの実装に関するこの記事はこれで終わりです。さらに関連性の高い react+ts jira プロジェクトのコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • React は recharts を使用して散布図のサンプル コードを実装します
  • Node を使用して reactSSR サーバーサイド レンダリング アーキテクチャを構築する
  • ReactのsetStateコールバック関数の詳細な説明
  • React の状態と setState の使用に関する学習ノート
  • React コンポーネントで Echarts を使用するためのサンプルコード
  • React Native は Baidu Echarts を使用してチャートを表示するサンプル コード

<<:  Linuxファイアウォールiptablesの詳細な紹介、設定方法と事例

>>:  MySQL 5.7.24 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

推薦する

Docker でコンテナのポート マッピングを動的に変更する方法

前書き: Docker のポート マッピングは、多くの場合、Docker Run コマンド中に -p...

MySQL 5.7.18 winx64 のインストールと設定方法のグラフィックチュートリアル

圧縮パッケージのインストールは、mysql-5.7 以降、大幅に変更されました。この記事では、mys...

LinuxにMySQLデータベース5.6のソースコードをインストールし、ログインユーザーのパスワードを変更する

この記事では、主に Linux で MYSQL データベースをインストールする方法について説明し、M...

MySQL内部一時テーブルの具体的な使用法

目次連合テーブルの初期化ステートメントの実行連合の結果ユニオンオールグループ化十分なメモリステートメ...

純粋な CSS でマークダウンの自動番号付けを実装するサンプル コード

問題の起源私がタイトルの番号付けの問題に初めて注目したのは、学部の論文を書いていた頃まで遡ります。当...

react-virtualized を使用して、動的な高さを持つ画像の長いリストを実装する

目次開発中に発生した問題解決具体的な実装実績まとめバーチャルリストは、スクロールコンテナ要素の表示領...

MySQL のロードバランサーとして nginx を使用する方法

注意: nginxのバージョンは1.9以上である必要があります。nginxをコンパイルするときに、-...

MySQL 8.0 再帰クエリの簡単な使用例

序文この記事では、MySQL 8.0 の新機能を使用して再帰クエリを実装します。詳細なサンプル コー...

JQuery を放棄すべきでしょうか?

目次序文jQuery 以外の場合は何を使うのでしょうか? DOMとイベントAJAX リクエスト要約す...

マークアップ言語 - CSS レイアウト

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

Windows 10 無料インストール版の MySQL インストールと設定のチュートリアル

ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージョンと一致し...

Linux NFSメカニズムの動作原理と例の分析

NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...

Centos7.5 は mysql5.7.24 バイナリ パッケージの展開をインストールします

1. 環境整備:オペレーティング システム: CentOS Linux リリース 7.5.1804 ...

MySQL 最適化の概要 - クエリエントリの合計数

1. COUNT(*) と COUNT(COL) COUNT(*)は通常、主キーに対してインデックス...