ホームページ ウェブフロントエンド jsチュートリアル React にはどのような UI フレームワークがありますか?

React にはどのような UI フレームワークがありますか?

Nov 25, 2020 am 10:37 AM
react ui库

React の UI フレームワークには、マテリアル-UI (React に基づく UI インターフェイス フレームワーク)、React-Bootstrap、Ant-design、Semantic-UI-React、React Desktop、Blueprint、Grommet などが含まれます。

React にはどのような UI フレームワークがありますか?

#ReactJS に適応した UI コンポーネント ライブラリ

1. マテリアル - UI

material-UI は、Google のマテリアル デザイン スタイルの UI インターフェイス フレームワークを実装するための React コンポーネント ライブラリです。これは、React の最初の UI ツールセットの 1 つでもあります。これを使用して、快適なアプリケーション インターフェイスをすばやく構築します。

英語ドキュメント: https://material-ui.com
中国語ドキュメント: http://design.1sters.com
Github: https://github.com/mui-org/ material-ui

#2、React-Bootstrap

##React-Bootstrap は再利用可能なフロントエンド コンポーネントです。図書館。 React-Bootstrap は、ReactJS に基づいて Bootstrap をカプセル化するライブラリです。

公式 Web サイト: https://react-bootstrap.github.io

中国語ドキュメント: http://react.tgwoo.com
Github: https://github.com/react- bootstrap /react-bootstrap/

3、Ant-design

## Ant-design について言及する皆さん少し前に起きた「クリスマスエッグ」事件を思い出しているのかもしれない。 Ant-design は、Alibaba チームによって作成された ReactUI コンポーネント ライブラリです。独自のデザインスタイルとコンセプトを持っています。 Alipay や Ant Financial などの多くの Alibaba プロジェクトで使用されています。コンポーネント化は非常に高品質で、箱から出してすぐに機能します。

公式 Web サイト: https://ant.design/docs/react/introduce-cn

Github: https://github.com/ant-design/ant-design/


4. Semantic-UI-React

Semantic-UI の公式 React コンポーネント

Semantic-UI-React には、Semantic-UI の便利なコンポーネントがほぼすべて含まれています。非常に優れた宣言型 API、React コンポーネントの省略形 props、および jQuery フリーを備えています。

#公式ウェブサイト: https://react.semantic-ui.com/React にはどのような UI フレームワークがありますか?

5、React Desktop

MacOS Sierra および Windows10 デスクトップ スタイル用の ReactUI コンポーネント ライブラリ。 React-Desktop は、クロスプラットフォーム デスクトップ アプリケーション用の UI コンポーネントであり、Mac OS と Windows 10 の両方で利用できる UI コンポーネントを見つけることができます。

公式 Web サイト: http://reactdesktop.js.org/docs/

Github: https://github.com/gabrielbull/react-desktop


6、ブループリント

ブループリントは、一般的に使用される要素、パターン、Web インタラクションを含む一連の ReactUI コンポーネントを提供します。デスクトップ アプリケーション用の複雑でデータ集約型の Web インターフェイスを構築するのに適しています。そのコンポーネントは TypeScript で記述され、Sass でスタイル設定されているため、高速かつ柔軟な開発プロセスが実現します。

公式ウェブサイト: https://apiblueprint.org

Github: https://github.com/gabrielbull/react-desktop


7、ファブリック

Fabric は、Office および Office 365 スタイルのスタイルを構築するための React コンポーネント ライブラリです。これは、TypeScript で書かれた公式 Office ライブラリの 1 つです。開発入門ガイド、ブログ、公式カラーやフォントなど、Office コンポーネントがすべて表示されます。

公式 Web サイト: https://fabric-chs.readthedocs.io/zh_CN/chs/

Github: https://github.com/fabric/fabric/

# # 8. Rebass

Rebass 60 個のコンポーネントが含まれており、UI ライブラリおよび UI デザイン システムです。

公式 Web サイト: https://rebassjs.org

Github: https://github.com/rebassjs/rebass

9.amaze UI (メンテナンスは終了しました)

##image

Amaze UI は、モバイルファーストのクロススクリーン フロントエンド フレームワークです。基本的なスタイル、グリッド、テーブル、フォーム、ボタン、および共通コンポーネント スタイルを提供します。軽量 (CSS と JS の gzip をすべて含めると約 100 KB)、モバイル ファースト

フロントエンド フレームワーク

公式 Web サイトのアドレス: http://amazeui.org/

Github : https://github.com/zordius/lightncandy

10、React Grommet


Grommet はエクスペリエンスを重視した React コンポーネント ライブラリです。すべてのコンポーネントはアクセス可能で、ブラウザ間の互換性があり、テーマのカスタマイズをサポートしています。属性の設定により、コンポーネントの柔軟性をさらに向上させることもできます。

公式 Web サイトのアドレス: https://v2.grommet.io
Github: https://github.com/grommet/グロメット

11. React-Toolbox

CSS モジュールを使用して Google マテリアル デザインを実装する React コンポーネントのセット。

CSS モジュールについて聞いたことがありますか? React-Toolbox は CSS モジュールに依存しています。 Purify-CSS などのツールを使用せずに、必要な CSS のみを使用できます。これに加えて、React-Toolbox は 30 個のコンポーネントを備えた高度にカスタマイズ可能なフレームワークであり、すぐに使用できます。

React にはどのような UI フレームワークがありますか?

プログラミング関連の知識について詳しくは、プログラミング学習をご覧ください。 !

以上がReact にはどのような UI フレームワークがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法 React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法 Sep 28, 2023 am 10:48 AM

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法、特定のコード例が必要です 今日の Web 開発環境では、フロントエンドとバックエンドの分離がトレンドになっています。フロントエンド コードとバックエンド コードを分離することで、開発作業がより柔軟かつ効率的になり、チームのコラボレーションが促進されます。この記事では、React を使用してフロントエンドとバックエンドの分離を実現し、それによって分離と独立したデプロイの目標を達成する方法を紹介します。まず、フロントエンドとバックエンドの分離とは何かを理解する必要があります。従来の Web 開発モデルでは、フロントエンドとバックエンドが結合されています。

React と RabbitMQ を使用して信頼性の高いメッセージング アプリを構築する方法 React と RabbitMQ を使用して信頼性の高いメッセージング アプリを構築する方法 Sep 28, 2023 pm 08:24 PM

React と RabbitMQ を使用して信頼性の高いメッセージング アプリケーションを構築する方法 はじめに: 最新のアプリケーションは、リアルタイム更新やデータ同期などの機能を実現するために、信頼性の高いメッセージングをサポートする必要があります。 React はユーザー インターフェイスを構築するための人気のある JavaScript ライブラリであり、RabbitMQ は信頼性の高いメッセージング ミドルウェアです。この記事では、React と RabbitMQ を組み合わせて信頼性の高いメッセージング アプリケーションを構築する方法を紹介し、具体的なコード例を示します。 RabbitMQ の概要:

React Router ユーザーガイド: フロントエンドルーティング制御の実装方法 React Router ユーザーガイド: フロントエンドルーティング制御の実装方法 Sep 29, 2023 pm 05:45 PM

ReactRouter ユーザーガイド: フロントエンドルーティング制御の実装方法 シングルページアプリケーションの人気に伴い、フロントエンドルーティングは無視できない重要な部分になりました。 React エコシステムで最も人気のあるルーティング ライブラリとして、ReactRouter は豊富な機能と使いやすい API を提供し、フロントエンド ルーティングの実装を非常にシンプルかつ柔軟にします。この記事では、ReactRouter の使用方法と具体的なコード例を紹介します。 ReactRouter を最初にインストールするには、次のものが必要です

PHP、Vue、React: 最適なフロントエンド フレームワークを選択するには? PHP、Vue、React: 最適なフロントエンド フレームワークを選択するには? Mar 15, 2024 pm 05:48 PM

PHP、Vue、React: 最適なフロントエンド フレームワークを選択するには?インターネット技術の継続的な発展に伴い、フロントエンド フレームワークは Web 開発において重要な役割を果たしています。 PHP、Vue、React は 3 つの代表的なフロントエンド フレームワークであり、それぞれに独自の特徴と利点があります。使用するフロントエンド フレームワークを選択するとき、開発者はプロジェクトのニーズ、チームのスキル、個人の好みに基づいて情報に基づいた決定を下す必要があります。この記事では、PHP、Vue、React の 3 つのフロントエンド フレームワークの特徴と用途を比較します。

Java フレームワークとフロントエンド React フレームワークの統合 Java フレームワークとフロントエンド React フレームワークの統合 Jun 01, 2024 pm 03:16 PM

Java フレームワークと React フレームワークの統合: 手順: バックエンド Java フレームワークをセットアップします。プロジェクト構造を作成します。ビルドツールを設定します。 React アプリケーションを作成します。 REST API エンドポイントを作成します。通信メカニズムを構成します。実際のケース (SpringBoot+React): Java コード: RESTfulAPI コントローラーを定義します。 React コード: API によって返されたデータを取得して表示します。

React を使用して応答性の高いバックエンド管理システムを開発する方法 React を使用して応答性の高いバックエンド管理システムを開発する方法 Sep 28, 2023 pm 04:55 PM

React を使用して応答性の高いバックエンド管理システムを開発する方法 インターネットの急速な発展に伴い、日々の業務を処理するために効率的で柔軟で管理が容易なバックエンド管理システムを必要とする企業や組織が増えています。現在最も人気のある JavaScript ライブラリの 1 つである React は、ユーザー インターフェイスを構築するための簡潔で効率的かつ保守しやすい方法を提供します。この記事では、React を使用して応答性の高いバックエンド管理システムを開発する方法と、具体的なコード例を紹介します。まず React プロジェクトを作成します

Vue.js vs. React:プロジェクト固有の考慮事項 Vue.js vs. React:プロジェクト固有の考慮事項 Apr 09, 2025 am 12:01 AM

VUE.JSは、中小規模のプロジェクトや迅速な反復に適していますが、Reactは大規模で複雑なアプリケーションに適しています。 1)Vue.jsは使いやすく、チームが不十分な状況やプロジェクトスケールが小さい状況に適しています。 2)Reactにはより豊富なエコシステムがあり、高性能で複雑な機能的ニーズを持つプロジェクトに適しています。

反応にはどのようなクロージャがありますか? 反応にはどのようなクロージャがありますか? Oct 27, 2023 pm 03:11 PM

React には、イベント処理関数、useEffect や useCallback、上位コンポーネントなどのクロージャがあります。詳細な紹介: 1. イベント処理関数のクロージャ: React では、コンポーネント内でイベント処理関数を定義すると、関数はクロージャを形成し、コンポーネントのスコープ内のステータスとプロパティにアクセスできます。このようにして、コンポーネントの状態とプロパティをイベント処理関数で使用して対話型ロジックを実装できます; 2. useEffect や useCallback のクロージャなど。

See all articles