哪裡有比較成熟的 React.js 項目案例？

01-05

我對reactjs功能性的使用沒有問題，但是缺乏對其構建整體網頁的使用方法的感覺。
因為reactjs本質上是一個component的模板，但是對其處理css問題我沒有想到一個很好的解決方法，即各個component如何靈活地布局其css。比如我之前經常使用bootstrap構建網頁，但當時沒有結合進reactjs。

瀉藥，簡單給大家彙報下吧，淘寶前端團隊里在PC與無線Web都有比較完整的應用：

1. @梧忌同學基於React+KISSY重構的已買到頁面

2. @九十同學基於React+KISSY實現的淘寶懂我新業務

3. @七念同學基於React+KISSY實現知了業務

4. @自寒在無線端基於React實現的交易鏈路

....

另外我自己抽空也寫過些開源的基於React的組件：

1. yuanyan/boron · GitHub 451 Stars

2. yuanyan/halogen · GitHub 403 Stars

3. yuanyan/react-timesheet · GitHub 44 Stars

...

------

所以你問哪裡有，不用找藍翔，來淘寶就有

阿里數據技術與產品部全線產品使用React，已經一年時間

月用戶量千萬級

我也有類似的經歷，我的方法是用React重新寫一個blog或個人網站，寫完以後就對React有了些基本的認識了。

覺得React學得水平不錯，並且Node也還可以，可以直接用這個：

relax/relax · GitHub

這是一個完全用React和Node寫出來的CMS，同時使用MongoDB，Clone以後可以自己修改，pull request之類的。

另外一個CMS 叫Cosmic JS | Cloud-Hosted Content Management Platform, API-First CMS

攻略：Building a React Universal Blog App: A Step-by-Step Guide

另一個方法，是我使用的，適合初學者：

Automattic/Picard · GitHub

這是以wordpress為CMS，然後用 WP-API/WP-API at master · GitHub 插件，使用Picard為你的wordpress主題，好處是你不用寫Node和處理資料庫了，你只需要clone Picard到wp-content/themes 里就行了，接下來就可以自己鑽研下React了。

同理你也可以使用WP-API和React Native做一個手機APP。Creating a Mobile App with WP-API and React Native

比較喜歡的一個React UI庫： Material UI

希望能幫助到你。

豆瓣市集移動版本全部使用了 es6+react+redux 的方式來開發

最新的版本為了解決 css 全局命名衝突，我們使用了 css-modules 的方式來組織樣式

組件化的最大的特點就是當你的項目里有了足夠的 components 時，很多新需求，其實完全就可以直接套幾個 components 就直接實現了。

另外，使用 redux 真爽啊！！！

有個自己做了很久的項目，之前是用backbone寫的，現在用react幾乎完全重構了一遍。http://www.bpzufang.com

淘寶最核心的頁面『下單』頁面已經是 React 的了。

就是點擊『立即購買』跳轉到的頁面。

GitHub - jianliaoim/talk-os: Open source version of jianliao.com - 簡聊

打個廣告，淘寶「已買到」已經是React，跟商家相關的旺旺、千牛、crm等許多項目也都是React+Redux+ES6，以及內部也有成熟的基於React的DPL

另外，我們繼續招人，技術方案也是題主提到的，私聊。

謝邀。

React 在樣式管理上還沒有一個能讓我滿意的解決方案，現有的一些嘗試比如這些：

React: CSS in your JS by Christopher Chedeau on Vimeo

Class Name Manipulation

JedWatson/classnames · GitHub

js-next/react-style · GitHub

vjeux/radium · GitHub

但是我認爲這些方法都無發適應大型項目，畢竟我們會依賴很多現有的樣式庫，而使用這些方法會出現非常多的兼容性問題。

如果你只是非常依賴於 Bootstrap，那你可以嘗試使用一下 React Bootstrap 這個。

我目前的做法仍是循規蹈矩地手寫 className，然後控制我的 CSS 全局變量，雖然維護成本高一些，但是我覺得使用不成熟且不兼容的技術解決這些問題要花費更多時間。

支付寶pc新收銀台就是react實現，已經灰度約五分之一用戶。沒有遇到不可抗缺陷

可以把布局抽象成一個layout component 由prop配置相應bootstrap配置，如row=4-2-4，layout內拼出className，這步好理解，還差一步，這個layout要支持組建內嵌子components, 繼續row的例子，含三子組件就分別放在424的布局結構里，更多場景就是邏輯上的事了

以上只是例子，組件粒度由你項目決定，比如row也可封為react組件再用

對boots僅是了解，或搞複雜了，本身已經是樣式組件，通過react prop生產出b的class即可，你喜歡就好

先回答你的問題，比較成熟的 React.js 案例，可以參考：ianobermiller/nuclearmail · GitHub

關於如何處理 CSS 的問題，React 的官方 Tips 有：Inline Styles ，結合 FormidableLabs/radium · GitHub ，可以達到組件內對樣式的封裝控制。但這種做法很激進，拋棄了 CSS 選擇器。

據我所知，國內使用 React 的大型項目還不多。淘寶正在做前端組件化方面的探索，也在嘗試使用 React ，歡迎感興趣的朋友來結對編程；）

關於 @rank 所說的，我有不同的看法：

HTML/CSS 合成 JSX，UI 開發（非復用）上的易用性不足：

組件的封裝職責明確，不會存在「重量級」組件，那麼在組件內寫 inline styles 比起寫 CSS 文件還要輕鬆。
將片段的 HTML/CSS/JavaScript 編成 JSX：這又是何苦，編寫組件本身就是在抽象 UI 的展示／交互的邏輯，就寫在一塊兒，我覺得很清晰。
寫 inline style 現在最缺的就是在 IDE 里能有 CSS 代碼提示

別扯雞巴蛋

直接看代碼

https://github.com/andrewngu/sound-redux/

全站：http://m.maizuo.com/

talk.ai 你註冊進到應用部分就全部是React了

之前是想學React-Native來簡化APP開發的，就先學了React.js，目前反而也只是在用React.js + Webpack做做H5的小項目，用它做項目也做了十幾個了吧，因為我算是後端轉前端，感覺React.js是我一直在尋找的WEB前端開發方式，模塊化、全代碼、邏輯易分離、易做配置、各種自動化工具（less、autoprefixer、uglifyjs、fontmin....+自定義工具）一旦上手並形成自己的開發模式做項目不僅快，而且不易出錯（不會陷入傳統開發中的一堆堆雜亂的Html中）。

當然，React.js也有不足，我覺得最大的不足是SEO，所以我目前只在手機H5上使用，另外雖然說是DOM優化很高，但還是盡量少的更改state吧，有時會帶來性能問題，也容易與動畫中的DOM產生衝突。

至於React-Native目前就不太看好了，因為我發現原生開發並沒有那麼難，學RN的時間差不多也學會原生開發了吧（學RN同樣要了解原生開發的部分內容），而且大多APP項目還都是用原生在做，所以不管是iOS還是Android，我還是選擇了使用原生代碼開發APP。

webapp項目中直接拿來用的感覺很少，大多借鑒組件化和vdom的思路到現有項目！React.使用場景其實很受限！

對前端來說，通過react native能寫app才是興奮點，主要是它真的是native。不用再擔心使用PhoneGap因為流暢度被吐槽了。。

我要是沒看錯的話

http://image.baidu.com/i?tn=wiseindexwiseps=1

百度無線圖片的webapp頁面採用了 reactjs

你看這麼久怎麼不看知乎，知乎也是react寫的

這是我自學的時候寫的TsaiKoga/lilu_movie，可以查看commit，有一些解釋。

我公司可能是第一批使用reactjs 的紙媒企業……