React非常棒-React的推荐文章、库和工具总结

1 年 ago

科, 雅

7 minutes

超棒的 React

https://github.com/enaqx/awesome-react

公式 – 用中文原生方式改写

React GitHub

社区 (shè qū)

React Twitter

可以试用在线的React代码的服务

JSFiddle

教程

使用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

响应 & TypeScript

JSX in 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的问题和答案

List of React interview Questions and Answers

反应工具

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の静的サイトジェネレーター&フレームワーク

响应式样式

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库

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-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描画

模型库 kù)

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を組み合わせたデータ視覚化フレームワーク