React 有哪些優秀實用的組件？

01-03

雖然螞蟻金服的同學一直很低調，但我還是想為 ant.design 背個書。

嚴謹地說 ant.design 並不僅僅是一系列的 React 組件，更是 —— 按照他們自己的說法 —— 一個 UI 設計語言，包含了排版、字體、動畫、交互、布局等等，當然我們最關心的還是強大的 React 組件。

我認為 ant.design 與其它 React 組件最大的不同點在於嚴格區分了受控組件和非受控組件的概念。當你踏入 Flux 大坑之後就會發現，受控組件有多麼的重要。

另外根據小道消息，ant.design 背後的支持團隊規模不小，也就是說這些 React 組件由螞蟻的前端工程師在專職維護，不用擔心像其它開源項目一樣作者一不開心就不維護了。

鑒於我在公司很多內部項目都用了 ant.design，所以算半個利益相關吧，可恥的匿了……

為了背書更有說服力，就不匿了

竟然沒有人提到React官方的兩個重量級組件，補充下：

Draft.js | Rich Text Editor Framework for React

FixedDataTable

其他大部分都可以替代，這種重型庫還是交給官方搞，這也是為什麼覺得React並不完美但是還是很喜歡用的原因。

其中Draft.js真心是React對於其他前端庫具有壓倒性優勢的產品。

推薦螞蟻金服的antd 以及它背後的 react-components。

說antd是react組件是小瞧了它～

內部某後台使用了antd。

某一天開始，該產品方向的Pm老大規划了新功能，決定要新的視覺方案巴拉巴拉，一眾Pm 設計外加我這個前端，努力半天也沒能制訂出比antd-V0.11 開放的一系列標準更好的東西，相反比起來很差，做出的東西在交互設計方面都不及 antd這系列。

恰好我們是重業務需求，開發壓力較大的團隊，antd這樣的完整方案相當好的解決我們需求，只不過需要Pm 交互視覺等達成一致……

推薦一些優秀的套件集：

Material UI
非常高的 star 數，帥氣的 Material 設計規範實現，巨量 issue 和貢獻者，明星級的項目。激進地全局使用了 inline 樣式，可能會讓部分人群不適應。

React-Bootstrap

bootstrap3 設計，UI 上看著比較陳舊，最近的提交節奏有點慢。而且 bootstrap4 馬上就要出來了。

React Toolbox

同樣實現了 Material Design 的後起之秀，使用 css-modules，演示文檔內建了一個實時編輯器，非常贊。

Elemental UI

網站不錯，組件太少，設計風格有點像 Bootstrap。

React ui docs

國人開發，樣式使用了 yahoo 的 Pure，API 和文檔精緻。缺點是目前只有一個人開發維護。

Belle - Configurable React Components with great UX

風格素雅的一套 React 組件，組件數量較少。

TouchstoneJS

移動端 hybrid 的組件庫，iOS 風格。

MUI - Material Design React Framework

MUI 同時提供了 angular、react 、webcomponents 等版本的 MD 實現，組件數量較少。

jquense/react-widgets · GitHub

API 文檔極其精細，亮點之一是提供了一個屬性可視化操作的 playground，值得借鑒。例子：React Widgets

Reapp - Hybrid apps, fast

iOS 風格的移動端組件，組件數量多但文檔略少，主題定製和動畫支持良好。除了組件以外，對移動端開發提供了很多周邊模塊（路由、數據流管理，請求，服務端支持等）和實踐文檔。但是最近的提交記錄很少。

---

持續補充：

reactstrap - React Bootstrap 4 components

基於 bootstrap4 的新起之秀，文檔清新，推薦嘗試。

BFD UI

百分點的 React 套件庫，組件很全，風格淡雅，實現質量不錯，不知道為什麼 star 非常少。

Blueprint - A React UI toolkit for the web

剛剛推出的質量極好的組件庫，用 TypeScript 和 Scss 開發，功能強大，並且有自己的色彩和排版規範，推薦使用。

介紹下自己寫 React-UWP吧，實現微軟 UWP Design 和 Fluent Design 的 React 開源UI庫。

這是官方文檔 UWP and Fluent Design UI Libray by React

長這樣的...

對於快速開發網站和初學web而言，推薦使用Ant Design - One Design Language, Ant Design 不僅提供了一套完整且豐富的UI組件，而且提供了設計規範而且支持主題定製，除此之外，Ant Design的更新速度與其他許多UI libraries相比，更新速度快很多。此外，配套的Ant Motion - 一個 React 的動效設計解決方案也提供了很多動畫效果，即使是一個初學者也可以在很短時間內做出一個美觀且內容豐富的網站。

Material-UI 使用google的設計標準，是一套國際化的UI庫，在github上也具有超高的人氣。個人認為其最大的優點是豐富的樣式定製，component的幾乎每一部分的style均可自定義。

React-MDL(https://react-mdl.github.io/react-mdl/) 也是一款使用material design標準的react UI library. 個人最喜歡其Grid（https://react-mdl.github.io/react-mdl/components/grid/）的部分，該部分使用了booststrap的布局思想，控制每個component的比例，是否在desktop、tablet、phone，使開發人員能夠輕鬆的適配不同設備。

如果作為一個從常規html+css開發模式轉向react前端開發人員， React-Bootstrap 、https://react.foundation/ 和 Semantic UI 都是不錯的推薦。

推薦一個我們團隊的 React-web taobaofed/react-web 可以直接把你 RN 的代碼用 React 轉成瀏覽器也能訪問的代碼。

雖然螞蟻金服拒了我，不過 Ant Design 這個組件庫確實好用，還有recharts是基於react和D3的數據可視化庫，雖然公司的項目里還沒用，但是也挺看好這個組件庫的（echarts的API在我這個菜鳥看來真的是又雜又亂，畢竟我不是專業搞前端數據可視化的，逃）。

antd.design

Materail

強推這兩個，主要是好看好用

React 怎麼會有「插件」的概念？

我猜你問的是：React 有哪些優秀實用的組件？

React 倉庫的 wiki 里可以找到一些：Complementary Tools · facebook/react Wiki · GitHub

如果讓我推薦，可以看一下 react-web 。

它類似 Bootstrap，「小而美」，非常適合中小公司無線業務的快速落地。

易上手，功能完備，可以實現普遍的無線應用場景。

一個足夠開腦洞的方式

acdlite/recompose: A React utility belt for function components and higher-order components.

可以嘗試用類似的思維，拆分組件的狀態和樣式。

原生組件么。。

doc/common-components.md at master · beefe/doc · GitHub

今天端午節第一天，擼了一天代碼，中午午睡了一會，八個小時，成果 http://iReact.cn ，收集好用的react組件，歡迎大家搜索和提交…目前只有150 個項目，希望大家積極提交，pr或者issue都可以…

截圖如下，手機碼字。

界面有木有覺得很熟悉，不錯，用react改寫http://microjs.com…

額，不怎麼使用react，不過從原理上說，react應該沒有什麼插件的概念，有部分實用的mixin，你可以去找找。

謝邀

elementalui

github上面有一個開源項目，羅列了很多react的組件awesome-react-components( brillout/awesome-react-components)

實際我自己在開發過程中用過

1. react-bootstrap（頁面美化，響應式，它是基於bootstrap3的，當然在前面的回答中也有一個基於bootstrap4的項目reactstrap），當然還有各種實現了google material design風格的類庫

2. react-router，前端分頁，作為spa應用的必備

3. redux，不用說了，一個是實現了flux單向數據流管理的工具，facebook自己也有一個類似的叫做relay，但是它的知識棧更廣。

4. fixed-data-table，facebook出品的datagrid組件

5. 增強型的input組件，react-wigets，提供了很多使用的組件

6. 還有一個notification和提示用戶頁面載入的，等等

icecreamliker/uskin，還不錯，目前組件不完全，但能滿足絕大部分使用場景，會在三個月內完善。

目前對外還沒有完成開放所有組件庫，樣式還不錯，api使用文檔還沒有寫，但是demo和例子都在docs下都有，readme好久沒有更新，最近會更新一下，因為這個是內部項目，所以是雙源同步的。

和ant比起來，組件沒有他們全，但代碼儘可能寫的精小；它們的東西更加大而全，uskin追求的是落地，因此會和我們實際的應用場景掛鉤，以後還會添加最佳實踐等東西，教大家如何優化代碼。api方面借鑒了ant的一些設計理念。

主要是給大家提供另外一套配色方案，這套配色方案我們已經用了2.5年，反饋還不錯；爭取近期上一個新的配色主題。同時，在raw_materials目錄下有一些設計資料，希望可以給大家有所啟發。在docs/theme_color目錄下，有色板提供，希望能幫助到大家。

Stateless Functional Component，是我個人最愛的React組件優化模式。它們能夠減少大量的模板代碼，而且因為它們能夠有效地提高組件的性能表現。，SFC能夠讓你的應用跑的更快，長的更帥。實際上，SFC最迷人的地方不僅僅是其代碼量的減少，還有就是對於可讀性的提高。http://tinyurl.com/hbapn5sSFC模式本身就是所謂純組件的一種最佳實踐範式，而移除了構造函數並且將_handleClick()這個點擊事件回調函數提取出組件外，可以使JSX代碼變得更加純粹。

怎麼沒有人說ReactStrap和React Bootstrap，我就在用ReactStrap。import "antd-mobile" 報錯，網上搜了一下，遇到這個問題的人還真不少，就不敢再繼續用了。還是Bootstrap系列用起來方便，最終選擇了ReactStrap

新手入門推薦一下這個框架

GitHub - bodyno/react-starter-kit: 完美使用 React, Redux, and React-Router!

絕對十分適合新手

下下來運行一下就知道所在react redux route 的流程了

真的感覺不錯