Awesome React

Reactを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

React
React Native
コントリビューション

React

React一般資料

Reactチュートリアル

Reactフレームワーク

next - Reactフレームワーク
gatsby - Reactで現代的なウェブサイトを構築
remix - フルスタックウェブフレームワーク。ユーザーインターフェースに集中できるように設計されています
react-admin - B2Bアプリケーション向けのフロントエンドフレームワーク
refine - 制約のないReactベースのCRUDアプリケーションを構築できます
vike - モジュラーなフレームワーク（Next.jsおよびNuxtの代替）

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

shadcn-ui - Radix UIとTailwind CSSを使用して構築された美しいコンポーネント
ant-design - 企業向けのUI設計言語およびReact用UIライブラリ
material-ui - 即時使用可能な基礎となるReactコンポーネント
chakra-ui - SaaS製品を高速に構築するためのコンポーネントシステム
react-bits - アニメーション付き、インタラクティブで完全にカスタマイズ可能なReactコンポーネントのコレクション
mantine - 完全機能のReactコンポーネントライブラリ
react-bootstrap - Reactで構築されたBootstrapコンポーネント集
fluentui - マイクロソフトのFluent UI
framework7 - iOSおよびAndroidアプリ開発用の完全機能HTMLフレームワーク
ariakit - Reactでアクセシブルなウェブアプリを構築するツールキット
react-email - 美しいメールを作成するための未スタイルコンポーネント
8bitcn-ui - shadcnに基づいたレトロ8ビットテーマのReactコンポーネントライブラリ
headlessui - React用の完全未スタイルかつアクセシブルなUIコンポーネント
ruixen-ui - モダンで軽量なReactコンポーネントライブラリ

React状態管理とデータ取得

redux - JavaScriptアプリ用の予測可能なステートコンテナ
mobx - シンプルでスケーラブルなステート管理
zustand - Reactにおけるステート管理に必要なベアの必需品
tanstack-query - 強力な非同期ステート管理
swr - Reactのデータフェッチング用のHook
apollo-client - 完全に機能付でプロダクション対応のキャッシュGraphQLクライアント
relay - データ駆動型Reactアプリケーションを構築するためのフレームワーク
jotai - React用の原始的で柔軟なステート管理
xstate - 現代ウェブ向けのステートマシンとステートチャート
effector - 業務論理を簡単に実現
immer - 現在の状態を変更して、次の不変状態を作成する
immutable-js - JavaScript用の不変かつ持続可能なデータコレクション
rxdb - JavaScriptアプリケーション向けの高速かつオフライン優先の反応型データベース

Reactスタイリング

styled-components - コンポーネント時代向けの視覚的プリミティブ
emotion - 高性能スタイル構成を目的としたCSS-in-JSライブラリ
vanilla-extract - TypeScriptでゼロランタイムのスタイルシート

Reactアイコンライブラリ

react-icons - 人気アイコンパックのSVG Reactアイコン
lucide-react - 美しく一貫したアイコンツールキット
heroicons - Tailwind CSSの開発者たちが手作りした美しいSVGアイコン
thesvg - 人気ブランドと技術向けの無料SVGアイコンコレクション

Reactルーティング

react-router - React向けの宣言型ルーティング
tanstack-router - 型安全なルーターで、キャッシュとURL状態管理が内蔵されている

React開発ツール

vite - 次世代フロントエンドツールキット
parcel - ウェブ向けのゼロ設定構築ツール
reactotron - ReactおよびReact Nativeプロジェクトを確認するデスクトップアプリ
eslint-plugin-react - ESLint用のReact特定のlint規則
react-scan - Reactのパフォーマンス問題のスキャンとアプリ内の遅いレンダリングを削除
why-did-you-render - Reactにモンキーパッチを適用して、避けるべき再レンダリングを通知

Reactライブラリ

ai-sdk - Next.jsの開発者たちが提供するTypeScriptとReact向けAIツールキット
preact - 同じ現代的なAPIを持つ高速Reactの代替ツール
floating-ui - フロート要素を作成するためのツールキット
loadable-components - React向けに推奨されるコード分割ライブラリ
react-uploady - React向けの現代的なファイルアップロードコンポーネントとHooks
downshift - React用の自動補完、コンボボックスまたはセレクトドロップダウンコンポーネント
react-error-boundary - エラーバウンダリコンポーネントでエラーをキャッチできるReactのコンポーネント

Reactテスト

jest - 快適なJavaScriptテスト
react-testing-library - シンプルかつ完全なReact DOMテストユーティリティ
cypress - ブラウザ内で実行される何でもの高速かつ簡単で信頼性の高いテスト
playwright - ウェブテストおよび自動化用のフレームワーク

Reactの優れたコンポーネント

Awesome React Components
react-select - React用のSelectコンポーネント
react-big-calendar - カレンダーコンポーネント
react-datepicker - React 用のシンプルで再利用可能な日付選択コンポーネント
react-qrcode - React で使用可能な QR コンポーネント
react-archer - React 要素間の矢印を描く
react-complex-tree - 無偏見なアクセシブルツリー
react-insta-stories - インスタグラム風ストーリー用の React コンポーネント
react-hot-toast - React 用の軽量でカスタマイズ可能なトースト通知
swiper - 最も現代的なモバイルタッチスライダー
keen-slider - タッチスライダーカーネル
heart-switch - React用のハート型トグルスイッチコンポーネント
kbar - サイト用の高速・軽量・拡張可能な cmd+k インターフェース
tagify - 軽量かつ効率的なタグ入力コンポーネント
puck - React 用のビジュアルエディタ
json-edit-react - 高度にカスタマイズ可能な JSON/オブジェクトツリー編集・閲覧ツール

ReactコンポーネントのSandbox

storybook - Storybook は、UI コンポーネントやページを孤立して構築するためのフロントエンドワークショップ
react-cosmos - 再利用可能なReactコンポーネントを作成するための開発ツール
bit - 組み立て可能なソフトウェア開発用のビルドシステム

Reactフォーム

react-hook-form - フォームの状態管理とバリデーションに用いるReact Hooks
react-jsonschema-form - JSON Schemaからウェブフォームを構築するReactコンポーネント
formily - アリババグループ統合フォームソリューション
tanstack-form - ヘッドレスで高速かつ型安全なフォーム状態管理

Reactテーブルとグリッド

react-grid-layout - レスポンシブブレークポイントを用いたドラッグ＆リサイズ可能なグリッドレイアウト
tanstack-table - 強力なテーブルおよびデータグリッドを構築するためのヘッドレスUI
react-data-grid - 機能豊かでカスタマイズ可能なデータグリッドReactコンポーネント

React地図

react-map-gl - MapboxGL JSに対するReactフレンドリーなAPIラッパー
react-leaflet - Leafletマップ用のReactコンポーネント

Reactチャート

recharts - ReactとD3で構築された再定義されたチャートライブラリ
visx - ビジュアライゼーションコンポーネント
victory - インタラクティブなデータビジュアライゼーションを構築するための組み立て可能なReactコンポーネントのコレクション
react-vis - データビジュアライゼーションコンポーネント
nivo - D3とReactライブラリをベースにした豊富なデータ可視化コンポーネントを提供
xyflow - ノードベースのエディタやインタラクティブな図の構築に使えるカスタマイズ可能なReactコンポーネント

Reactレンダラー

react-three-fiber - Three.js用のReactレンダラー
ink - インタラクティブなコマンドラインアプリにReactを使う
remotion - Reactを使って動画をプログラムで作成
react-pdf - Reactを使ってPDFファイルを作成
react-figma - Figma用のReactレンダラー
markdown-to-jsx - 非常に高速で柔軟なマークダウンツールチェーン

React国際化

formatjs - ウェブアプリの国際化を実現
react-i18next - React向けの国際化を正しく実現
react-intlayer - メンテナンス性に焦点を当てたReact向け国際化

Reactグラフィックスとアニメーション

react-spring - スプリング物理に基づくReactアニメーションライブラリ
framer-motion - オープンソースかつプロダクション向けのReact用アニメーションおよびジェスチャーライブラリ
auto-animate - 設定不要ですぐ使えるアニメーションユーティリティ。滑らかなトランジションを追加
react-tsparticles - 高度にカスタマイズ可能なパーティクル効果を簡単に作成
react-parallax-tilt - Reactコンポーネントに簡単にティル・ホーバー効果を適用
simple-parallax-js - ReactとJavaScriptでパララックス効果を実現する簡単な方法

React統合

rescript-compiler - 効率的かつ人間が読みやすいJavaScriptにコンパイルされる、しっかり型付けされた言語
fulcro - clj/cljsでウェブアプリケーション開発を行うためのライブラリ

実際のReactアプリ

mattermost-server - 安全な協働を可能にするオープンソースプラットフォーム
kibana - Elastic Stackへのあなたの窓口
webamp - ブラウザ向けWinamp 2の再実装
overreacted - ダン・アブラモフの個人ブログ
wave - オープンソースかつマルチプラットフォーム対応の、スムーズなワークフローを実現するターミナル
readest - シンプルで機能豊かかつマルチプラットフォーム対応のeBookリーダー
bookcars - 車のレンタルプラットフォーム
notifuse - 自前で運用可能な現代的なメール送信プラットフォーム（ニュースレターおよび取引メール）

React Native

React Native一般資料

React Nativeナビゲーション

react-navigation - React Nativeアプリケーションのルーティングとナビゲーション

React Nativeの優れたコンポーネント

react-native-vector-icons - React Native用のカスタマイズ可能なアイコン
react-native-gifted-chat - React Native用の最も完全なチャットUI

React Nativeライブラリ

realm-js - モバイルデータベース：SQLiteおよびキーバリューストアへの代替案
react-native-device-info - React NativeにおけるiOSおよびAndroid用のデバイス情報
react-native-maps - React Nativeマップビューコンポーネント

コントリビューション

このリストは、Reactに関する興味深い情報を個人的にまとめたものとして始まりました。当時Reactはまだベータ版で、JSXからJSへの変換には専用スクリプトが必要であり、Fluxも未公開でした。現在Reactは広く普及しています。このリストを広告や実験的プロジェクトの宣伝場所として使わないでください。ここでは完全に無料の資料を共有します。古くなったプロジェクトや記事の更新、新しい項目を歓迎します。可能であればGitHubリンクを使用してください。ご意見と提案に心から感謝します♡ (✿◠‿◠)