最近一直在使用React.js開發專案，在開發過程中也用到了一些開源UI元件庫。上次有給大家分享React移動端元件庫，今天，就給大家推薦9個常用React PC端元件庫。

1、Element-React

element-react | 餓了麼團隊出品的一套為開發者、設計師等準備的基於 React 的 PC端元件庫，是 ElementUI 的 React 版本。

https://elemefe.github.io/element-react/index

https://github.com/ElemeFE/element-react

安裝

$ npm i element-react -S// 安裝主題包$ npm i element-theme-default -S

使用

antd | 阿里巴巴團隊出品的基於 Ant Design 設計體系的 React UI 元件庫。

主要用於研發企業級中後臺產品，有自己獨特的設計風格和理念。在支付寶、螞蟻金服等多個阿里專案中投入使用。元件化品質非常高，開箱即用。

https://ant.design/docs/react/introduce-cn

https://github.com/ant-design/ant-design/

特性

提煉自企業級產品的互動語言和視覺風格。開箱即用的高品質 React 元件。使用 TypeScript 開發，提供完整的型別定義檔案。全鏈路開發和設計工具體系。數十個國際化語言支援。深入每個細節的主題定製能力。

安裝

$ npm i antd -S

使用

3、Zan UI

Zent | Zent ( \\ˈzent\\ ) 是 有贊 PC 端 WebUI 規範的 React 實現，提供了一整套基礎的 UI 元件以及一些常用的業務元件。

目前我們有 50+ 元件，這些元件都已經在有讚的各類 PC 業務中使用，並會在此基礎上，持續開發一些新元件。

https://youzan.github.io/zent/

https://github.com/youzan/zent

特性

高品質 React 基礎元件及豐富的業務元件內建 TypeScript 型別定義檔案支援定製主題程式碼/樣式按需載入一套有贊設計師繪製的圖示庫

安裝

$ npm i zent -S

使用

4、React Bootstrap

react-bootstrap | 一款基於 ReactJS 對 Bootstrap 進行封裝前端元件庫。

元件依賴於bootstrap。與 Twitter Bootstrap 一致外觀與感受，通過 Facebook 的 React.js 框架獲得更清爽程式碼。

https://react-bootstrap.github.io/

https://github.com/react-bootstrap/react-bootstrap

安裝

$ npm i react-bootstrap bootstrap -S

使用

5、Evergreen

evergreen | Segment 推出的 React 元件庫，風格簡單好看。

用於在web上構建企業級Web應用程式，擁有豐富的元件、具有無限的可組合性、開箱即用。

https://evergreen.segment.com/

https://github.com/segmentio/evergreen

安裝

$ npm i evergreen-ui -S

使用

6、React Suite

rsuite | 一套基於 React 的 UI 元件庫，貼心的 UI 設計，友好的開發體驗，為中後臺產品而生。

https://rsuitejs.com/

https://github.com/rsuite/rsuite

安裝

$ npm i rsuite -S

使用

7、Base Web

baseweb | Uber 出品的 React web元件庫，黑色主色風格，網站體驗不錯。

https://baseweb.design

https://github.com/uber/baseweb

安裝

$ npm i baseui styletron-engine-atomic styletron-react -S

使用

8、React Belle

belle | 提供一系列漂亮的，可配置的元件，包括扁平按鈕、開關、下拉列表框、評分、文字輸入、卡片等等。

http://nikgraf.github.io/belle/https://github.com/nikgraf/belle

安裝

$ npm i belle -S

使用

9、SHINEOUT

shineout | 一個更加輕量、快速、高效能的基於React的pc端元件庫。

https://shine.wikihttps://github.com/sheinsight/shineout

安裝

$ npm i shineout -S

使用

❤️ 最後