React にはコンポーネント ライブラリがありますか?

react にはコンポーネント ライブラリがあります。コンポーネント ライブラリは、コンポーネントをまとめて多次元の組み合わせを通じて構築する設計計画です。コンポーネントの設計は、関数や視覚的表現における要素の分解、誘導、再編成を通じて行われます。 React でよく使われるコンポーネント ライブラリには、Bulma、AntDesign、Bootstrap などが含まれます。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

reactにはコンポーネントライブラリがあります

コンポーネント設計とは、機能や視覚表現などの要素を分解・要約・再構成し、再利用可能にすることを目的として標準化されたコンポーネントを形成することです。組み合わせを使用して設計計画全体を構築し、これらのコンポーネントをまとめてコンポーネント ライブラリを形成します。

一般的に使用される反応コンポーネント ライブラリ:

Ant Design

• プロジェクト リンク: Ant Design

• バンドル サイズ (BundlePhobia より): 縮小後 1.2mB、gzip 圧縮後 349.2kB、ツリー シェイキングにより減少。

長所:

• AntDesign には広範なサポート ドキュメントが付属しており、既製のテンプレートを含むコミュニティもあります。別のプロジェクト (AntDesignPro);

• を使用して、バックエンド/内部アプリケーションの UI ライブラリを迅速に設計できます。

短所:

• アクセシビリティの欠如;

• サイズが大きいパフォーマンスに大きな影響を与えることが予想されます;

• は CSS を汚染します (非 Ant コンポーネントのスタイルを設定しないようにするために ! important を追加する必要があります)。

Bootstrap

実際、私は Bootstrap を主に UI ライブラリとして捉えています。デザイン賞を受賞することはできませんが、いくつかの最先端のプロジェクトや最低限の実用的な製品を完成させるために使用できます。

ただし、それは何に使いたいかによって異なります。 React を初めて使用する場合は、始めるのに最適なライブラリです。より経験豊富な開発者の場合は、styled-components / Emotion を検討するかもしれません。

Bootstrap 用の React バインディングを備えた人気のあるライブラリが 2 つありますが、私は個人的に Reactstrap のみを使用します。

• プロジェクトリンク: React Bootstrap

  • バンドルサイズ (BundlePhobia より): ツリーシェイクによる縮小後 111kB、gzip 圧縮後 34.4kBサイズ

• プロジェクトリンク: Reactstrap

  • バンドルサイズ (BundlePhobia より): 縮小後 152.1kB、縮小後 39.4kB gzip 圧縮、ツリーを振ることでサイズを削減

##利点:

• がある誰もが愛する React バインディングを備えた Bootstrap ライブラリ;

• CSS-in-JS 経由で簡単にカスタマイズ可能;

• すでに人気があり、十分長く存在していますそのため、バグや問題について心配する必要はありません。

• すぐに始めましょう。

• #すでに React に完全に再実装されているため、jQuery の依存関係はありません。 。

欠点:

• これはブートストラップです。カスタマイズしないと、サイトの見た目が異なります。その他 ウェブサイトも同様です。

Bulma

Bulma は純粋な CSS フレームワークであり、JS を必要としないため、この記事で紹介されている他のライブラリとは異なります。 。 Bulma のクラスを直接使用するか、react-bulma-components などのラッパー ライブラリを使用するかを選択できます。

• プロジェクト リンク: Bulma

• プロジェクト リンク:react-bulma-components
  • パッケージ サイズ(BundlePhobia より): 179kB 縮小、20.1kB 縮小 gzip 圧縮

## 長所:

Web サイトを Bootstrap のように見せることはありません;
素早い起動と操作に適しています;
最新の機能 (最下層は Flexbox/グリッド）。

短所:

アクセシビリティ: WCAG ガイドラインに準拠するための他のライブラリほど厳密ではありませんが、いくつかの点はあります。 。

• #Chakra 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 縮小、gizp 圧縮 92kB、ツリーシェイキングにより縮小 ボリューム

利点:

• 完全なドキュメント

• アイコン ライブラリが非常に大きい

• #使いやすい (最初は)

#欠点:

カスタマイズは難しくて面倒ですが、必要です (視覚効果を向上させるため);
パフォーマンス: レンダリングされる DOM ノードが多すぎます;
アプリは Google 製品のように見えます (一部の人にとって、これはプロフェッショナルな外観を表す場合があります)。

• #セマンティック UI

## プロジェクト リンク: セマンティック UI

• #Semantic-UI-React

• バンドル サイズ (BundlePhobia より): 縮小後 300.8kB、gzip 圧縮後 80.9kB、ツリー シェイクによってサイズを縮小します。

  利点:

##組み合わせ可能 (コンポーネントを渡す小道具として使用)

カスタマイズが簡単

• #ドキュメントが使いやすい

• ##有名なユーザー (Netflix によって内部的に使用され、公開されています) by 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

• #佳作

  Reach UI

  ReachUI は、開発者がアクセス可能な React コンポーネントを設計システムに構築できるようにする低レベルのコンポーネント ライブラリです。

  • 各コンポーネントは独自の npm パッケージとして個別にエクスポートされるため、使用可能なパッケージ サイズはありません。

  Reakit
Reakit は、もう 1 つの低レベル コンポーネント ライブラリです。技術的には UI ライブラリですが、CSS は付属していません。したがって、スタイリングソリューションを見つける必要があります。

バンドル サイズ (BundlePhobia より): 119.9kB 縮小、32.1kB gzip 圧縮、ツリーシェイキングにより縮小。

Rebass

私はしばらく Rebass をフォローしています。これは強力なコンポーネント ライブラリであり、テーマは付属していませんが、テーマを簡単に変更できます。実際の動作例については、デモを参照してください。

• プロジェクトリンク: Rebass

パッケージサイズ (BundlePhobia より): 縮小後 43kB、gizp 圧縮 14.4kB、ツリーシェイキングによりサイズを縮小。

[関連する推奨事項:

JavaScript ビデオ チュートリアル

、
• Web フロントエンド

  ]

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