20+ Best React UI Component Libraries / Frameworks for 2020

Best React UIコンポーネントライブラリ/フレームワーク


このリソースでは、Webで利用できる最高のReact UIコンポーネントライブラリとフレームワークを調べています。でもまず:

Reactとは?

ReactはオープンソースのJavaScriptライブラリで、ウェブアプリとモバイルアプリの両方のトップインターフェースを構築するのに役立ちます。他のJavaScriptフレームワークやライブラリと簡単に組み合わせることができ、コンポーネントと呼ばれる小さなスタンドアロンのコードが含まれています。このリソースで注目されるのはこれらのコンポーネントです.

コンポーネントの良いところは、アプリ固有の依存関係があまりなく、モジュール式であることです。これは、コンポーネントを再利用して素晴らしいアプリやインターフェースを超高速で構築できることを意味します。そしておかげで ビット, 他のReactマニアと共有することもできます.

Reactで次のプロジェクトを開始する前に、数分かけて、見栄えの良いUIを作成するのに役立つ、最高のReact UIコンポーネントライブラリのリストをスキャンしてください。.

2020年のベストReact UIコンポーネントライブラリとフレームワーク

Material Kit React

React UIコンポーネントライブラリ:Material Kit React

Googleのマテリアルデザインからインスピレーションを得て作成されたMaterial Kit Reactは、一貫性を主な特徴とする一連の要素を構築します。こうすることで、Webプロジェクトは外観と機能の類似性を維持し、.

一般的なレイアウトは、複数の用紙に似ています。これにより、レイアウトに奥行きと順序が与えられます。 3つのサンプルページが含まれています。これらのページは、このキットで何ができるかを示しているだけでなく、テキストや画像を独自のもので置き換えることができるテンプレートとしても機能します.

キットには、ボタン、バッジ、スライダー、メニュー、ページネーション、ナビゲーションバー、タブ、ピルなどの基本的な要素もいくつか含まれています。ほとんどの要素のスタイル、サイズ、色をカスタマイズできます。 JavaScript要素には、モーダル、ツールチップ、日時ピッカー、カルーセル、ポップオーバーが含まれます。キットを使用して新しいプロジェクトを開始するだけでなく、古いBootstrapプロジェクトのスタイルを変更することもできます。 Material Kit React プロ版 より多くのコンポーネント、セクション、サンプルページが含まれています.

ReactのAntデザイン

ReactのAntデザイン

このReact UIライブラリは、エンタープライズレベルの製品の設計システムです。それはに基づいています アリのデザイン プロジェクトには、リッチでインタラクティブなUIを構築するための高品質のコンポーネントとデモのセットが含まれています。コンポーネントには、数十の言語の国際化サポートが含まれています.

あなたはまた、 コンポーネントをカスタマイズする あなた自身の設計仕様に。 Ant Designは、スタイル言語にLess.jsを使用しています。アリのデザイン コンポーネント ボタン、アイコン、グリッド、ブレッドクラム、ドロップダウンメニュー、ページネーションなどが含まれます.

プロジェクトには60k近くの星があります GitHubで, 開発者の間で非常に人気があります.

React Admin

React UIコンポーネントライブラリ:React Admin

このライブラリは、REST / GraphQL APIの上に企業間(B2B)管理アプリケーションを構築するのに適しており、設計によってカスタマイズ可能です。 Reactに加えて、Material UI、React Router、Redux、React Final Formなどのよく知られたプロジェクトで構築されています。後者は一般的なフォーム状態管理ソリューションです.

無料版に加えて そのコンポーネント, エンタープライズソリューションもあります。エンタープライズソリューションには、Marmelab(作成者)によるプロサポートとプライベートモジュールへのアクセスが含まれます.

React Adminは約12kの星を誇ります GitHubで, そして積極的に維持されます.

破片が反応する

React UIコンポーネントライブラリ:シャード

Shards Reactは、オープンソースの最新のReact UIキットであり、ゼロから構築され、高速パフォーマンスを目指しています。モダンなデザインシステムでは、多くのことを変更できます。さらに、ソースファイルをダウンロードして、コードレベルで変更することもできます。スタイリングに使用されるSCSSは、開発者エクスペリエンスを向上させるだけです.

このライブラリは 破片, と用途 React Datepicker反応ポッパー (位置決めエンジン)および noUIShlider. MaterialとFontawesomeのアイコンをサポートしています。の シャードプロ パッケージには、始めるのに役立つ15の既成ページがあります。これらのページは、移動できるブロックを使用しています。.

〜270個の星をつけて GitHub, また、範囲スライダーやトグル入力など、数十のカスタムReactコンポーネントも含まれています。 350以上のコンポーネントにより、Shards ReactでほぼすべてのタイプのWebサイトを構築できます.

Material-UI

React UIコンポーネントライブラリとフレームワーク-Material UI

なんと55Kの星が GitHub, Material-UIは、最も人気のあるReact UIコンポーネントライブラリの1つです。コンポーネントはReactに依存していますが、Googleのマテリアルデザインを使用しています。記入が必要な方のために、マテリアルデザインは実際のUI要素を最小限に保ちながら、物理的な世界とテクスチャからインスピレーションを得ています.

アプリバー、オートコンプリート、バッジ、ボタン、カード、ダイアログボックス、アイコン、メニュー、スライダーなど、さまざまな便利なコンポーネントを利用できます。 Material-UIにはReactテーマとテンプレートも用意されているため、アプリにカスタムカラーテーマを設定できます。.

Reactブートストラップ

反応ブートストラップ

次に、React UIコンポーネントライブラリのリストは、Bootstrapコアを保持するUIキットであるReact Bootstrapです。各コンポーネントのフォームと機能をより細かく制御できるようにするために、BootstrapのJavaScriptがReactに置き換えられています。各コンポーネントは、簡単にアクセスできるように構築されており、フロントエンドフレームワークの構築に重要です.

また、React BootstrapはBootstrapの起源から大きく逸脱していないため、開発者はすぐに利用できる数千のBootstrapテーマから選択できます。 14500以上のスターを獲得しています GitHub.

仮想化に対応

反応仮想化

データ量の多いフロントエンドを構築していますか? React Virtualizedは、使いこなす必要のあるライブラリかもしれません。大きなリスト、テーブル、グリッドを効率的にレンダリングするための多数のコンポーネントが含まれています。たとえば、石材、列、オートサイザー、方向ソーター、ウィンドウスクローラーなどがあります。さらに、行の高さを設定してテーブルをカスタマイズし、セルにプレースホルダーを表示できます.

また、React Virtualizedにはほとんど依存関係がなく、iOSおよびAndroid向けの最近のモバイルブラウザーを含む標準ブラウザーをサポートしています。 18,000以上の星があります GitHub.

Argon Design System React

React UIコンポーネントライブラリ:Argon Design System React

このライブラリは、Bootstrap 4、React、およびReactstrapの無料の設計システムを提供します。完全に機能するコードに実装された100のモダンでゴージャスな要素が付属しているため、簡単にページから実際のWebサイトに切り替えることができます.

アルゴンデザインシステムは 事前に作成されたサンプルページ 色、スタイル、ホバー、フォーカスなど、すべてのコンポーネントのいくつかのバリエーション.

でこっそりのぞく コンポーネントのセット全体, 基本的な要素、タイポグラフィ、ナビゲーションバー、アラート、画像、アイコン、JavaScriptコンポーネントなどを備えています.

ブループリント

ブループリント

ブループリントのReactコンポーネントは、主にデスクトップアプリケーションで使用するためのものです。これらのコンポーネントは、複雑でデータ密度の高いインターフェースの構築に特に適しています。コンポーネントライブラリから、アイコンの生成と表示、日付と時刻の操作、タイムゾーンの選択などのコードを取得できます。.

このコンポーネントライブラリには他に何がありますか?ブレッドクラム、ボタン、コールアウト、カード、ディバイダー、ナビゲーションバー、タブ、タグなど、本当にたくさんあります。オン GitHub, それは15,000以上の星で計時します.

これらの記事にも興味があるかもしれません:

  • アプリ開発用の無料のReactネイティブテンプレート
  • 最高のAngular管理ダッシュボードテンプレート

セマンティックUI React

React UIコンポーネントライブラリ:semantic-ui

セマンティックUIは、開発フレームワークに人間に優しいHTMLを使用し、React、Angular、Meteor、Ember、およびその他の多くのフレームワークと統合されています。すべてのjQuery機能がReactに再実装されました.

Semantic UI Reactアプリの上に任意のSemantic UI CSSテーマをロードできます。さらに、マークアップに完全にアクセスできるため、コンポーネントを柔軟にカスタマイズできます。スターカウントです GitHub 11,000以上.

React Toolbox

反応ツールボックス

プロジェクトにGoogleのマテリアルデザインの原則を実装するために使用できるもう1つのReact UIコンポーネントライブラリは、React Toolboxです。 React Toolboxは CSSモジュール この目的のために。任意のモジュールバンドラーを使用できますが、それは ウェブパック ワークフロー。思慮深く、React Toolboxのチームは、リアルタイムでコンポーネントを試すことができるブラウザー内エディターを訪問者に提供します.

React Toolboxでの作業中に、コンポーネントをバンドルでインポートするか、生のコンポーネントでインポートするかを選択できます。違いは、前者の場合、コンポーネントには必要な依存関係とテーマがすべて組み込まれていることです。つまり、各依存関係のCSSは、最終的なCSSで自動的に使用可能になります。逆に、生のコンポーネントでは、CSSは含まれていません。つまり、適切にスタイルを設定するには、プロパティを介してテーマをコンポーネントに提供する必要があります。 React Toolboxは8,000以上の星にあります GitHub.

Reactデスクトップ

React UIコンポーネントライブラリ:react-desktop

次のコンポーネントライブラリであるReact Desktopは、ネイティブデスクトップエクスペリエンスをWebにもたらすことを目的として、macOS、SierraおよびWindows 10コンポーネントを使用します.

このコレクションは、上に構築されたJavaScriptライブラリです。 Facebookの反応 ライブラリであり、JavaScriptベースのプロジェクトと互換性があります。このツールは、8,000の星評価を超えます。 GitHub.

温泉UI

温泉ui

クロスプラットフォームモバイルアプリの作成に興味がある場合は、React UIコンポーネントライブラリのリストにあるこの製品に興味があります。 Onsen UIは、HTML5とJavaScriptを使用し、Angular、Vue.js、Reactとの統合を提供するモバイルアプリ開発フレームワークです。すべてのコンポーネントはプラットフォームに基づいて自動スタイル設定されるため、同じソースコードを使用してiOSとAndroidの両方をサポートします.

Onsen UIは、多くの一般的なReactフレームワークと互換性があります。インタラクティブなチュートリアルは、このツールを使い始めるのに役立ちます。コンポーネントライブラリは、JavaScript動作のない純粋なCSSを採用しています。追加の詳細については、カスタム要素が役立ちます。スターは数える GitHub 7,800を超える.

エバーグリーン

React UIコンポーネントライブラリ:エバーグリーン

Evergreenには、エンタープライズグレードのWebアプリケーションに適した一連のReactコンポーネントが含まれています。使っているので React Primitive, 非常に柔軟性があります。同時に、箱から出してすぐに同じように簡単に機能します.

基本的なレイアウト、タイポグラフィ、色、アイコンから、ドロップダウン、トグル、ファイルアップロード、フィードバックインジケーターなどの機能ベースのコンポーネントまで、幅広いコンポーネントとツールが含まれています。 Evergreenパッケージをインストールした後、インポートするコンポーネントを選択できます。現在、9,000以上の星があります GitHub.

反応ストラップ

反応ストラップ

単純なReact Bootstrap 4コンポーネントについては、Reactstrapをチェックしてください。 2つの主要なディストリビューションバージョンが付属しています。 1つは、オプションの依存関係を除外する基本バージョンです。これにより、必要な依存関係をより柔軟に構成できます.

2番目のバージョンは、すべてのオプションの依存関係を含むフルバージョンです。これは小さなアプリケーションに推奨されます。 Reactstrapは、React UIコンポーネントライブラリのさらに別のコレクションで、8,700の星印を横切っています。 GitHub.

リベース

React UIコンポーネントライブラリ:リベース

Rebassには8つの基本コンポーネントのみが含まれており、すべて超小型のファイルに収められています。コンポーネントは拡張可能でテーマ化可能であり、レスポンシブWebデザイン用に構築されています.

コンポーネントはスタイル付きシステムを使用し、アプリのカスタムUIコンポーネントに拡張するための優れた出発点として機能します。 ThemeProviderもこれに役立ちます。スターは数える GitHub 6,000以上.

グロメット

グロメット

グロメットのキットには幅広いコンポーネントのライブラリがあり、Netflixやボーイングなどの有名企業をユーザーに数えています。アプリがスマートフォン向けかワイドスクリーンディスプレイ向けかを問わず、レイアウトを設計できます。アクセシビリティはキーボードまたはスクリーンリーダーを介して行われます.

テーマツールは、色、タイプ、レイアウトのカスタマイズに役立ちます。このReact UIコンポーネントライブラリは、スター数が6,000を超えています GitHub.

Elemental UI

React UIコンポーネントライブラリ:elemental-ui

Elemental UIは、デフォルトのスタイルかテーマ設定後かを問わず、スタンドアロンで、または任意の組み合わせで使用できる基本的な機能コンポーネントを数多く提供します。一部のコンポーネントには、フォーム、ボタン、カード、モーダルが含まれます.

プロジェクトは開発中ですが、4,000以上のスター数を管理しています GitHub.

Reactスイート

rsuite

React Suiteには、エンタープライズシステム製品用のさまざまなコンポーネントライブラリが含まれています。すべての主要なブラウザーとプラットフォーム、およびサーバー側のレンダリングをサポートしています.

少ない開発で家にいる場合は、コンポーネントをカスタマイズしても問題は発生しません。このライブラリのコンポーネントには、アイコン、ローダー、ディバイダー、ツールチップなどが含まれており、React Suiteには4,000近くの星があります。 GitHub.

ベル

ベル

最も興味深いReact UIコンポーネントライブラリの中で、Belleは本当に幅広いコンポーネントを提供しています。これらのコンポーネントを2つのレベルでカスタマイズできます。すべてのコンポーネントの基本レベルと、各コンポーネントを個別にカスタマイズできます。.

コンポーネントには、モバイルのサポートとARIAサポートが付属しています。 Belleを使い始める方法は、最初にReactを使用してシンプルなアプリをセットアップし、次にBelleコンポーネントをインポートしてすぐに使い始めることです。このコンポーネントライブラリには、2,400以上のスターがあります GitHub.

反応md

反応md

プロジェクトにマテリアルデザインを実装する場合に検討する必要があるもう1つのReact UIコンポーネントライブラリは、react-mdです。 Sassで動作するReactコンポーネントを選択できます。この目的のために、インラインスタイリングの代わりにSassにスタイルの分離があります。これにより、既存のスタイルに合わせてコンポーネントを簡単にカスタマイズできます.

色とタイポグラフィはカスタマイズでき、詳細なドキュメントは基本を乗り越えるのに役立ちます。オン GitHub, react-mdは2,000以上の星を数えます.

PrimeReact

プライマー

このReact UIコンポーネントライブラリのリストは、PrimeReactなしでは完成しません。入力オプション、メニュー、データ表示、メッセージなど、ほぼすべての基本的なインターフェース要件をカバーするコンポーネントを提供します.

タッチ操作に最適化されたレスポンシブデザイン要素により、モバイルエクスペリエンスにも注意を向けます。フラットとマテリアルデザインのどちらかをカスタマイズして選択できるようにするテンプレートとテーマがいくつかあります。このコンポーネントライブラリには1,200以上の星があります GitHub.

剣道反応

ケンドリアクト

前述のReact UIコンポーネントライブラリとは異なり、KendoReactはプレミアムセットのコンポーネントであり、ライセンスは799ドルからです。 Microsoft、NASA、Sonyを含む印象的なクライアントリストを誇っています。そして、あなたもそれを使用して、印象的なUIを備えた高速で機能豊富なアプリを作成できます.

コンポーネントセットは、React開発用に特別に構築されています。これにより、依存関係がなくなり、すべてのコンポーネントがReact用に完全に最適化されます。さらに、既存のコンポーネントライブラリがある場合は、ライブラリ全体を書き直すことなく、KendoReactから簡単に追加できます。.

さて、これが最高のReact UIコンポーネントライブラリのリストです。ここがお気に入りのライブラリですか?

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

*この投稿にはアフィリエイトリンクが含まれています。つまり、製品リンクの1つをクリックしてから製品を購入すると、少額の手数料が発生します。心配はいりません、それでもあなたは標準額を支払うでしょう、それであなたの側で費用はありません.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map