LoginSignup
170
195

More than 3 years have passed since last update.

PatheeAdvent Calendar 2019Day 5
@mikan3rdin株式会社ZENKIGEN

Awesome React - Reactのオススメ記事・ライブラリ・ツール まとめ -

Last updated at Posted at 2019-12-04

:star: Awesome React

公式

コミュニティ

オンラインでReactのコードを試せるサービス

チュートリアル

Reactのチュートリアル

React Hooksのチュートリアル

React & TypeScript

パフォーマンス

React内部の実装ついて

ReactについてのQ&A

React Tools

React 開発ツール

  • create-react-app - 1つのコマンドで最新のWebアプリをセットアップする
  • react-starter-kit - webアプリ用テンプレート
  • react-devtools - ChromeおよびFirefox開発ツールでのReactコンポーネント階層の検査
  • react-hot-loader - Reactコンポーネントをリアルタイムで調整する
  • react-loadable - promiseでコンポーネントを読み込むための高階層コンポーネント
  • loadable-components - Reactコード分割を簡単にする、bundleサイズを縮小する
  • reactotron - ReactおよびReact Nativeプロジェクトを検査するためのデスクトップアプリ
  • storybook - UIコンポーネントの開発とテスト
  • react-styleguidist - スタイルガイド付きのReactコンポーネント開発環境
  • react-cosmos - 再利用可能なReactコンポーネントを作成するための開発ツール
  • eslint-plugin-react - ESLintの特定のlintルールのプラグイン
  • eslint-plugin-jsx-a11y - JSX要素のa11yルールの静的ASTチェッカー
  • react-axe - Reactアプリケーションのアクセシビリティ監査

React フレームワーク

  • next.js - SSRのためのReactフレームワーク
  • gatsby.js - Reactの静的サイトジェネレーター&フレームワーク

React スタイル

  • styled-components - コンポーネントのスタイルに実際のCSSコードを記述できるようにするライブラリ
  • emotion - JavaScriptを使用してCSSスタイルを記述するために設計されたライブラリ
  • radium - Reactのインラインスタイルを管理するツールのセット
  • jss - JavaScriptでスタイルシートを生成するためのライブラリ

React ルーティング

  • react-router - Reactの宣言型ルーティング
  • navi - Reactの宣言的な非同期ルーティング
  • curi - 単一ページアプリケーション用のJavaScriptルーター

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

  • material-ui - Web開発を迅速かつ簡単にするためのコンポーネント
  • ant-design - エンタープライズクラスのUIデザイン言語とReact UIライブラリ
  • blueprint - Web用のReactベースのUIツールキット
  • office-ui-fabric-react - Microsoft Webエクスペリエンスを構築するためのReactコンポーネント
  • react-bootstrap - Reactで構築されたbootstrapコンポーネント
  • reactstrap - Bootstrap 4のステートレスReactコンポーネント
  • semantic-ui-react - Semantic-UIのReactコンポーネント
  • react-fontawesome - Font Awesome 5 のReactコンポーネント
  • Reakit - Reactのアクセス可能、構成可能、カスタマイズ可能なコンポーネント
  • rsuite - エンタープライズシステム製品用の一連のReactコンポーネントライブラリ
  • atlaskit - Atlassianデザインガイドラインに従って構築されたAtlassianの公式UIライブラリ

Reactの素晴らしいコンポーネント

  • Awesome React Components list - 本当に素晴らしいReactコンポーネントとライブラリ
  • react-select - Reactの選択コンポーネント
  • react-dnd - Reactのドラッグアンドドロップ
  • react-grid-layout - レスポンシブブレークポイントを備えたドラッグ可能でサイズ変更可能なグリッドレイアウト
  • react-table - React向けの軽量で高速で拡張可能なデータグリッド
  • react-data-grid - Reactで構築されたExcelのようなグリッドコンポーネント
  • react-draggable - ドラッグ可能なReactコンポーネント
  • react-resizable-and-movable - Reactのサイズ変更およびドラッグ可能なコンポーネント
  • react-resizable - ハンドルでサイズ変更可能な単純なReactコンポーネント
  • react-resizable-box - Reactのサイズ変更可能なコンポーネント
  • react-sortable-pane - React用のソートおよびサイズ変更可能なペインコンポーネント
  • react-dates - ウェブ向けの簡単に国際化可能でモバイル対応の日付選択ライブラリ
  • react-big-calendar - カレンダーコンポーネント
  • react-datepicker - Reactの日付選択ライブラリ
  • react-list - 多用途の無限スクロールReactコンポーネント
  • react-intl - Reactアプリの国際化
  • react-i18next - Reactの国際化を正しく行うライブラリ
  • react-aria-modal - 完全にアクセス可能なReactモーダル
  • react-hotkeys - Reactの宣言的なホットキーとフォーカスエリア管理
  • react-keydown - Reactコンポーネント用の軽量キーダウンラッパー
  • react-joyride - アプリのガイドを作成するライブラリ
  • react-virtualized - 大きなリストと表形式のデータを効率的にレンダリングするためのReactコンポーネント
  • react-window - 大きなリストと表形式のデータを効率的にレンダリングするためのReactコンポーネント
  • react-text-mask - React用Inputマスク
  • react-loading-skeleton - アプリに自動的に適応するスケルトン画面を作成するライブラリ
  • react-spinkit - 読み込み表示のCSSアニメーションのReactライブラリ
  • rheostat - Reactで構築されたアクセス可能なスライダーコンポーネント
  • qrcode.react - Reactで使用するQRコードのコンポーネント

Reactコマンドラインツール

  • ink - React用のインタラクティブなコマンドラインアプリ
  • react-blessed - ターミナルインターフェイスライブラリのReactレンダラー

Reactテストツール

  • jest - JavaScriptテストフレームワーク
  • enzyme - React用のJavaScriptテストユーティリティ
  • react-testing-library - シンプルで完全なReact DOMテストユーティリティ
  • react-hooks-testing-library - 優れたテストプラクティスを促進するReact Hooksテストユーティリティ
  • majestic - JestのためのGUI

React Libraries

  • react-border-wrapper - Reactのdiv境界に沿って要素を配置するためのラッパー
  • react-magic - ReactでプレーンなHTMLにAJAXを使用できるようにするライブラリ
  • react-toolbox - Googleのマテリアルデザイン仕様を実装する一連のReactコンポーネント
  • tcomb-react - Reactコンポーネントのすべてのpropsをチェックできるライブラリ
  • react-responsive - レスポンシブデザインに対応するメディアクエリ
  • react-cursor - Reactで使用するためのFunctional Stateの管理の抽象化
  • Omniscient.js - 不変データの高速トップダウンレンダリングのためのReactコンポーネントの抽象化
  • Touchstonejs - 美しいハイブリッドモバイルアプリを開発するためのReact.jsを搭載したUIフレームワーク。
  • Elemental - React.js WebサイトおよびアプリのUIツールキット
  • StateTrooper - CSPでReactアプリケーションの状態を一元管理
  • Preact - ReactのモダンなAPIを使用できる高速3kbのReactの代替ライブラリ
  • riotjs - Reactのような3.5KBのユーザーインターフェイスライブラリ
  • Maple.js - Webコンポーネントの概念をReactにもたらす
  • react-i13n - Reactアプリケーションを計装するための、高性能でスケーラブルでプラグ可能なアプローチ
  • react-icons - 人気のあるアイコンパックのsvgアイコン
  • Keo - Reactコンポーネントを作成するためのより機能的なDekuアプローチのためのプレーン関数
  • Bit - アプリケーション間でリアクションおよびその他のWebコンポーネントを管理および使用するための仮想リポジトリ
  • AtlasKit - AtlassianのReact UIライブラリ
  • ReactiveSearch - ElasticsearchのためのUIコンポーネントライブラリ
  • Slate - リッチテキストエディターを構築するための完全にカスタマイズ可能なフレームワーク
  • react-json-schema - JSON定義を公開するReactコンポーネントにマッピングして、JSONからReact要素を構築する
  • compose-state - Reactで複数のsetStateまたはgetDerivedStateFromPropsアップデーターを作成する
  • PrimeReact - Reactの最も完全なUIフレームワーク
  • react-lodash - ReactコンポーネントとしてのLodash
  • react-helmet - Reactのドキュメントヘッドマネージャー
  • Stator - Reactの組み込みサポートを備えたシンプルでプレーンなJavaScript状態管理
  • ClearX - 学習曲線がゼロでReact向けの高速で簡単な状態管理
  • react-snap - SPAのためのゼロ構成フレームワークに依存しない静的事前レンダリング
  • Draft.js - テキストエディターを構築するためのReactフレームワーク
  • refract - リアクティブプログラミングのパワーを制御して、コンポーネントを満たす
  • react-desktop - Reactで構築されたOS XおよびWindows UIコンポーネント
  • Reapop - React＆Redux通知システム
  • react-extras - Reactを使用するための便利なコンポーネントとユーティリティ
  • react-instantsearch - AlgoliaによるReactおよびReact Nativeアプリケーションの超高速検索
  • uppy - Webブラウザー用の次のオープンソースファイルアップローダー
  • react-motion - アニメーションの問題を解決するバネ
  • react-esi - ReactおよびNext.jsの非常に高速なサーバー側レンダリング

Reactインテグレーション

フォーム

  • React Forms
  • react-formal - Reactのフォーム検証と値管理の改善、最小限の配線の提供
  • react-forms - Reactのフォームライブラリ
  • valuelink - 拡張されたReactリンクを備えたフル機能の双方向データバインディング
  • wingspan-forms - Reactの動的フォームライブラリ
  • newforms - Reactの同形フォーム処理
  • formjs - Reactjsのフォームジェネレーター
  • react-form-builder - React.jsのフォームビルダー
  • plexus-form - JSONスキーマを使用して反応するための動的フォームコンポーネント
  • tcomb-form - より少ないコードを記述するフォームを開発するためのUIライブラリ
  • formsy-react - React JSのフォーム入力ビルダーおよびバリデーター
  • Learn Raw React: Ridiculously Simple Forms
  • Winterfell - Reactで検証済みで拡張可能な複雑なJSONベースのフォームを生成する
  • Redux-Autoform - メタデータからRedux-Formsを動的に作成する
  • uniforms - フォームを簡単に生成および検証するためのReactコンポーネントとヘルパーの束
  • formik - Reactフォーム
  • NeoForm - フォーム状態の管理と検証のためのモジュラーHOC
  • react-jsonschema-form - JSONスキーマからWebフォームを構築するためのReactコンポーネント
  • List View Select - React Nativeとネイティブコンポーネントの切り替え可能な選択ボックス
  • Final Form 🏁
  • formland - シンプルで柔軟性が高く、拡張可能な構成ベースのフォームジェネレーター
  • react-reactive-form - ReactのAngularのようなリアクティブフォーム
  • unform - ネストされたフィールド、検証など、制御されていないフォーム構造を作成するReactJSフォームライブラリ
  • Formal - React Hook時代のエレガントなフォーム管理プリミティブ

オートコンプリート（入力補完）

グラフィック

  • react-art - Reactを使用してベクターグラフィックスを描画するためのJavaScriptライブラリ
  • react-canvas - Reactコンポーネントのための高性能canvasレンダリング
  • react-famous - Famo.usを使用した60 FPSの複雑な3DアニメーションUI
  • react-kinetic - Reactを使用したKineticJS経由のHTML5 Canvas
  • react-svg-morph - svgコンポーネントを別のものにモーフィングする
  • react-hooks-svgdrawing - Reactフックを使用したSVG描画

モデルライブラリ

  • mori - ClojureScriptの永続データ構造とサポートAPI
  • NestedTypes - 「純粋なレンダリング」をサポートする高速可変モデル
  • swarm - JavaScript複製モデル（MVCのM）ライブラリ
  • caplet - JavaScriptモデルライブラリ

データ管理

  • Immutable.js - JavaScript用の不変のデータコレクション
  • cortex - Reactでデータを集中管理するためのJavaScriptライブラリ
  • avers - 最新のクライアント側モデル抽象化ライブラリ
  • imvvm - Reactの不変のModel-View-ViewModel
  • morearty.js - 純粋なJavaScriptでのReactの状態管理の改善
  • valuable - Reactの不変のデータストア
  • react-resolver - Reactコンポーネントのデータを再帰的に遅延ロードする同形ライブラリ
  • freezer-js - Reactの軽量でリアクティブな不変のデータ構造
  • MobX - シンプルでスケーラブルな状態管理
  • baobab - カーソルを使用したJavaScript永続的でオプションの不変データツリー
  • baobab-react - BaobabのReact統合
  • datascript - ClojureScriptの不変データベースとデータログクエリエンジン
  • immstruct - Reactのようなコンポーネントベースのライブラリのトップからボトムのプロパティの履歴を持つ不変のデータ構造
  • seamless-immutable - 通常のJS配列およびオブジェクトと後方互換性のあるJavaScriptの不変のデータ構造
  • tydel - 型付きモデルとコレクション、Reactバインディング
  • extendable-immutable - Immutable.jsデータ構造を拡張する
  • statty - ReactおよびPreactアプリ用の小さくて控えめな状態管理ライブラリ
  • Hydux - 「バッテリーを含む」ReactのElmライクステートマネージャー
  • ReSub - より良いReactコンポーネントとデータストアを作成するためのライブラリ
  • ProppyJS - Functional props構成のための小さなライブラリ
  • WatermelonDB - 強力なReactおよびReact Nativeアプリ向けの次世代データベースで、数万件のレコードに対応し、高速性を維持
  • Effector - 高速で強力なリアクティブ状態マネージャー。 シンプルで高速かつタイプセーフなコードを記述し、状態を簡単に管理
  • reactn - 組み込みのグローバル状態管理
  • immer - 現在の状態を変更し、次の不変状態を作成

地図

  • react-googlemaps - GoogleマップへのReactインターフェース
  • react-maps - Reactのマップコンポーネント
  • react-google-maps - React.js Google Maps統合コンポーネント
  • react-gmaps - React.js用のGoogleマップコンポーネント
  • react-map-gl - MapboxGL JSのReactラッパー
  • google-map-react - Googleマップと同形のReactコンポーネント
  • react-mapbox-gl - Reactのためのmapbox-gl-jsラッパー
  • google-maps-react - React、遅延読み込みの依存関係、現在位置ファインダー、およびフルスタックReactチームによるテスト駆動型アプローチを使用した宣言的なGoogle Map Reactコンポーネント
  • react-leaflet - リーフレットマップのReactコンポーネント
  • react-geo - react、antd、およびolを使用した地理関連コンポーネントのセット
  • pigeon-maps - 外部依存関係のないReactJSマップ

統計・グラフ

  • DevExtreme React Chart - BootstrapおよびMaterialデザイン用の高性能プラグインベースのReactチャート
  • react-chartjs - chart.jsを使用した一般的なReactチャートコンポーネント
  • react-stockcharts - ReactJSとd3による高度にカスタマイズ可能な株価チャート
  • Number Picture - React＆D3でアニメーション化された視覚化を構築するための低レベルのビルディングブロック
  • Victory - インタラクティブなデータ視覚化を構築するための構成可能なReactコンポーネントのコレクション
  • Recharts - すばらしい宣言型APIを備えたD3上に構築されたチャートライブラリ
  • React-ApexCharts - ApexChartsのReactコンポーネント（インタラクティブなSVGチャートライブラリ）
  • reaviz - D3.jsに基づくReactでの視覚化ライブラリ
  • react-vis - Reactフレンドリー、高レベルでカスタマイズ可能で、表現力があり、業界に強いReact視覚化ライブラリー
  • nivo - D3およびReactライブラリの上に構築された、豊富なデータ視覚化コンポーネントのセットを提供
  • vx - 再利用可能な低レベルの視覚化コンポーネントのコレクション
  • echarts-for-react - Reactの非常にシンプルなEChartsラッパー
  • Chartify - CSSを使用してチャートを作成するためのReactプラグイン
  • Semiotic - ReactとD3を組み合わせたデータ視覚化フレームワーク
170
195
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
170
195