React にはコンポーネント ライブラリがあります。コンポーネント ライブラリは、コンポーネントをまとめて多次元の組み合わせを通じて構築する設計計画です。コンポーネントの設計は、関数と視覚的表現の要素の分解、誘導、再編成を通じて行われ、再利用可能な目的は、標準化されたコンポーネントを形成することです。反応に一般的に使用されるコンポーネント ライブラリには、Bulma、AntDesign、Bootstrap などが含まれます。
このチュートリアルの動作環境: Windows 10 システム、React バージョン 17.0.1、Dell G3 コンピューター。
コンポーネント設計とは、機能やビジュアル表現の要素を分解・要約・再構成し、再利用の目的に基づいて標準化されたコンポーネントを形成し、それらのコンポーネントを多次元的に組み合わせて全体の設計計画を構築するものです。が形成されます。
一般的に使用される反応コンポーネント ライブラリ:
アリのデザイン
プロジェクトリンク: Ant Design
バンドル サイズ (BundlePhobia より): 縮小後 1.2mB、縮小後 + gzip 圧縮後 349.2kB、ツリーシェイクによってサイズを縮小。
アドバンテージ：
AntDesign には広範なサポート ドキュメントが付属しており、既製のテンプレートを含む別のプロジェクト (AntDesignPro) を含むコミュニティがあります。
バックエンド/内部アプリケーションを迅速に設計するために使用できる UI ライブラリ。
欠点:
アクセシビリティの欠如。
サイズが大きいため、パフォーマンスに大きな影響を与えることが予想されます。
CSS を汚染します (非 Ant コンポーネントのスタイルが設定されないようにするために ! important を追加する必要があります)。
ブートストラップ
実際、私は主に Bootstrap を UI ライブラリとして考えています。デザイン賞を受賞することはできませんが、いくつかの最先端のプロジェクトや最低限の実用的な製品を完成させるために使用できます。
しかし、それはあなたがそれを何に使いたいかによって異なります。 React を初めて使用する場合は、始めるのに最適なライブラリです。経験豊富な開発者は、styled-components/Emotion を検討するかもしれません。
Bootstrap 用の React バインディングを備えた人気のあるライブラリが 2 つありますが、私は個人的に Reactstrap のみを使用します。
プロジェクトリンク: React Bootstrap
バンドル サイズ (BundlePhobia より): 縮小後 111kB、縮小後 + gzip 34.4kB、ツリーシェイキングによりサイズを縮小
プロジェクトリンク: Reactstrap
バンドル サイズ (BundlePhobia より): 縮小後 152.1kB、縮小後 + gzip 圧縮後 39.4kB、ツリーシェイキングによりサイズを縮小
アドバンテージ：
誰もが愛する React バインディングを備えた Bootstrap ライブラリ。
CSS-in-JS を介して簡単にカスタマイズ可能。
十分に長く存在しているため、バグや問題について心配する必要はありません。
すぐに始めましょう。
React で完全に再実装されているため、jQuery への依存関係はありません。
欠点:
これがブートストラップです。カスタマイズしないと、サイトは他のサイトと同じように見えます。
ブルマ
Bulma は純粋な CSS フレームワークであり、JS を必要としないため、この記事で紹介する他のライブラリとは異なります。 Bulma のクラスを直接使用するか、react-bulma-components などのラッパー ライブラリを使用するかを選択できます。
プロジェクトリンク: ブルマ
プロジェクトリンク: 反応-bulma-components
バンドル サイズ (BundlePhobia より): 179kB 縮小、20.1kB 縮小 + gzip 圧縮
アドバンテージ：
Web サイトが Bootstrap のように見えるわけではありません。
素早く立ち上がって実行するのに最適です。
最新の機能 (基礎となる Flexbox/Grid)。
欠点:
アクセシビリティ: WCAG ガイドラインに準拠しているライブラリはいくつかありますが、他のライブラリほど厳密ではありません。
チャクラUI
プロジェクトリンク: ChakraUI
パッケージサイズ (BundlePhobia より): 縮小後 326.2kB、縮小 + gzip 圧縮後 101.2kB、ツリーシェイキングによりサイズを縮小
アドバンテージ：
アクセシビリティ: WAI-ARIA ガイドラインに従って、コンポーネントは aria タグを使用します。
Discordサーバーを利用しています。
カスタマイズが簡単 (テーマのサポートあり)。
高度にモジュール化されているため、ツリーシェイクによって実際に使用しないコードが削除されます。
欠点:
かなり新しいですね。
知らせ：
v1 に非常に近いため、v0.8.0 以降の重大な変更に注意してください。
マテリアルUI
MaterialUI は、好き嫌いが分かれる私のライブラリの 1 つです。私はこれまで、非常にストレスのかかるプロジェクトの締め切りを乗り越えるのに役立ちましたが、最終的にはいつもできるだけ早く終わらせることができました。
以前は、JSS を記述することによってのみ、MaterialUI のスタイルをカスタマイズできましたが、ありがたいことに、styled-components と Emotion を使用してスタイルをオーバーライドできるようになりました。
プロジェクトリンク: マテリアル UI
バンドル サイズ (BundlePhobia より): 325.7kB 縮小、92kB 縮小 + gizp 圧縮、ツリーシェイキングにより縮小
アドバンテージ：
完全なドキュメント
アイコンライブラリは膨大です
シンプルで使いやすい（冒頭の状態）
欠点:
カスタマイズは難しくて面倒ですが、（ビジュアルを改善するために）必要です。
パフォーマンス: レンダリングされる DOM ノードが多すぎます。
アプリは Google 製品のように見えます (一部の人にとって、これはプロフェッショナルな外観を表す場合があります)。
セマンティックUI
プロジェクトリンク: セマンティック UI
セマンティック UI 反応
パッケージサイズ (BundlePhobia より): 縮小後 300.8kB、縮小 + gzip 圧縮後 80.9kB、ツリーシェイキングによりサイズを縮小。
アドバンテージ：
コンポーザブル (プロップとして使用してコンポーネントを渡す)
カスタマイズが簡単
役立つドキュメント
ユーザーはよく知られています (Netflix によって内部的に使用され、Amazon によってリリースされた製品によって使用されます)
TypeScript のサポート
欠点:
オープンソース プロジェクトの潜在的な不確実性。
問題を表示:
https://github.com/Semantic-Org/Semantic-UI/issues/6109
https://github.com/Semantic-Org/Semantic-UI/issues/6413
コミュニティ運営のフォーク:
https://github.com/fomantic/Fomantic-UI
佳作
リーチUI
ReachUI は、開発者がアクセス可能な React コンポーネントを設計システムに構築できるようにする低レベルのコンポーネント ライブラリです。
各コンポーネントは独自の npm パッケージとして個別にエクスポートされるため、使用可能なパッケージ サイズはありません。
リアキット
Reakit も低レベルのコンポーネント ライブラリです。技術的には UI ライブラリですが、CSS は付属していません。したがって、スタイリングソリューションを見つける必要があります。
パッケージサイズ (BundlePhobia より): 縮小後 119.9kB、縮小後 + gzip 圧縮後 32.1kB、ツリーシェイキングによりサイズを縮小。
リバス
私はしばらくRebassをフォローしています。これは強力なコンポーネント ライブラリであり、テーマは付属していませんが、テーマを簡単に変更できます。実際の動作例については、デモを参照してください。
プロジェクトリンク: Rebass
バンドル サイズ (BundlePhobia より): 縮小後 43kB、縮小後 14.4kB + gizp 圧縮、ツリーシェイクによってサイズを縮小。