原文翻譯自：
https://www.robinwieruch.de/react-libraries，作者：ROBIN WIERUCH。
如有翻譯不準確，請多指正！
React框架面世已經有一段時間了，從應用到現在圍繞組件驅動的庫已經發展成了一個非常全面的生態系統。但是對於長期使用其他編程語言或框架的開發人員來說，完全弄清React的構建模塊，並且用這個框架去進行web應用程序開發並不是一件容易的事。
使用Angular框架時，程序員們往往習慣於掌握使用所有必須的功能，但是React並不要求程序員們如此，補充庫有更多發揮的空間。React這一點對於程序員來說是好還是壞因人而異，看個人的使用習慣與思考方式。但是對於我來說，當我切換框架使用React之後，感覺這點帶來很大的便利。
首先React只支持開發者利用功能組件和道具來進行用戶界面的構建，而這個用戶界面正是依靠組建驅動。但有一點好處，就是React帶有一些內置解決方案。例如，用於本地狀態和副作用的ReactHooks，也大可不必擔心只可以在本地狀態下操作，因為其他的地方你也用不上。
而這個補充庫十分龐大，如何選擇素材構建React應用程序成為一個難題。但是不用擔心，下面這篇文章將給大家帶來一些有根據的建議，大家可以參考參考，也可以在下方留言我們一起交流哦。
01
如何入門React
- 對於所有React框架的初學者來說，首先疑惑的就是進入react之後如何創建一個react項目。而react針對這個問題為入門者配備了很多項目，每一個項目滿足用戶不同的需求，而使用者可以根據自己的需要進行任意選擇。目前react社區配備有Facebook提供的CRA，而CRA帶有零配置設置，可讓用戶以最低限度的方式啟動和運行React應用程序。另外因為所有的工具都是隱藏在界面之中的，所以用戶可以根據自己的需求將部分功能拖拽到界面。
- 如果您已經熟悉React，你可以自由選擇Next.js和Gatsby.js這兩個流行工具包中的一個。這兩個框架都建立在React之上， Next.js用於服務器端渲染（例如動態Web應用程序），而Gatsby.js用於靜態網站生成（例如博客，登陸頁面），二者有不同的功能作用，但是要使用二者之中的任意一個，都要求你對react的基礎知識有一定的掌握。
- 如果你只是想了解這些入門工具包的工作原理，你可以嘗試從設置React項目開始。但是首先你要從使用JavaScript和HTML開始，之後再添加帶有支持工具的React。
- 如果您想選擇一個自定義樣板項目，那麼你就不要期望這個項目可以解決所有問題滿足所有需求，而你真正要做的是儘量縮小樣板體量，使項目有針對性的解決主要問題。 就像gatsby-firebase-authentication樣板中“ only”在Gatsby.js應用程序中只提供了Firebase的完整身份驗證機制，而對於其他問題基本上是忽略的。
建議：
1.create-react-app是為React初學者/高級創建
2.Gatsby.js用於React中靜態網站
3.React中的Next.js用於服務器端
4.瞭解底層工具可以通過定製React項目
02
React狀態管理
React帶有用來管理本地狀態的hooks，例如：useState、useReducer、useContext。這些hooks可以用於react中複雜的本地狀態管理。不僅如此，你還可以利用它們來模擬製作react中的流行狀態狀態管理庫Redux。
同時React中的所有內置hooks都非常適合本地狀態管理。這裡有幾個使用建議，在進行遠程數據的狀態管理時，如果遠程數據帶有GraphQL端點，那麼建議使用ApolloClient，而Apollo客戶端的替代方案則推薦urql和Relay。
如果遠程數據不是來自GraphQL端點，可以嘗試使用React的Hooks對其進行管理。如果無法解決問題，則可以使用Redux或MobX/ Mobx狀態樹之類的解決方案。如果以上情況你都無法滿足，可以翻閱react教程看“全面狀態管理”章節。
建議：
1.本地狀態時可以使用React的useState，useReducer，useContextHooks內置hooks進行管理
2.通過GraphQL的遠程狀態可以使用Apollo客戶端管理
3.通過REST進行遠程狀態可以使用ReactHooks或Redux/ MobX / Mobx狀態樹進行管理。
03
用ReactRouter解決路由問題
路由在React應用程序中起著重要作用，因為React在幫助實現實現單頁應用程序時需要路由維護好客戶端。但是引入複雜的路由器時，React只有少數幾種路由解決方案，最值得期待的解決方案是ReactRouter。
當你正處於react入門階段，而恰巧正要在應用程序中引用一個略顯笨重的路由時，你可以考慮嘗試react條件渲染，它不是路由的合理替代，但在小型應用程序中，以這種方式交換組件通常就足夠了。
建議：
使用ReactRouter解決方案
04
React——樣式庫
關於React中的樣式多種多樣，大家也有不同的使用意見。而對於React初學者來說，從內聯樣式和CSS開始就很好了：
在React中用JavaScript以動態或者編程方式添加樣式時，可以考慮使用內聯樣式外部CSS文件可以為你在react應用程序中保留剩餘樣式。另外隨著你的應用程序增長，相應的樣式選擇也會更多。
首先，我們建議你將CSS模塊作為許多CSS-in-CSS解決方案之一進行研究。CSS模塊受create-react-app支持，併為用戶提供了一種將CSS封裝到模塊中的方法。這樣，它不會意外洩漏到其他React組件的樣式中。儘管用戶的應用程序的某些部分仍可以共享樣式，但其他部分不用訪問它。而在React中，CSS模塊通常是共同放置在用戶React組件文件中的CSS文件。
其次，我們向大家推薦樣式化組件，樣式化組建是React中許多CSS-in-JS解決方案中的一個。之所以叫做樣式化組建，是因為這種方法通過叫做“樣式組件的庫”提供，該庫將樣式與JavaScript一起放置在React組件旁邊：
最後，向大家推薦TailwindCSS作為功能性CSS解決方案：
而無論你是使用CSS-in-CSS,CSS-in-JS, 還是功能性CSS這都取決於你自己，但不管哪一種解決方案，都可以在較大的react應用程序中進行相應的擴展。
建議：
CSS-in-CSS與CSS模塊
具有樣式化組件的CSS-in-JS
帶有TailwindCSS的功能CSS
05
React——UI庫
當你不想從頭開始構建所有必需的ReactUI組件，可以選擇一個ReactUI庫來完成這項工作。它們都帶有一些基本組件，例如按鈕，下拉菜單，對話框和列表。
同時ReactUI庫並不唯一，可以有很多種選擇：
AntDesign
ChakraUI
TailwindUI
SemanticUI
MaterialUI
ReactBootstrap
06
React——動畫效果
Web應用程序中的任何動畫均以CSS開始，但最終你會發現CSS動畫不足以滿足需求。這時，開發人員會使用ReactTransition Group，這使他們可以使用React組件執行動畫。
React的其他知名動畫庫有：
react-motion
react-spring
FramerMotion
Animated（ReactNative）
建議：
ReactTransition Group
07
React——可視化和圖表庫
如果你真的想自己從頭開始構建圖表，那麼無法繞開D3。這是一個底層的可視化庫，可以為大家提供創建令人驚歎的圖表所需要的一切。拋開去學習D3的彎路，開發人員選擇了一個React圖表庫，圖表庫可以為用戶提供很多便利，提高效率。下面是一些流行的解決方案：
Nivo
Victory
react-vis
Recharts
ChartParts
08
React——表單庫
React中最受歡迎的表單庫是Formik。它包含從驗證到提交再到表單狀態管理所需要的一切。同時這裡還有一種替代方法：ReactHook Form。當你進行更復雜的表單處理時，這兩個都是React應用程序有效的解決方案。
建議：
Formik
ReactHook Form
09
React——數據讀取庫
之後，你可能面臨向遠程API發出請求，以在React中獲取數據的情況。而現代瀏覽器則隨附本機訪存API來執行異步數據請求，基本上，你不必添加任何其他庫即可完成這項工作。
當然這裡還存在僅僅作為提供複雜的異步請求而存在的庫。這些庫具有強大的功能，但還是適用於體量小（輕量級）的應用程序。而當你的應用程序體量增大時，你可以使用其中一種叫做axios的庫，用它使用它代替本機獲取API。
當然如果你願意使用GraphQLAPI，也可以使用ApolloClient。替代的GraphQL客戶端可以是urql或Relay。
建議：
thebrowser's native fetch API
axios
ApolloClient
10
React——檢查
幸運的是React自帶檢查功能——PropTypes，用這個工具可以定義React組件中傳入的props。程序運行時，如果有任何錯誤樣式輸入組件，用戶都能夠收到通知出現錯誤輸入的信息。但是這種類型的樣式檢查同樣有規模限制，只能用於體量較小的應用程序。
因此在一個體量較大的React程序中，我們可以選擇 TypeScript,而不是PropTypes進行檢查，因為Typescript為整個應用程序增加了一層樣式安全保護。相對於在運行之中才能發現錯誤的PropTypes,Typescript可以在開發過程中就通報錯誤。對於可以阻止這種樣式檢查的BUG，開發者也不用再特意去運行程序進行檢查。這種方式的檢查也許可以提高用戶的開發體驗，也可以避免開發者在一開始就引入錯誤。
建議：
TypeScript
11
React——代碼風格
進行代碼風格選擇時要遵循共識，這裡有以下三種選擇建議：
第一種：遵循社區所接受的風格指南。由Airbnb開源的React風格指南就是最近流行社區的其中一個。即便你沒有刻意遵循這樣的風格指南，也應該閱讀一下以獲取React中常見代碼樣式的要點。
第二種方法：運用一些諸如ESLint的小程序。樣式指南只會給你提供建議，但是這種小程序可以幫助你將建議應用在程序中。舉個例子，在進行程序設計時你可以要求遵循流行的Airbnb風格指南，這個時侯IDE/編輯器自然而然會指出實際運行中的所有錯誤。
第三種方法最受歡迎：運用Prettier，這是一個代碼格式化程序。你可以將其集成到編輯器或IDE中用於保存文件時的代碼格式化。可能這種程序進行的格式化並不符合你的口味，但是至少你不必再過多操心自己或團隊代碼庫中的代碼風格。同時儘管Prettier不能代替ESLint，但是兩者可以進行集成使用。
建議：
ESLint
Prettier
12
React——認證
在更大的React應用程序中，你可能希望引入帶有註冊，登錄和註銷功能的身份驗證。另外，經常需要密碼重置和密碼更改功能。這些功能不在React範圍之內，你可以依靠後端應用程序處理這些事情。
而常見的方法是使用自定義身份驗證來實現自己的自定義後端應用程序，如果您不想使用自己的身份驗證，可以考慮使用Passport.js之類的東西。
但是如果你不考慮後端的話，可以選擇以下三種方法：
Firebase
Auth0
AWSCognito
另外如果你還想尋求一種集身份驗證+數據庫的多合一解決方案，可以考慮堅持使用Firebase或者AWS。
建議：
DIY:Custom Backend
Getit off the shelf: Firebase
13
React——託管
你可以像其他任何Web應用程序一樣部署和託管React應用程序。但如果要完全控制，可以選擇“DigitalOcean”。而如果你想要由其他東西來處理所有事情，那麼可以選擇Netlify這個解決方案。
另外如果你已經在使用第三方身份驗證或者是數據庫（例如Firebase），則可以檢查他們是否也提供託管（例如Firebase託管）服務，同時你還可以將S3的靜態站點託管與Cloudfront一起使用。
14
React——測試
想要深度瞭解React中的測試，你可以從學習如何在React中測試組件開始。首先我們要明白測試React應用程序的主幹是Jest。它具備斷言庫、spying、mocking、stubbing功能，同時還有全面的測試框架所需要的一切。
至少也可以使用react-test-renderer在Jest測試中渲染React組件，這也已經足夠用來執行所謂的“帶有Jest的快照測試”。
快照測試的工作方式如下：運行測試後，將創建React組件中渲染DOM元素的快照。當你在某個時間點再次運行測試時，將創建另一個快照，這個快照用來和前一快照進行差異對比。如果差異不相同，Jest會發出訊息，這時你要麼必須接受快照，要麼更改組件的實現方式。
最終，你會發現自己使用了Enzyme或ReactTesting Library（它們也都在Jest測試環境中使用），以獲得更詳盡的測試功能集。這兩個庫都可以渲染組件並模擬HTML元素上的事件。之後，可以將Jest用於DOM節點上的斷言。
而如果您正在尋找用於React端到端（E2E）測試的測試工具，Cypress是最受歡迎的選擇。
建議：
Unit/Integration/SnapshotTests: Jest + React Testing Library
E2ETests: Cypress
15
React——實用程序庫
JavaScript提供了許多內置功能來處理數組，對象，數字，對象和字符串。React中最常用的JavaScript內置功能之一是內置的map（）數組。這是因為你必須始終在組件中呈現出一個項目列表。由於JSX是HTML和JavaScript的混合體，因此您可以使用JavaScript映射數組並返回JSX。使用React可以輕鬆創建列表組件：
但是，您可能會不得不選擇一個實用程序庫，這個實用程序庫可以給你提供更詳盡的功能。因為在鏈接這些實用程序功能甚至是將它們動態地彼此組合在一起時，你可能希望這個操作可以變得更靈活一些，而這時就是你引入實用程序庫Lodash或Ramda的最佳時機。
對於每個JavaScript開發人員來說，Lodash是最紮實的庫，而在函數式編程開始發揮作用時，Ramda顯示具有強大的內核，兩者各有其突出的地方。但遺憾的是，儘管JavaScript給大家提供了很多現成的功能，但實際上現如今使用實用程序庫的必要性已經降低了。
建議：
JavaScript
Lodash
16
React與不可變的數據結構
原生JS提供了許多內置工具來處理數據結構，使其不可變。然而如果你和你的團隊需要實施不變性的數據結構時，可以選擇這個工具。同時Immer還可以與redux或reacthooks結合使用。雖然我個人不使用它，但是一旦涉及到JS的不變性，這個工具都會被提及，具有一定的作用價值。
17
React——國際化
當涉及到React應用程序的國際化（i18n國際化(internationalization)的簡稱，之所以叫i18n，是因為字母i和n之間有18個字母，所以才叫i18n）時，您不僅需要考慮翻譯，還需要考慮多元化，日期和貨幣格式以及其他的一些事情。以下是處理這些問題最受歡迎的庫：
react-i18next
react-intl
LinguiJS
FBT
建議：
react-i18next
18
React——富文本編輯器
為大家推薦兩個我已經使用過的React之中的富文本編輯器：
Draft.js
Slate
19
React——付款方式
像在其他任何Web應用程序中一樣，最常見的支付方式是Stripe和PayPal。兩者都可以整齊地集成到React中使用，成為React集成下的有效支付方式：
PayPal
StripeElements或者StripeCheckout
20
React——時間
如果你的React應用程序需要處理許多日期和時區，你可以選擇引入一個庫幫助處理，而最受歡迎的庫是moment.js。或者是另一種更輕巧的替代方法date-fns和Day.js。
21
React——桌面應用程序
Electron是跨平臺桌面應用程序的首選框架，但是除此之外你還有其他選擇，比如：
NW.js
Neutralino.js
22
用React進行移動開發
我猜想將React從電腦端引入移動設備的首選解決方案仍然是ReactNative。如果你是要創建Web應用程序的ReactNative開發人員，那麼你應該對ReactNative Web進行確認。
23
React——VR/AR
React用於潛入虛擬現實或增強現實中具備可操作性。而涉及到React中的AR/ VR時，我首先想到的就是這幾個庫，雖然我還沒有使用過它們，但大家有需要的話可以試試：
React360
react-viro
react-native-arkit
24
用React編寫文檔
如果你正在為你的軟件編寫文檔或者是UI庫以及其他的一些東西，那麼這裡有幾個推薦的React文檔工具，比如我用過的感覺很不錯的Storybook，還有就是：
Styleguidist
docz
Docusaurus
最後我想總結的是：React生態系統可以看作是React的框架，但是仍然具有一定的靈活性。這種靈活性體現在：
你可以在這個框架中任意添加你所需要的庫。當然也可以從小項目開始，僅僅添加為你解決特點問題的庫。同時你也可以在應用程序體量擴展的過程中拓展你的構建基塊。
另一方面你也可以使用普通的React來保持輕量級。最後，我們有根據的再次為大家列出一些庫，這些庫可以針對不同規模的項目，對作為應用程序核心的React進行一定的補充。同時，我們也非常希望收到大家的反饋，歡迎大家積極留言哦。
小型應用程序：
Boilerplate:create-react-app
StylingLibraries: basic CSS and inline style
AsynchronousRequests: fetch or axios
CodeStyle: none
TypeChecking: none
StateManagement: React Hooks
Routing:none or React Router
Authentication:Firebase
Database:Firebase
UILibraries: none
FormLibraries: none
TestingLibraries: Jest
UtilityLibraries: JavaScript
Internationalizing:react-i18next
ReactDesktop: Electron
MediumApplication
Boilerplate:Next.js or Gatsby.js
StylingLibraries: CSS Modules or Styled Components
AsynchronousRequests: fetch or axios
CodeStyle: Prettier, ESLint
TypeChecking: none or TypeScript
StateManagement: React Hooks and/or Apollo
Routing:React Router
Authentication:Firebase
Database:Firebase
UILibraries: none or UI component library
FormLibraries: none or Formik or React Hook Form
TestingLibraries: Jest with React Testing Library
UtilityLibraries: JavaScript
Internationalizing:react-i18next
ReactDesktop: Electron
大型應用程序：
Boilerplate:Next.js, Gatsby.js, custom setup
StylingLibraries: CSS Modules or Styled Components
AsynchronousRequests: axios or Apollo Client
CodeStyle: Prettier, ESLint
TypeChecking: TypeScript
StateManagement: React Hooks and/or Apollo/Redux/MobX
Routing:React Router
Authentication:Solution with own Node.js Server + Passport.js
Database:Solution with own Node.js Server with a SQL/NoSQL DB
UILibraries: UI component library or roll your own UI components
FormLibraries: none or Formik or React Hook Form
TestingLibraries: Jest with React Testing Library and Cypress
UtilityLibraries: JavaScript Platform APIs, Lodash
Internationalizing:react-i18next
ReactDesktop: Electron
Theprevious recommendations are opinionated. You can choose your ownflexible framework for your ideal React application. Every "ideal"React setup is subjective to its needs of the developers and project.After all, there is no ideal React application setup.
我們之前的建議是有一定的根據和針對性的。而每一個開發者和項目都對 React應用程序有著不同的需求，在設置上也會有不同的要求，因此沒有最理想的React應用程序設置，只有最適合的。所以你可以為自己心中理想的React應用程序選擇一個合適的靈活的框架，而不必拘泥於其他。
