2024 React 生態(tài)工具最能打的組合!
Vue → 2024 Vue 生態(tài)工具最能打的組合!
經(jīng)過多年的不斷演進(jìn),React 已經(jīng)構(gòu)建了一個(gè)極為豐富且強(qiáng)大的生態(tài)系統(tǒng),本文就來盤點(diǎn)2024 年 React 開發(fā)最能打的技術(shù)棧組合!
創(chuàng)建項(xiàng)目:Vite / Next.js / Astro
- Vite:適用于客戶端渲染的 React 應(yīng)用。
- Next.js:適用于服務(wù)端渲染的 React 應(yīng)用。
- Astro:適用于靜態(tài)生成的 React 應(yīng)用。
Vite
Vite 是一款現(xiàn)代的JavaScript構(gòu)建工具,旨在簡(jiǎn)化前端開發(fā)流程,實(shí)現(xiàn)快速的開發(fā)體驗(yàn)和熱更新功能。作為 create-react-app(CRA)的理想替代方案, Vite 的設(shè)計(jì)理念是不在功能層面對(duì)React產(chǎn)生干擾,讓開發(fā)者能夠更專注于 React 本身,而非框架的限制。
Vite 主要針對(duì)單頁面應(yīng)用和客戶端渲染進(jìn)行了優(yōu)化,因此,對(duì)于客戶端渲染的項(xiàng)目來說,使用 Vite 創(chuàng)建新項(xiàng)目是更為合適的選擇。
Next.js
Next.js 是一個(gè)成熟度很高的 React 框架,也是 React 官方推薦的創(chuàng)建新的 React 項(xiàng)目的首選方式。Next.js 憑借其豐富的內(nèi)置功能(如基于文件的路由)為 React 開發(fā)提供了強(qiáng)大的支持。
Next.js 將服務(wù)端渲染(SSR)作為其主要的渲染技術(shù),因此,對(duì)于服務(wù)端渲染的項(xiàng)目來說,使用 Next.js 創(chuàng)建新項(xiàng)目是更為合適的選擇。
Astro
Astro 是一個(gè)多功能的 Web 框架,專為構(gòu)建快速、以內(nèi)容為中心的靜態(tài)網(wǎng)站而設(shè)計(jì)。它通過服務(wù)器優(yōu)先的API設(shè)計(jì)和默認(rèn)零JavaScript運(yùn)行時(shí)開銷,提供了出色的性能。其主要特性如下:
- 以內(nèi)容為中心:專為展示豐富的內(nèi)容而設(shè)計(jì)。
- 服務(wù)器優(yōu)先:在服務(wù)器上渲染HTML,提高運(yùn)行速度。
- 默認(rèn)零JS:減少客戶端資源消耗,加快加載速度。
- 可定制:提供Tailwind、MDX等超過100個(gè)集成選項(xiàng)。
- 框架無關(guān):支持React、Preact、Svelte等多種框架。
使用場(chǎng)景:Astro 非常適合構(gòu)建博客、營(yíng)銷網(wǎng)站、電子商務(wù)網(wǎng)站、文檔網(wǎng)站、個(gè)人作品集、著陸頁和社區(qū)網(wǎng)站等,特別是那些需要快速加載和良好SEO優(yōu)化的場(chǎng)景。
Github:https://github.com/withastro/astro
狀態(tài)管理:Zustand
Zustand 是一個(gè)現(xiàn)代 React 狀態(tài)管理庫,旨在簡(jiǎn)化狀態(tài)管理,提供簡(jiǎn)潔、可擴(kuò)展和高效的狀態(tài)管理解決方案。這兩年 Zustand 增長(zhǎng)速度很快,越來越多的開發(fā)者選擇使用 Zustand 作為其首選的 React 狀態(tài)管理工具。
GitHub:https://github.com/pmndrs/zustand
路由:React Router
React Router 是一個(gè)用于構(gòu)建單頁面應(yīng)用(SPA)的流行 JavaScript 路由庫,也是官方推薦的路由庫。
Github:https://github.com/remix-run/react-router
構(gòu)建:Vite
Vite 是一個(gè)輕量級(jí)的、速度極快的下一代前端構(gòu)建工具,對(duì) Vue SFC 提供第一優(yōu)先級(jí)支持。它最初是為 Vue 3 項(xiàng)目而創(chuàng)建的,但也可以用于其他框架,如 React、Svelte、Preact 等,目前已被多個(gè)前端框架作為默認(rèn)的構(gòu)建工具。
Github:https://github.com/vitejs/vite
調(diào)試:React DevTools
React DevTools 是一個(gè)用于檢查和分析React應(yīng)用程序的瀏覽器擴(kuò)展。它允許開發(fā)者深入了解React組件樹的結(jié)構(gòu)和狀態(tài),以及組件之間的交互。
測(cè)試:Vitest / React Testing Library / Cypress
在 React 項(xiàng)目中,推薦使用以下框架進(jìn)行測(cè)試:
- 單元/集成測(cè)試:Vitest + React Testing Library
- 端到端測(cè)試(E2E):Cypress
單元/集成測(cè)試
Vitest 是一個(gè)基于 Vite 的下一代測(cè)試框架,旨在提供快速、高效的單元測(cè)試體驗(yàn)。它支持多種測(cè)試運(yùn)行器、測(cè)試框架和覆蓋率報(bào)告工具,可以為組件提供即時(shí)響應(yīng)的測(cè)試反饋。值得一提的是,Vitest 僅用了兩年時(shí)間,每周下載量就達(dá)到了 500w+。
Github:https://github.com/vitest-dev/vitest
React Testing Library 是一個(gè)專門為 React 設(shè)計(jì)的測(cè)試庫,它提供了一套用于測(cè)試React組件的API。它遵循“以用戶為中心”的測(cè)試?yán)砟?,專注于測(cè)試組件的功能和交互,而不是內(nèi)部實(shí)現(xiàn)細(xì)節(jié)。
Github:https://github.com/testing-library/react-testing-library
Vitest 和 React Testing Library 的結(jié)合使用,可以實(shí)現(xiàn)對(duì) React 組件的單元測(cè)試和集成測(cè)試。使用 Vitest 作為測(cè)試運(yùn)行器,結(jié)合 React Testing Library 的測(cè)試方法,可以構(gòu)建高效的測(cè)試流程。通過自動(dòng)化的測(cè)試執(zhí)行和結(jié)果驗(yàn)證,可以顯著提高測(cè)試的效率和準(zhǔn)確性。
單元測(cè)試可以針對(duì)組件的單個(gè)函數(shù)或模塊進(jìn)行測(cè)試,而集成測(cè)試則可以驗(yàn)證組件之間的交互和整個(gè)應(yīng)用的行為。
端到端測(cè)試
Cypress 是一個(gè)用于編寫端到端測(cè)試的開源 JavaScript 測(cè)試框架,專注于提供簡(jiǎn)單易用、可靠穩(wěn)定的測(cè)試環(huán)境,用于測(cè)試Web應(yīng)用。在 Vue 項(xiàng)目中,推薦其用于 E2E 測(cè)試,也可以通過 Cypress 組件測(cè)試運(yùn)行器來給 Vue SFC 作單文件組件測(cè)試。
Github:https://github.com/cypress-io/cypress
靜態(tài)站點(diǎn)生成器:Docusaurus
Docusaurus是 Facebook 開源的一個(gè)靜態(tài)站點(diǎn)生成器,旨在幫助用戶快速構(gòu)建美觀、易于維護(hù)的文檔站點(diǎn)。它提供了一套全面的工具和功能,使用戶能夠?qū)W⒂诰帉憙?nèi)容,而無需花費(fèi)大量時(shí)間和精力來構(gòu)建和設(shè)計(jì)網(wǎng)站。
GitHub:https://github.com/facebook/docusaurus
框架:Next.js / UmiJS
如果要做 SSR,Next.js 是非常好的選擇,而如果只做 CSR,Umi 會(huì)是更好的選擇:
- 客戶端渲染:Next.js
- 服務(wù)端渲染:UmiJS
Next.js
Next.js是一個(gè)輕量級(jí)的框架,用于構(gòu)建React應(yīng)用程序,它提供了許多增強(qiáng)功能,如服務(wù)器渲染、靜態(tài)生成、路由等,以簡(jiǎn)化開發(fā)流程并提高性能和開發(fā)體驗(yàn)。Next.js的核心目標(biāo)是通過使用React的服務(wù)端渲染功能,自動(dòng)將JS代碼編譯成DOM元素,從而簡(jiǎn)化SSR的開發(fā)過程,并提升應(yīng)用程序的性能。
目前,Next.js 的下載量在所有前端框架中排第二,僅次于 React。
Github:https://github.com/vercel/next.js
UmiJS
UmiJS 是螞蟻集團(tuán)開源的一個(gè)可擴(kuò)展的企業(yè)級(jí) React 應(yīng)用框架,Umi 以路由為基礎(chǔ),同時(shí)支持配置式路由和約定式路由,保證路由的功能完備,并以此進(jìn)行功能擴(kuò)展。然后配以生命周期完善的插件體系,覆蓋從源碼到構(gòu)建產(chǎn)物的每個(gè)生命周期,支持各種功能擴(kuò)展和業(yè)務(wù)需求。
相比于 Next.js,Umi 的擴(kuò)展性會(huì)更好;并且 Umi 做了很多更貼地氣的功能,比如配置式路由、補(bǔ)丁方案、Antd 的接入、微前端、國際化、權(quán)限等。
Github:https://github.com/umijs/umi
類型檢查:TypeScript / Zod
TypeScript
TypeScript 是 JavaScript 的一個(gè)超集,添加了靜態(tài)類型檢查和一些其他的語言特性。現(xiàn)代前端項(xiàng)目基本標(biāo)配 TypeScript,目前 TypeScript 的周下載量高達(dá) 5200 萬。
React 官方文檔中提供了在 Vue 中使用 TypeScript 的指南:https://zh-hans.react.dev/learn/typescript
Zod
Zod 是一個(gè)基于 TypeScript 的模式驗(yàn)證庫,提供簡(jiǎn)潔的 API 和編譯時(shí)類型安全,用于在運(yùn)行時(shí)驗(yàn)證 JavaScript 或 TypeScript 應(yīng)用中的輸入數(shù)據(jù)。它支持模式繼承、自定義錯(cuò)誤信息、異步驗(yàn)證,并能與 TypeScript 緊密集成,適用于需要嚴(yán)格數(shù)據(jù)驗(yàn)證的各種場(chǎng)景。
Github:https://github.com/colinhacks/zod
工具函數(shù):ahooks
ahooks 是一個(gè)由阿里巴巴團(tuán)隊(duì)開發(fā)的 React Hooks 庫,提供了一系列高效、易用的鉤子函數(shù),如數(shù)據(jù)請(qǐng)求、狀態(tài)管理、性能優(yōu)化等,旨在簡(jiǎn)化 React 應(yīng)用開發(fā),減少樣板代碼,并支持 TypeScript,適合用于構(gòu)建復(fù)雜和高效的前端應(yīng)用。
Github:https://github.com/alibaba/hooks
國際化:react-i18next
react-i18next 是一個(gè)用于 React 應(yīng)用的國際化(i18n)解決方案。它基于i18next庫,為React和React Native應(yīng)用提供了一種簡(jiǎn)單且靈活的方式來實(shí)現(xiàn)多語言支持。
通過提供useTranslation Hook和withTranslation高階組件,react-i18next 使得在React組件中使用翻譯變得非常簡(jiǎn)單。
Github:https://github.com/i18next/react-i18next
樣式:Tailwind CSS / Styled Components / CSS Modules
- CSS-in-CSS:CSS Modules
- CSS-in-JS:Styled Components
- 實(shí)用優(yōu)先:Tailwind CSS
CSS Modules
CSS Modules 是一種 CSS 文件組織技術(shù),它通過局部作用域封裝和自動(dòng)命名類名來避免樣式?jīng)_突,并提高組件的可維護(hù)性。它易于維護(hù)和組合,且與現(xiàn)代前端構(gòu)建工具和框架兼容,使得在大型應(yīng)用和組件庫開發(fā)中管理樣式變得更加安全和高效。
Styled Components
Styled Components 是一個(gè)用于 React 的 CSS-in-JS 庫,它通過標(biāo)記模板字面量提供了一種聲明式方式來編寫組件級(jí)的樣式,支持動(dòng)態(tài)樣式、主題、服務(wù)器端渲染,并與 TypeScript 兼容,使得樣式編寫更直觀、組件更易于維護(hù),同時(shí)避免了全局樣式?jīng)_突。
Github:https://github.com/styled-components/styled-components
Tailwind CSS
Tailwind CSS 是一個(gè)實(shí)用工具類優(yōu)先的 CSS 框架,它提供了一系列預(yù)定義的、高度可定制的工具類,使開發(fā)者能夠快速構(gòu)建響應(yīng)式和一致性用戶界面,而無需編寫傳統(tǒng)的 CSS。
Github:https://github.com/tailwindlabs/tailwindcss
UI 組件庫:Ant Design / shadcn-ui /Ant Design Mobile
- Web 端:Ant Design、shadcn/ui
- 移動(dòng)端:Ant Design Mobile
Ant Design
Ant Design 是一個(gè)基于 React 的企業(yè)級(jí) UI 組件庫,由螞蟻金服體驗(yàn)技術(shù)部開發(fā)。它提供了一系列高質(zhì)量的 React 組件,幫助開發(fā)者快速構(gòu)建美觀、易用的界面和應(yīng)用。
Github:https://github.com/ant-design/ant-design
**shadcn/ui **
shadcn/ui 是一個(gè)基于React的現(xiàn)代UI組件庫,它提供了豐富的可復(fù)用組件集合,允許開發(fā)者通過簡(jiǎn)單的復(fù)制和粘貼操作將組件集成到 Web 應(yīng)用中。
Github:https://github.com/shadcn-ui/ui
Ant Design Mobile
Ant Design Mobile 是由螞蟻金服體驗(yàn)技術(shù)部開發(fā)的一套移動(dòng)端 UI 組件庫,專為移動(dòng)應(yīng)用設(shè)計(jì)。這些組件遵循 Ant Design 的設(shè)計(jì)語言和開發(fā)模式,確保了在移動(dòng)端應(yīng)用中的一致性和用戶體驗(yàn)。
Github:https://github.com/ant-design/ant-design-mobile
桌面應(yīng)用開發(fā):Electron??Vite
Electron??Vite 致力于提供 Electron 與 Vite 結(jié)合的最佳社區(qū)實(shí)踐方案!它使得基于 Vite 開發(fā)的 Electron 工程變得十分簡(jiǎn)單!
Github:https://github.com/electron-vite/electron-vite-react
跨端應(yīng)用開發(fā):Taro / React Native / Expo
Taro
Taro 是一個(gè)由京東凹凸實(shí)驗(yàn)室開發(fā)的跨平臺(tái)多端統(tǒng)一開發(fā)框架,支持使用 React/Vue/Nerv 等框架來開發(fā)微信/京東/百度/支付寶/字節(jié)跳動(dòng)/ QQ 小程序/H5/React Native 等應(yīng)用。
Github:https://github.com/NervJS/taro
React Native
React Native 是 Facebook 開發(fā)的一個(gè)跨平臺(tái)框架,允許使用 JavaScript 和 React 技術(shù)棧來構(gòu)建高性能的原生移動(dòng)應(yīng)用。它支持一次編寫代碼,然后編譯到 iOS 和 Android 平臺(tái),提供接近原生應(yīng)用的性能和訪問設(shè)備原生功能的能力。
Github:https://github.com/facebook/react-native
Expo
Expo是一個(gè)基于 React Native 的框架,專為構(gòu)建可以在Android、iOS和Web上運(yùn)行的統(tǒng)一原生應(yīng)用程序而設(shè)計(jì)。它基于 React Native,但提供了更多的上層封裝和擴(kuò)展功能,使得開發(fā)者能夠更輕松地構(gòu)建和擴(kuò)展跨平臺(tái)應(yīng)用。Expo 是目前 React Native 官方推薦的創(chuàng)建 React Native 項(xiàng)目的方式。
Github:https://github.com/expo/expo
數(shù)據(jù)請(qǐng)求:Axios / TanStack Query
Axios
Axios 是一個(gè)靈活且基于 Promise 的 HTTP 客戶端,廣泛用于瀏覽器和 Node.js 環(huán)境中進(jìn)行異步的 HTTP 請(qǐng)求,支持請(qǐng)求/響應(yīng)攔截、數(shù)據(jù)轉(zhuǎn)換、取消請(qǐng)求等功能,簡(jiǎn)化了前端數(shù)據(jù)交互的復(fù)雜性。Axios 目前每個(gè)月有超過 2 億次下載,是目前使用最多的數(shù)據(jù)請(qǐng)求工具庫。
Github:https://github.com/axios/axios
TanStack Query
TanStack Query,也就是 React Query,它是一個(gè)用于 React 應(yīng)用的數(shù)據(jù)獲取和狀態(tài)管理庫,它通過自動(dòng)緩存、查詢重發(fā)、取消請(qǐng)求等功能,簡(jiǎn)化了從服務(wù)器獲取和管理數(shù)據(jù)的過程,提供了一種高效且易于使用的 API 來處理異步數(shù)據(jù)。
可以將 React Query 與 Axios 結(jié)合使用。React Query 本身是一個(gè)數(shù)據(jù)獲取和狀態(tài)管理庫,并不直接執(zhí)行 HTTP 請(qǐng)求,而是可以與任何數(shù)據(jù)獲取庫一起工作,包括 Axios。通過將 Axios 作為數(shù)據(jù)獲取函數(shù)傳遞給 React Query 的 useQuery 或 useMutation 等 Hooks,可以利用 Axios 發(fā)送 HTTP 請(qǐng)求,并由 React Query 處理數(shù)據(jù)的緩存和狀態(tài)更新。
Github:https://github.com/tanstack/query
可視化:ECharts / AntV
ECharts
ECharts 是一個(gè)基于 JavaScript 的開源數(shù)據(jù)可視化圖表庫,最初由百度團(tuán)隊(duì)開發(fā)并于2018年捐贈(zèng)給 Apache 基金會(huì)。它提供了直觀、生動(dòng)、可交互、可個(gè)性化定制的數(shù)據(jù)可視化圖表,廣泛應(yīng)用于Web開發(fā)中,支持多種圖表類型和豐富的配置選項(xiàng)。
Github:https://github.com/apache/echarts
AntV
AntV 是由螞蟻金服推出的數(shù)據(jù)可視化解決方案,它包括了一系列的可視化庫和工具,用于幫助開發(fā)者和數(shù)據(jù)分析師快速構(gòu)建高質(zhì)量的數(shù)據(jù)可視化應(yīng)用。AntV 的目標(biāo)是提供一套簡(jiǎn)單、專業(yè)、可擴(kuò)展的可視化工具集,以滿足不同場(chǎng)景下的數(shù)據(jù)可視化需求。
Github:https://github.com/antvis
表單:React Hook Form
React Hook Form 是一個(gè)用于 React 應(yīng)用的表單處理庫,它通過 React Hooks 提供了簡(jiǎn)單直觀的 API 來管理表單狀態(tài)、進(jìn)行驗(yàn)證和處理提交,非常適合需要快速開發(fā)和高度定制表單的場(chǎng)景。
Github:https://github.com/react-hook-form/react-hook-form
代碼格式化:ESLint / Prettier
ESLint
ESLint 是一個(gè) JavaScript 代碼檢查工具,它可以幫助開發(fā)者發(fā)現(xiàn)代碼中的問題,保證代碼質(zhì)量。它基于插件化的架構(gòu),允許開發(fā)者自定義規(guī)則和配置,以適應(yīng)不同的項(xiàng)目需求。
推薦使用以下 ESLint 規(guī)則集:
- eslint-plugin-react:https://www.npmjs.com/package/eslint-plugin-react
- eslint-plugin-react-hooks:https://www.npmjs.com/package/eslint-plugin-react-hooks
- eslint-config-react-app:https://www.npmjs.com/package/eslint-config-react-app
Prettier
Prettier 是一個(gè)代碼格式化工具,它通過解析代碼并使用自己的規(guī)則重新打印代碼,從而實(shí)現(xiàn)風(fēng)格一致。它支持多種編程語言,包括JavaScript、TypeScript、CSS、HTML等,并且可以與大多數(shù)編輯器集成。
Github:https://github.com/prettier/prettier。