あなたが2021年に試みるべき13驚くべき反応ライブラリ

文字通り100の偉大な反応ライブラリから選択するが、ライブラリは、あなたの反応プロジェクトのために最も必要ですか?
この記事では、5つの重要なカテゴリーであなたの反応プロジェクトに加える価値がある13の図書館を壊すつもりです.
それらのそれぞれが必要な実質的にすべての主要なツールをカバーし、プラス私たちは、2021年以降を選択する最良のものであることをカバーします.
右に飛び込みましょう!
─
─
あなたが反応プロジェクトを作成する場合は、おそらく作成反応アプリのようなツールに達する.
創造的な反応アプリは素晴らしいツールのままであり、単一のコマンドを実行することによって反応プロジェクトを作成することができますが、そこに新しい競合他社は、あなたがVITEと呼ばれる知っておくべきことです.
作成アプリケーションを開発するための我々の反応コードを構築するためにフードの下にWebpackを使用します.しかし、ビルドツールは、スピードでWebpackと競合して浮上している.
VITEはESBuildと呼ばれるより高速なバンドルを使用するそのようなビルドツールです.簡単に言えば、ブラウザのネイティブESモジュールを使用して、より迅速な開発経験をすることができます.
どのくらいより速くビーツですか?あなた自身を参照してください!
ここでは、VITEプロジェクト(右)を開始する簡単な比較は、作成反応プロジェクト(左)を作成します.
VITEは、開発時に反応を実行しているときに作成するアプリケーションよりも多くの倍高速です.
あなたはどのように長い時間を作成するアプリケーションを起動するために取ることができると、時間に悩んでいる場合は、間違いなくViteをチェックアウトします.
その上に、私は非常にツールを次のアプリを作成することをお勧めします.
これにより、非常に迅速に次のJSプロジェクトを作成することができます.はい、次.JSはフレームワークですが、依存性が大幅に少ないフレームワークです.実際には、依存関係を反応させる必要があります.
次のアプリを作成するときに次のアプリを作成し、次のアプリを作成してください.
─
基本的に任意の反応アプリケーションになると、いくつかのサーバーの状態を管理する必要があります.
これは、我々は外部サーバー(APIのような)からデータを取得しているということを意味し、我々は我々のアプリのコンポーネントを介しているローカル状態と組み合わせたアプリケーションにそのデータを持っている.
多くの開発者は、彼らのスキルレベルは、ハードの時間をどのようにローカル州とサーバーの状態を管理する方法を考え出すことができます反応します.ほとんどの開発者はソリューションとしてreduxのようなライブラリに頼る.
過去1年間で、いくつかのライブラリが非常に簡単に我々の反応コンポーネント内のサーバーの状態を管理するために出てきている.これらは反応クエリとSWRです.
彼らは私たちにいくつかの非常に有用なカスタムフックを与えることによってデータをフェッチするのに役立ちます.しかし、それらに関して最も重要であることは、彼らが彼ら自身の内部キャッシュを持っているということです.
この組み込みキャッシュは非常に簡単に我々のアプリと外部データを統合することができます.各クエリをカスタムキーに割り当てます.読み取りまたは私たちがフェッチした任意のデータを更新するには、我々はちょうどそのキーを参照する必要があります!
ここではどのように反応クエリを使用できるかの簡単な例です.APIからポストデータを取得します.その値はカスタムキー“post”に割り当てられます.
─
我々の状態管理を改善するために加えて、データをフェッチすることはとても簡単です.彼らは私たちは、リッピングクエリのようなものを行うには、ページングされたクエリ、無限のクエリを作成できるように多くの偉大なツールが含まれてはるかに.
要するに、複数のコンポーネント間であなたの反応アプリケーションのデータを取得している場合は、これらの新しいデータフェッチライブラリのいずれかを使用します.
あなたが最も深く洗練されたデータフェッチライブラリを探している場合は、反応クエリを使用してください.SWRはまた、ツールのわずかに小さいリストと一緒に素晴らしい選択です.
─
それはグローバルなアプリの状態を管理することになると、Reduxは常に選択に移動されている.
それは、開発者が別の状態値を1つの共有オブジェクト値に反応させるのを助けました.
Reduxは、しかし、いくつかの概念的な手荷物が付属しています.Reduxを正しく設定して、我々の状態を管理するために、我々は別々の行動、縮小者とセレクタを理解して、書かなければなりません.
Reduxにいくつかの新しい競合他社は、実質的にライブラリの利点のすべてを提供しようとして困難のいずれもありません.これらはライブラリZustandとJotaiです.
彼らは両方とも非常に類似しています、そして、それらについて何が強力であるかは、彼らが状態で働くためのフック最初のアプローチでつくられたということです.これは、あなたのストアを作成すると、フックとして呼び出すことにより、その値のいずれかを読み取ることができることを意味します.
シンプルなカウンターアプリケーションを作成するためのフックとしてZustand Storeを作成し、使用する方法の簡単な例です.
─
ZustandとJOTAIは、あなたがあなたの店を行動、減速者と選択者に分ける必要がないという事実のため、州管理をより単純にします.
状態を更新したい場合は、あなたのストアで関数を作成して、コンポーネントで使用します.あなたの状態のスライスを選択する場合は、あなたのストアをフックとして使用し、必要な状態オブジェクトのプロパティを取得します.それは簡単です!
さらに、あなたは非同期操作を実行するためにどんな追加ライブラリも必要としません(Redux ThunkまたはRedux Sagaを必要とするReduxとは異なり).
最後に、コンテキストツリーを使用してコンポーネントツリーをラップする必要はありませんので、基本的にはセットアップを必要とせず、お使いのストアを作成し、コンポーネントで使用する必要はありません.
一言で言えば、あなたがReduxを理解したり、州の管理により自由を望むとのトラブルを抱えている場合は、ZustandまたはJOTAIをチェックしてください.
─
反応は、印象的なユーザーインターフェイスを作成するために行われました.その結果、我々はその目的を達成するのを助けるライブラリが必要です.
コンポーネントライブラリのトンは、私たちはよく設計されたカスタマイズを与える、コンポーネントの箱から右.しかし、この多様性のすべてを選択しますか?
あなたが偉大に見えると等しく機能しているアプリケーションを構築することができる場合は、豊富な、よく設計されたライブラリをチェックアウトすることができますAntのデザイン、素材のUI、およびチャクラUIのように.
これらのライブラリのすべてのコンポーネントのトンも専用のアイコンライブラリがあります.しかし、それらに関して最も重要であることは間違いなく、彼らには、より簡単に魅力的な構成要素を造ることができる直観的な構文があるということです.
ここでは、簡単なUIをAntのデザインを構築する簡単な例です.
─
ほとんどの開発者は外観のためのコンポーネントライブラリを選択し、どのようなコンポーネントの機能が、最高のライブラリはまた、機能のための我々のアプリを作る追加のツールが含まれています.
ここでは、私たちのユーザーのクリップボードにテキストをコピーすることができますチャクラUIからそのようなカスタムフック(75457914)です.
─
私はそれらを視覚的に魅力的であることを見つけるだけでなく、これらを選択しました、しかし、彼らはまた、あなたが持っている実質的にあらゆるユースケースに合う多くの構成要素を持っています.
あなたがアプリケーションを構築する途中で一度コンポーネントライブラリを持っているときに起こる最悪のことは、それはあなたが必要とするすべてのツールを持っていない実現しています.
次のプロジェクトのコンポーネントライブラリのAntデザイン、マテリアルUIまたはチャクラUIをチェックします.または、あなたが手でスタイルを書くことに興味があるならば、情景のようなJS図書館でCSSを使ってください.
─
あなたが構築するすべての反応アプリケーションは、おそらくフォームがあります.言うまでもなく、建物の形は痛みです!
フォーム自体を作成する必要がありますが、入力検証とエラー処理のようなトリッキーなものを追加する必要があります.
あなたが2021年に使用できる最良のフォームライブラリは、フックフックフォームとformikです.
彼らのビルトインフックの助けを借りて、彼らはそれを再利用できる、機能的な形を構築することを非常に簡単にします.お互いに依存しているか、非同期の妥当性を必要とするフィールドなどの複雑な条件を持つフォームであっても.
Formekが以前に利用された伝統的なレンダリング小道具パターンを使用する必要がないという点で変化したことに注意してください.
formicでは、私たちが同じ名前のカスタムフックの助けを借りてフォームを構築することができます.
ここでは、49457914円で作られた基本的な形です.
─
これらのライブラリの一番上に必要なのは、検証ライブラリです.
FORMIKとREACHフック形式は、ライブラリのyupなどの検証ライブラリと非常に簡単に統合するためのものです.そうする方法は、彼らのドキュメンテーションで非常に簡単にレイアウトされます.
─
あなたが反応を学習し、ビデオ、チートシート、プラス特別ボーナスを含む1つの包括的なパッケージにそれをバンドルしてください.
開発者のインサイダー情報100 sはすでに反応プロになるために使用して、彼らの夢の仕事を見つけて、彼らの将来の制御を取る:
─
それが開くとき、知らせられるために、ここをクリックしてください