Awesome React
- この記事は次の日本語訳です（Reactの部分のみ抜粋）
公式
コミュニティ
オンラインでReactのコードを試せるサービス
チュートリアル
Reactのチュートリアル
- React Official Tutorial - 公式
- Using React in Visual Studio Code - ReactをVSCodeで使う
- Scrimba - Learn React for free interactively - ScrimbaのReactコース
- FreeCodeCamp React Challenges - FreeCodeCampのReactコース
- React Cheatsheet - チートシート
- React Patterns - Reactのコンポーネントのパターン集
- Setup Flow with React - ReactでFlowを使うセットアップ方法
React Hooksのチュートリアル
- React Hooks - 公式
- Replacing Redux with React Hooks and Context - ReduxをReact HooksとContextで置き換える
- React Hooks cheat sheet: Unlock solutions to common problems - React Hooksチートシート
- How to fetch data with React Hooks? - React Hooksで fetch APIを使うには？
- Easy to understand React Hook recipes - React Hooksのレシピ集
- Awesome React Hooks
React & TypeScript
パフォーマンス
- React Optimizing Performance - パフォーマンスの最適化
- Introducing the React Profiler - プロファイラーの紹介
- Optimizing React: Virtual DOM explained - 仮装DOMの説明
- A Definitive Guide to Optimize Major Performance issues in React - パフォーマンスの問題を最適化ガイド
- Twitter Lite and High Performance React Progressive Web Apps at Scale - Twitter Liteを例にした高パフォーマンスなPWAへの取り組み
- Using the React DevTools Profiler to Diagnose React App Performance Issues - React DevTools Profilerを使用してReactアプリのパフォーマンスの問題を診断する
- Top 5 Practices to Boost React Performance
- React is Slow, React is Fast: Optimizing react Apps in Practice - Reactアプリを最適化の実践
- Rendering large lists with react-window - react-windowで大量のリストを描画する
React内部の実装ついて
- Reconciliation - Reactの差分を検知するアルゴリズムについて
- React Fiber Architecture - Reactのコアアルゴリズムについて
- Build your own React - 独自のReactを構築するためのDIYガイド
- Inside Fiber: In-depth overview of the new reconciliation algorithm in React - 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 フレームワーク
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 Rails - ReactをRailsと使うための柔軟なツール
- ReactJS.NET - ReactコンポーネントのJSXコンパイルおよびサーバー側レンダリング用の.NETライブラリ
- React ASP.NET Boilerplate - ASP.NET Coreを使用して同じReactアプリケーションを構築するためのテンプレート
- React Bootstrap Components Playground - react-bootstrapの型チェック
- om - ReactのClojureScript UIフレームワークとクライアント/サーバーアーキテクチャ
- quiescent - React上の軽量ClojureScript
- Reagent - React.jsへの最小限のClojureScriptインターフェース
- react-haskell - HaskellのReactバインディング
- Express React views
- Express Coffee-React views - サーバー上でCofee-Reactをレンダリングする
- React Page Middleware
- ngReact - AngularのReactコンポーネント
- React Laravel
- coffee-react-transform - CoffeescriptのReact JSXサポートを提供
- sprockets-coffee-react - CJSXのスプロケットプリプロセッサ
- react-kup - coffeescriptのjsxに代わるシンプルで非侵入的な代替手段
- turbo-react - TurbolinksとReactを組み合わせてDOM diffを適用する
- react-bacon - Bacon.jsでReactを使用するための小さなモジュール
- msx - ReactのJSXトランスフォーマー、Mithrilへの出力呼び出しに合わせて調整
- React.withBackbone - React 16 readyバックボーンバインディング
- Backbone React Component
- react-backbone - Reactのためのバックボーン対応のミックスイン
- NestedReact - Backbone ViewsおよびNestedTypesモデルとの透過的な統合
- backbone-reaction - ReactとBackbone、そしてより強力なReactおよびBackboneの強化
- react.backbone - Backboneの移行を容易にするReactのプラグイン
- reactbone - BackboneのReact拡張機能
- backbone-react-ui - BackboneおよびBackboneページネーターで使用するためのReactコンポーネント
- react-events - Reactコンポーネントの宣言型マネージイベントバインディング
- react-mixin-manager - React Mixin登録マネージャー
- gsap-react-plugin - React.jsコンポーネントの状態をtweenするためのGSAPプラグイン
- react-topcoat by @plaxdan - Reactライブラリで構築されたトップコートCSSコンポーネント
- react-topcoat by @arnemart - トップコート用のReactコンポーネントのコレクション
- reactdown - マークダウン構文を使用してReactコンポーネントを作成
- react-jade - JadeをReactにコンパイル
- jade-react - JadeテンプレートをReact.DOM式にコンパイルします
- gulp-jade-react - GulpでJadeテンプレートをReact de-sugared JSXにコンパイルする
- sbt-reactjs - npmを使用したReact SBTプラグイン
- scalajs-react - Scala.jsとReact
- react-xtags - Reactを使用してxtagsを実装
- jreact - Java用React
- React.hiccup - sweet.jsで記述されたJSXの完全な代替
- react-play - JDK8のNashornを使用したPlayフレームワークでのReactコンポーネントのレンダリング
- rx-react - RxJSでReactを操作するユーティリティ
- react-with-di - DIを使用したReact.jsのプロトタイプ
- reactfire - Firebase統合を容易にするReactJSミックスイン
- firedux - Firebase + ReactJSのRedux
- react-clickdrag-mixin - ReactコンポーネントのClickDragミックスイン
- Rewrite the Admin UI of KeystoneJS in React
- react-masonry-mixin - Masonryのためのミックスイン
- react-packery-mixin - (Metafizzy) - Packeryのためのミックスイン
- react-dropzone - React.jsを使用したシンプルなHTML5ドラッグドロップゾーン
- aframe-react - A-Frame VR + React
- react-three - three.jsを使用してバインディングを反応させて3Dシーンを作成および制御
- react-three-renderer - Reactを使用してthree.jsキャンバスにレンダリングする
- react-threejs - ReactとThree.jsの間の最も単純なバインディング
- react-masonry-css - CSSによる高速Masonryレイアウト
- react-captcha - Google用のreact.js reCAPTCHA
- reaptcha - Google reCAPTCHA用のクリーンでモダンでシンプルなReactラッパー
- react-recaptcha-that-works - 動作するReactのreCAPTCHAブリッジ
フォーム
- 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-autocomplete by @rackt - WAI-ARIA準拠のReactオートコンプリート
- react-autosuggest by @moroshko - WAI-ARIA準拠のReact自動サジェストコンポーネント
- react-autocomplete by @eliseumds - ReactJS + RxJS
- react-autocomplete by @prometheusresearch - Reactに基づいたオートコンプリートウィジェット
- instatype by @gragland - シンプルなReactオートコンプリートコンポーネント
- downshift - シンプルで柔軟なWAI-ARIA準拠の拡張入力Reactコンポーネントを構築するためのプリミティブ
- React Bootstrap Typeahead - スタイル設定のためにBootstrapに依存し、もともとTwitterのtypeahead.jsに触発された、Reactベースのtypeahead
グラフィック
- 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を組み合わせたデータ視覚化フレームワーク