7知っておくべきReactライブラリ

すべてのフロントエンドの多くはReactで構築されています。 Reactはすぐにどこにも行かないようです。 Reactの最も重要で有望な側面の1つは、コードコンポーネントの操作です。ボタンからスクローラーやツールバーまで、これらのコンポーネントはUIアプリケーションの構成要素です。

Reactのカプセル化されたコンポーネントは、独自の状態を管理でき、複雑なUIを作成するように構成できます。コンポーネントロジックはテンプレートではなくJavaScriptで記述されているため、アプリを介して豊富なデータを簡単に渡し、状態をDOMから除外できます。 Reactを使用すると、UIを独立した再利用可能な部分に分割し、各部分を個別に考えることができます。

Reactコンポーネントを操作するための迅速で効果的なキックスタートと強力なツールセットを提供するために、既存のReactビルディングブロックからUIを構成するのに役立ついくつかの重要なフレームワークとツールを以下に示します。

1。 React Material UI

マテリアルUIは、Googleのマテリアルデザインの原則を実装する人気のあるフレームワークです。これには、バー、テーブル、ボタン、ナビゲーションなどのコンポーネントの大規模なセットが含まれています。 UIで使用する900以上の異なるSVGアイコンも含まれています。

2。 React Bootstrap

React Bootstrapは、Reactコンポーネント用に再構築されたBootstrap用のコンポーネントベースのフレームワークを提供します。 Bootstrapはおそらく世界で最も人気のあるUIフレームワークであり、その設計とReactコンポーネントのパワーを組み合わせています…まあ、私たちが求めることができるのはそれだけではありませんか？

3。 React Bell

React Belleは、Toggle、ComboBox、Rating、TextInput、Button、Card、Selectなどの構成可能なコンポーネントの美しいセットを提供します。このフレームワークは、デスクトップとモバイルの両方に最適化されたコンポーネントを作成すると同時に、高レベルのスタイリングの再構成を可能にすることに誇りを持っています。

4。 React ToolBox

React Toolboxは、マテリアルデザインベースのコンポーネントを含む人気のあるライブラリです。これは、CSSモジュール（SASSで記述）、Webpack、ES6などの最もトレンディな提案の上に構築されています。ライブラリはWebpackワークフローと調和して統合されており、簡単にカスタマイズでき、非常に柔軟です。約10種類のコンポーネントが含まれていますが、構成可能であるため、優れたUIエクスペリエンスを構成するための優れた遊び場になります。

5。 React Grommet

Grommetは、本質的な経験を強調するReactライブラリです。すべてのコンポーネントはアクセス可能で、クロスブラウザー互換であり、テーマのカスタマイズをサポートします。コンポーネントの柔軟性は、プロパティを介した構成によって強化されます。本質的には、主要な基本機能を備えたクリーンなUIをすばやく簡単に構築するための美しい遊び場です。

6。セマンティックUI

React Semantic UIは、SemanticUIの公式のReact統合です。セマンティックは、人間に優しいHTMLを使用して美しくレスポンシブなレイアウトを作成するのに役立つ開発フレームワークです。レンダリングされたHTMLタグを制御したり、1つのコンポーネントを as でレンダリングしたりできます。 別のコンポーネント。追加の小道具は、 as でレンダリングしているコンポーネントに渡されます 。ネストされたコンポーネントを追加せずに、コンポーネントの機能と小道具を作成できます。これは、 MenuLinks を操作するために不可欠です および react-router 。

7。ビットと反応す​​る

ビットは、任意のアプリケーションまたはリポジトリにある任意のコンポーネントを他のアプリケーションまたはリポジトリで使用できるようにする強力なツールです。ソースファイルの上に薄い仮想化レイヤーを追加し、必要な場所でコンポーネントを作成、管理、再利用できるようにします。また、ライブラリ全体を取り込むことなく、個々のコンポーネントを使用できます。ドキュメントを自動的に解析し、任意のフレームワークを使用して任意の場所でコンポーネントのテストを実行するため、Reactコンポーネントを操作するための優れたツールになります。 Bitコミュニティハブでは、必要となるほぼすべてのReactUI機能のコンポーネントを見つけることもできます。