React はどの UI コンポーネント ライブラリを使用しますか?

React で利用できる UI コンポーネント ライブラリは次のとおりです: 1. マテリアル UI (レイアウト、フォーム、ナビゲーション、データ表示、その他多くのウィジェットのコンポーネントが含まれます); 2. Ant Design (60 を超えるコンポーネントが含まれます)予測可能な静的型付け付き; 3. 40 を超えるコンポーネントを備えたブループリント; 4. 多数の既存の Bootstrap テーマとの完全な互換性を提供する React Bootstrap; 5. タブ、サイド メニュー、スタック ナビゲーション、リスト、フォーム、他のコンポーネント。

#このチュートリアルの動作環境: Windows7 システム、react18 バージョン、Dell G3 コンピューター。

#反応コンポーネント ライブラリ

#1、マテリアル UI

Material-UI は、GitHub 上で最も人気があり、よく使用されている React コンポーネント ライブラリです。シンプルで軽量で、Google のマテリアル UI 仕様に従って構築されています。レイアウト、フォーム、ナビゲーション、データ表示、その他多くのウィジェット用のコンポーネントがあります。

@material-ui/styles を使用してコンポーネントをスタイル設定できます。これは、スタイル付きコンポーネントと同じ利点を持つ高速でスケーラブルな CSS-in-JS ソリューションです。 Material-UI は他の主要なスタイリング ソリューションとも相互運用できるため、そのスタイルを使用する必要はありません。

2. Ant Design

Ant Design は、大企業の Web アプリケーション向けに設計された React ライブラリを提供する中国の会社です。例としては、テンセント、アリババ、バイドゥなどが挙げられます。このライブラリには、予測可能な静的型付けを備えた TypeScript で記述された 60 を超えるコンポーネントが含まれています。中国語と英語のドキュメントは簡潔でエレガントに書かれており、内容が包括的です。

しかし、Ant Design は単なる React UI ライブラリではありません。それは、成長、意味、確実性、そして自然という価値観を中心に構築されたデザインシステム全体です。 Figma UI キット、ランディング ページ テンプレート、Sketch プラグインなどのリソースをチェックしてください。これは、私たちの頼りになる React コンポーネント ライブラリです。

3. ブループリント

#一般的に使用される React コンポーネント ライブラリとして、Blueprint は豊富で人気のあるコンポーネントを提供します。 Blueprint は、アメリカのビッグデータ分析技術企業 Palantir が開発した React UI ライブラリです。同社の React ライブラリには 40 を超えるコンポーネントがあり、特にデスクトップ アプリケーション用の複雑なデータ集約型インターフェイス向けに最適化されています。

ブループリントは、ドキュメント内のすべてのコード例と同様に、TypeScript で書かれています。このライブラリは、Chrome、Firefox、Safari、IE 11、および Microsoft Edge をサポートしています。 CSS flex レイアウトがサポートされていないため、IE10 以下はサポートされていません。

4. React Bootstrap

React Bootstrap は、Bootstrap JavaScript の代替として機能します。各コンポーネントは真の React コンポーネントとして構築されているため、jQuery に依存する必要はありません。 React Bootstrap は最も古い React ライブラリの 1 つであり、React 自体とともに着実に成長しています。Bootstrap を使用している古いユーザーが多数いるため、React Bootstrap はより一般的に使用される React コンポーネント ライブラリでもあります。

Bootstrap のグリッド システムは、レイアウトに完全に応答性の高い一連のコンテナ、行、列が含まれることを意味します。バッジ、カルーセル、トースト、ジャンボトロンなど、数十のコンポーネントから選択できます。

これは、多数の既存の Bootstrap テーマとの完全な互換性を提供するだけでなく、テーマごとに総合的な機能を備えたコンポーネントの長いリストを提供します。 React Bootstrap は状態を仮想 DOM に更新します。これは、Bootstrap の機能を React の仮想 DOM に統合することにより、より安定した開発ソリューションになります。

5、Onsen UI

Onsen UI は、HTML5 およびモバイル Web アプリケーションを構築するために設計された、一般的に使用される Reac コンポーネント ライブラリです。そのコンポーネントには、タブ、サイド メニュー、スタック ナビゲーション、リスト、フォームなどが含まれます。すべてのコンポーネントは iOS および Android のマテリアル デザインをサポートし、プラットフォームに基づいてアプリの外観を自動的に変更します。

内部的には、Onsen は 3 つのレイヤーで構成されています。cssnext で書かれた CSS コンポーネント、ネイティブ JavaScript で書かれた Web コンポーネント、React と簡単に統合できるフレームワーク バインディング、Vue と Angular です。

6. グロメット

##グロメットは、応答性が高く、アクセスしやすく、モバイルファーストの Web プロジェクト用に設計されたコンポーネント ライブラリです。アトミックな設計手法が組み込まれており、キーボード ナビゲーション、スクリーン リーダーのタブなどが可能になります。 SVG アイコンのリストもあります。

Netflix、Uber、Boeing、HP、Samsung、Twilio などの多くの大企業は、Grommet を使用して Web アプリケーションを設計しています。デザインの「ぎこちなさ」を軽減したい場合は、グロメットのコンポーネントをチェックしてください。 、非常に見栄えの良いコンポーネントを備えた、優れた一般的に使用される React コンポーネント ライブラリです。

7、ゲシュタルト

Gestalt は、Pinterest のデザイン言語を強化する React UI コンポーネントのセットです。その目的は、設計のベスト プラクティスの共有ライブラリを作成することです。このライブラリは、右から左への記述、国際化、ダーク モードをサポートしています。

Gestalt は、クロスプラットフォームで実行される自動設計とコード更新により、メンテナンスの負担が比較的少なくなります。リリースによって使用法や入力に重大な変更が生じた場合、アップグレード プロセスを簡素化する codemod が提供されます。

8. Semantic UI React

React は、公式の Semantic UI プラグインです。これは jQuery に依存せず、宣言型 API、簡略化された props、サブコンポーネント、拡張機能、状態の自動制御などを備えています。ライブラリには、フラグメント、プログレス バー、トランジション、ページネーションなどを含む 50 を超えるコンポーネントのコレクションがあります。

Semantic UI React はコンポーネントを提供しますが、Semantic UI は CSS スタイル シートの形式でテーマを提供します。 の代わりに を使用することもできます。私は Semantic UI を好み、使用経験も多少あります。Semantic UI React も使用されますas 比較的よく使われる React コンポーネント ライブラリです。

9、Rebass

Rebass は、Brent Jackson システム構築によってスタイル化された、オリジナルのコンポーネント ライブラリであり、一般的に使用される React コンポーネント ライブラリです。 。設計上の制約とユーザー定義のスケールを備えた一貫した UI を作成するように構築されています。 Rebass のフットプリントはわずか 4KB なので、設計と開発が迅速に行えます。

Rebass は、最上級のテーマのサポートとテーマ UI との互換性を通じて、最小限で便利、制約がなく、拡張可能でテーマ対応を実現したいと考えています。

10. React Virtualized

#React Virtualized は、独自の React コンポーネント ライブラリ内の UI の特定の側面に焦点を当てており、ほとんどの場合、テーブルのレンダリングがかなり簡単になります。 React Virtualized を使用すると、Web 開発者はリスト、テーブル、グリッド、コレクションなどのコンポーネントを使用して大量のデータを簡単にレンダリングできます。これを使用して、よりユーザーフレンドリーなテーブルを作成できます。 React Virtualized には、セットアップするための一連の完全な手順がすでに用意されています。

11. Blueprint UI React

Blueprint UI React コンポーネント フレームワークは、すべての新しいデータ集約型デスクトップおよび Web アプリケーションと同じ UI 開発パスです。これは、デスクトップ アプリケーション用の複雑なデータ集約型インターフェイスを作成するために設計された React ベースの UI ツールキットです。これは、すべてのコンポーネントにすぐに使える使いやすさの標準を提供し、ライト テーマ モードとダーク テーマ モードへのアクセスを提供することを目的とした優れた UI パッケージです。

12. React Toolbox

React Toolbox は、Google マテリアル デザインの要件を実装する一連の React コンポーネントです。これは、CSS モジュール (SASS で書かれた)、Webpack、ES6 などの最も一般的な提案のいくつかに基づいています。このライブラリは Web パッケージのワークフローと緊密に統合されており、完全に構成可能で多用途です。

ボタン、カード、日付ピッカー、ダイアログ、その他の一般的な要素など、多くのコンポーネントが提供されます。 Web 開発者が素晴らしい Web アプリケーションを構築できるようにするこのライブラリには、包括的なドキュメントも含まれています。

[関連する推奨事項: Redis ビデオ チュートリアル ]

以上がReact はどの UI コンポーネント ライブラリを使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。