ホームページ  >  記事  >  ウェブフロントエンド  >  反応にはどのようなプラグインがありますか?

反応にはどのようなプラグインがありますか?

青灯夜游
青灯夜游オリジナル
2022-07-14 15:11:074633ブラウズ

react プラグインには次のものが含まれます: 1. 予測可能な状態管理を提供する Redux、2. 関数リアクティブ プログラミングを通じて状態管理をシンプルかつスケーラブルにする MobX、3. Redux Thunk、Redux ミドルウェアの非同期処理、4 .Dva、redux および redux-saga に基づくデータ フロー ソリューション、5. Ant design、React UI コンポーネント ライブラリ、6. React-icons、React に基づく豊富なアイコン ライブラリ、7. Viser、視覚化ライブラリ。

反応にはどのようなプラグインがありますか?

#このチュートリアルの動作環境: Windows7 システム、react18 バージョン、Dell G3 コンピューター。

React プロジェクトの開発効率を向上させるために、React プロジェクトでよく使用されるプラグインをいくつかまとめました。

1. 状態管理

  • Redux: 予測可能な状態管理を提供する JavaScript 状態コンテナ

  • MobX: 関数型リアクティブ プログラミングを通じて状態管理をシンプルかつスケーラブルにする

  • Redux Thunk: Redux 用の非同期処理ミドルウェア

  • Redux Saga: アプリケーションの副作用 (データの非同期取得、ブラウザー キャッシュへのアクセスなどの副作用) を管理するために使用される Redux ミドルウェア

  • Dva: に基づくデータ フロー ソリューションredux と redux-saga

2. UI コンポーネント ライブラリ

  • Ant 設計: React Ant Design デザイン システムに基づく UI コンポーネント ライブラリ。主にエンタープライズ レベルのミッドエンドおよびバックエンド製品の開発に使用されます。

  • Ant design モバイル: Ant Design デザイン システムに基づく React UI モバイル 終了コンポーネント ライブラリ

  • MaterialUI: テクスチャ デザインに基づいた世界で最も人気のある React UI ライブラリ

  • React ツールボックス: CSS モジュールを使用した一連の関数 React Google のマテリアル デザイン仕様を実装するコンポーネント

  • React Virtualized: 大きなリストとテーブルをレンダリングできる React ソリューション

  • Fabric UI: のコレクションコード、デザイン、インタラクティブな動作を共有する美しいクロスプラットフォーム アプリケーションを作成するための Microsoft のオープンソース UX フレームワーク

  • #React デスクトップ: これを実現するために設計された React ベースの JavaScript ライブラリ多くの macOS Sierra および Windows 10 コンポーネントが含まれるデスクトップ エクスペリエンスを Web に提供します。 React-desktop は NW.js および Electron.js と完全に統合されますが、JavaScript 駆動のプロジェクトで使用できます。

  • Zent: Youzan PC 側 WebUI 仕様 React 実装は、完全な機能を提供します。基本的な UI コンポーネントといくつかの一般的に使用されるビジネス コンポーネントのセット

  • #react-icons: React カプセル化に基づく豊富なアイコン ライブラリ

3. ツールクラス

react-copy-to-clipboard: Reactベースのクリップボードへのコピーコンポーネント
  • # #qrcode.react: QR コードを生成するための React ベースのコンポーネント

  • #nprogress: YouTube、Medium などに適した最上位のプログレス バー コンポーネント

  • #react-syntax-highlighter: React ベースのコード強調表示コンポーネント
  • react-contextmenu: 右クリック メニュー コンポーネント
  • emoji -mart: React ベースの絵文字ライブラリ
  • #react-highlight-words: React ベースのキーワード ハイライト
  • #4. データの視覚化

AntV: G2、G6、F2、L7、およびチャートの使用法と設計仕様の完全なセットが含まれており、強力なデータ視覚化のニーズを提供します G2Plot: G2 パッケージングに基づいたすぐに使えるビジュアル コンポーネント ライブラリ

  • #recharts: React と D3 Library を使用して構築されたカスタム チャート

  • Viser: 複数の主流フレームワークをサポートする視覚化ライブラリ

  • #5、アニメーション/モーション効果
Halogen: React を使用した読み込みアニメーションのコレクション

react-move: 美しいデータ駆動型の React アニメーション、わずか 3.5 kb (gzip)

  • react-spring: スプリングの物理学に基づくアニメーション ライブラリ

  • Ant Motion: 単一および組み合わせたアニメーション、およびアニメーション ソリューションの完全なセットを提供します

  • #scenejs: JavaScript と CSS タイムラインに基づくアニメーション ライブラリ
  • ##react-text-loop: テキスト カルーセル アニメーション
  • 6、ドラッグ/並べ替え

  • react-Beautiful-dnd:美しい、移植性リストのドラッグ アンド ドロップ ライブラリ

react-dnd: コンポーネントを分離したまま、複雑なドラッグ アンド ドロップ インターフェイスを構築するのに役立ちます

react-moveable: 柔軟で強力なドラッグ ライブラリ。自由なドラッグ、スケーリング、参照線をサポート
  • react-grid-layout: 強力なグリッドのドラッグ、並べ替え、ズーム ライブラリ
  • mixitup : 強力なリストカードソートアニメーションライブラリ
  • 7、画像処理

  • react-image -crop: 強力な画像トリミング ライブラリ

#react-sparklines: データに基づいてトレンド ラインを自動的に生成#dom-to-image: キャンバスDOM に基づいて画像を生成するライブラリ

  • react-img-editor: 画像エディター

#8. エディタ関連

  • braft-editor: リッチ テキスト エディタ

  • #powerNice:マークダウン/リッチテキストエディタ
  • GGEditor:ビジュアルダイアグラムエディタ
  • react-codemirror2:コードエディタ
  • jsoneditor:json エディター
  • h5-dooring:H5 ページエディター

9. 地図関連

#google-map-react: Google マップ プラグイン##react-amap: AMAP プラグイン
  • @uiw/react-baidu-map:Baidu マップ
  • 10. 足場

React アプリの作成: 初心者向けの必須の React フールプルーフ足場

Next.js: サーバーの構築-サイドレンダリングされた React スキャフォールディング
  • umi: エンタープライズ レベルのフロントエンド アプリケーション フレームワーク
  • webpack3_react: IE9 と互換性があり、完全な React ファミリ バケットを提供しますソリューション
  • [関連する推奨事項:
  • Redis ビデオ チュートリアル
  • ]

以上が反応にはどのようなプラグインがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。