首頁 web前端 前端問答 react有哪些插件

react有哪些插件

Jul 14, 2022 pm 03:11 PM
react

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,一個視覺化庫。

react有哪些插件

本教學操作環境:Windows7系統、react18版、Dell G3電腦。

為了提高大家開發 React 專案的效率,以下總結了一些React專案常用外掛程式。

1、狀態管理

  • #Redux:JavaScript 狀態容器,提供可預測化的狀態管理

  • MobX:透過函數響應式程式設計使得狀態管理變得簡單且可擴展

  • #Redux Thunk:Redux的非同步處理中間件

  • Redux Saga:Redux中間件,用於管理應用程式Side Effect(副作用,例如非同步獲取數據,訪問瀏覽器快取等)

  • Dva:一個基於redux和redux-saga的資料流方案

#2、UI元件庫

  • ##Ant design:基於Ant Design 設計體系的React UI 元件庫,主要用於研發企業級中後台產品

  • Ant design mobile:基於Ant Design 設計體系的React UI 移動端元件庫

  • MaterialUI:世界最受歡迎的基於質感設計的React UI庫

  • React toolbox:一套使用CSS模組功能實作Google的Material Design規範的React元件

  • React Virtualized:一個能渲染大型清單和表格的React解決方案

  • Fabric UI:微軟開源的UX框架的集合,用於創建共享代碼,設計和交互行為的精美的跨平台應用程序

  • React desktop:基於React的JavaScript庫,旨在將本機桌面體驗帶入網絡,其中包含許多macOS Sierra和Windows 10元件。 react-desktop與NW.js和Electron.js完美結合,但是可以在任何JavaScript驅動的專案中使用

  • Zent:有讚PC 端WebUI 規範的React 實現,提供了一整套基礎的UI 元件以及一些常用的業務元件

  • react-icons:基於React封裝的豐富的圖示庫

3、工具類別

  • react-copy-to-clipboard:基於React的複製到剪切板元件

  • qrcode.react:基於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建立的自訂的圖表庫

Viser:支援多種主流框架的視覺化庫

    5、動畫/動效果
  • Halogen:使用React的載入動畫集合

  • react-move:漂亮的,資料驅動的React動畫,只需3.5kb(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產生圖片的canvas庫#############react-img-editor:圖片編輯器###

8、編輯器相關

  • #braft-editor:富文本編輯器

  • powerNice:markdown/富文本編輯器

  • #GGEditor:視覺化圖編輯器

  • react-codemirror2:程式碼編輯器

  • jsoneditor:json編輯器

  • #h5-dooring:H5頁編輯器

#9、地圖相關

  • google-map-react:Google地圖外掛

  • react-amap:高德地圖外掛

  • @uiw/react-baidu-map:百度地圖

10、腳手架

  • Create React App:初學者必備React傻瓜式腳手架

  • Next.js:建構服務端渲染的React腳手架

  • umi:企業級前端應用框架

  • webpack3_react:相容IE9 且提供完整的React全家桶解決方案

【相關推薦:Redis影片教學

以上是react有哪些插件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

React前後端分離指南:如何實作前後端的解耦與獨立部署 React前後端分離指南:如何實作前後端的解耦與獨立部署 Sep 28, 2023 am 10:48 AM

React前後端分離指南:如何實現前後端的解耦和獨立部署,需要具體程式碼範例在當今的Web開發環境中,前後端分離已經成為一種趨勢。透過將前端和後端程式碼分開,可以讓開發工作更加靈活、高效,並且方便進行團隊協作。本文將介紹如何使用React實現前後端分離,從而實現解耦和獨立部署的目標。首先,我們要先理解什麼是前後端分離。傳統的Web開發模式中,前端和後端是耦合在

如何利用React和RabbitMQ建立可靠的訊息應用 如何利用React和RabbitMQ建立可靠的訊息應用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ建立可靠的訊息傳遞應用程式引言:現代化的應用程式需要支援可靠的訊息傳遞,以實現即時更新和資料同步等功能。 React是一種流行的JavaScript庫,用於建立使用者介面,而RabbitMQ是一種可靠的訊息傳遞中間件。本文將介紹如何結合React和RabbitMQ建立可靠的訊息傳遞應用,並提供具體的程式碼範例。 RabbitMQ概述:

React Router使用指南:如何實現前端路由控制 React Router使用指南:如何實現前端路由控制 Sep 29, 2023 pm 05:45 PM

ReactRouter使用指南:如何實現前端路由控制隨著單頁應用的流行,前端路由成為了一個不可忽視的重要部分。 ReactRouter作為React生態系統中最受歡迎的路由庫,提供了豐富的功能和易用的API,使得前端路由的實作變得非常簡單和靈活。本文將介紹ReactRouter的使用方法,並提供一些具體的程式碼範例。安裝ReactRouter首先,我們需要

PHP、Vue和React:如何選擇最適合的前端框架? PHP、Vue和React:如何選擇最適合的前端框架? Mar 15, 2024 pm 05:48 PM

PHP、Vue和React:如何選擇最適合的前端框架?隨著互聯網技術的不斷發展,前端框架在Web開發中起著至關重要的作用。 PHP、Vue和React作為三種代表性的前端框架,每一種都具有其獨特的特徵和優勢。在選擇使用哪種前端框架時,開發人員需要根據專案需求、團隊技能和個人偏好做出明智的決策。本文將透過比較PHP、Vue和React這三種前端框架的特徵和使

Java框架與前端React框架的整合 Java框架與前端React框架的整合 Jun 01, 2024 pm 03:16 PM

Java框架與React框架的整合:步驟:設定後端Java框架。建立專案結構。配置建置工具。建立React應用程式。編寫RESTAPI端點。配置通訊機制。實戰案例(SpringBoot+React):Java程式碼:定義RESTfulAPI控制器。 React程式碼:取得並顯示API回傳的資料。

如何利用React開發一個響應式的後台管理系統 如何利用React開發一個響應式的後台管理系統 Sep 28, 2023 pm 04:55 PM

如何利用React開發一個響應式的後台管理系統隨著互聯網的快速發展,越來越多的企業和組織需要一個高效、靈活、易於管理的後台管理系統來處理日常的操作事務。 React作為目前最受歡迎的JavaScript庫之一,提供了一種簡潔、高效和可維護的方式來建立使用者介面。本文將介紹如何利用React開發一個響應式的後台管理系統,並給出具體的程式碼範例。建立React專案首先

vue.js vs.反應:特定於項目的考慮因素 vue.js vs.反應:特定於項目的考慮因素 Apr 09, 2025 am 12:01 AM

Vue.js適合中小型項目和快速迭代,React適用於大型複雜應用。 1)Vue.js易於上手,適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富,適合有高性能需求和復雜功能需求的項目。

react有哪些閉包 react有哪些閉包 Oct 27, 2023 pm 03:11 PM

react有事件處理函數、useEffect和useCallback、高階元件等等閉包。詳細介紹:1、事件處理函數閉包:在React中,當我們在元件中定義事件處理函數時,函數會形成一個閉包,可以存取元件作用域內的狀態和屬性。這樣可以在事件處理函數中使用元件的狀態和屬性,實現互動邏輯;2、useEffect和useCallback中的閉包等等。

See all articles