React學習資料+css進階資料總結

# Awesome

## 最佳實踐

* [React + Redux 最佳實踐](https://github.com/sorrycc/blog/issues/1)
* [Redux 最佳實踐-譯](https://segmentfault.com/a/1190000005757189?utm_source=tuicool&utm_medium=referral)
* [Lean React](https://segmentfault.com/a/1190000005136764)

## React

> React

* [react](https://facebook.github.io/react/index.html)
* [react 中文文檔](http://reactjs.cn/react/index.html)
* [react cheatsheets](http://ricostacruz.com/cheatsheets/react.html)
* [awesome-react](https://github.com/enaqx/awesome-react)
* [react-demos](https://github.com/ruanyf/react-demos)
* [A Compact React Cookbook](https://blog.oyanglul.us/javascript/react-cookbook-mini.html?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io)
* [React 入門實例教程](http://www.ruanyifeng.com/blog/2015/03/react.html)
* [React 入門教程](https://hulufei.gitbooks.io/react-tutorial/content/)
* [React 和 Webpack 小書](https://fakefish.github.io/react-webpack-cookbook/index.html)
* [React.js 最佳實踐(2016)_連接修正版](https://segmentfault.com/a/1190000004685622)
* [精益 React 學習指南 （Lean React）序](https://segmentfault.com/a/1190000005136764)
* [react-ie8](https://github.com/xcatliu/react-ie8)
* [react-devtools](https://github.com/facebook/react-devtools)
* [react-monocle](https://github.com/team-gryff/react-monocle)
* [Immutable 詳解及 React 中實踐](https://github.com/camsong/blog/issues/3)
* [React-Tutorial-Collect](https://github.com/OXOYO/F2E-Tutorial-Collect/blob/master/React.md)
* [組件間的通訊](http://reactjs.cn/react/tips/communicate-between-components.html)
* [React 組件之間如何交流](http://www.tuicool.com/articles/AzQzEbq)
* [react-howto](https://github.com/petehunt/react-howto)
* [webpack + react 優化：縮小js包體積](http://blog.csdn.net/code_for_free/article/details/51583737)
* [如何十倍提升你的webpack構建效率](http://blog.csdn.net/u011413061/article/details/51872412)
* [webpack 經常使用插件](http://www.tuicool.com/articles/auiMnuM)
* [webpack 插件： html-webpack-plugin](http://www.cnblogs.com/haogj/p/5160821.html)
* [webpack使用優化（基本篇）](https://github.com/lcxfs1991/blog/issues/2)

> React Router

* [react-router](https://github.com/reactjs/react-router)
* [react-router 官方文檔](https://github.com/reactjs/react-router/tree/master/docs)
* [react-router 官方文檔中文版](http://react-guide.github.io/react-router-cn/)
* [react-router cheatsheets](http://ricostacruz.com/cheatsheets/react-router.html)
* [React Router 使用教程](http://www.ruanyifeng.com/blog/2016/05/react_router.html)
* [react-router的實現原理](http://zhenhua-lee.github.io/react/history.html)

> React Redux

* [redux](https://github.com/reactjs/redux/)
* [redux 官方文檔](http://redux.js.org/)
* [redux - 官方文檔中文版](http://cn.redux.js.org/)
* [Leveling Up with React: Redux](https://css-tricks.com/learning-react-redux/)
* [An Introduction To Redux](https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/)
* [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux)
* [Redux 使用說明文檔](http://wenku.baidu.com/link?url=RbXh-mhYyO9npGndU1fytrD0SbnN94TogIpvOVnpuJvNgclZ4kCtj8oWoCIA2wDzxk-6_saUTJjHtVAygXzANvZe4iasqBB-O-YeZt2FQ7W)
* [全棧Redux實戰](http://www.tuicool.com/articles/mqiyiq7)
* [解讀redux工做原理](http://zhenhua-lee.github.io/react/redux.html)
* [Redux 最佳實踐-譯](https://segmentfault.com/a/1190000005757189)
* [Redux 介紹](https://segmentfault.com/a/1190000003503338)
* [利用redux和react-redux去cookie&localStorage進行登陸狀態驗證的實踐](https://segmentfault.com/a/1190000005607817)
* [深刻到源碼：解讀 redux 的設計思路與用法](http://div.io/topic/1309)
* [redux cheatsheets](http://ricostacruz.com/cheatsheets/redux.html)
* [awesome-redux](https://github.com/xgrommx/awesome-redux)
* [redux-devtools](https://github.com/gaearon/redux-devtools)
* [《看漫畫，學 Redux》 —— A cartoon intro to Redux](https://github.com/jasonslyvia/a-cartoon-intro-to-redux-cn)
* [Redux 核心概念](http://www.jianshu.com/p/3334467e4b32)
* [數據流管理架構之 Redux 介紹](http://www.alloyteam.com/2015/09/react-redux/)
* [經過三張圖瞭解Redux中的重要概念](https://github.com/WilberTian/StepByStep-Redux)
* [使用Redux管理你的React應用](https://github.com/matthew-sun/blog/issues/18)
* [React和Redux的鏈接react-redux](https://leozdgao.me/reacthe-reduxde-qiao-jie-react-redux/)
* [redux-saga](http://yelouafi.github.io/redux-saga/)
* [Redux-saga 中文文檔](http://leonshi.com/redux-saga-in-chinese/)
* [掌控 redux 異步](https://zhuanlan.zhihu.com/p/21398212)
* [compose redux sagas](https://zhuanlan.zhihu.com/p/21399936)

> React Router Redux

* [react-router-redux](https://github.com/reactjs/react-router-redux)
* [redux-router](https://github.com/acdlite/redux-router)

> React AJAX（2016-07-29 14:20）

* [request - 11830](https://github.com/request/request)
* [fetch - 9248](https://github.com/github/fetch)
* [superagent - 8162](https://github.com/visionmedia/superagent)
* [axios - 4997](https://github.com/mzabriskie/axios)
* [isomorphic-fetch - 2582](https://github.com/matthew-andrews/isomorphic-fetch)
* [reqwest - 1999](https://github.com/ded/reqwest)
* [react-refetch - 1964](https://github.com/heroku/react-refetch)
* [fetch-ie8 - 129](https://github.com/camsong/fetch-ie8)
* [react-ajax - 83](https://github.com/yuanyan/react-ajax)
* [nattyFetch - 33](https://github.com/Jias/natty-fetch)
* [react-superagent - 24](https://github.com/threepointone/react-superagent)
* [Fetch API: 異步請求新解決方案](http://zhenhua-lee.github.io/http/fetch.html)
* [【翻譯】這個API很「迷人」——(新的Fetch API)](http://www.w3ctech.com/topic/854)
* [fetch API 簡介](http://bubkoo.com/2015/05/08/introduction-to-fetch/)
* [傳統 Ajax 已死，Fetch 永生](https://github.com/camsong/blog/issues/2)
* [Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)
* [Generator 函數的含義與用法](http://www.ruanyifeng.com/blog/2015/04/generator.html)
* [async 函數的含義和用法](http://www.ruanyifeng.com/blog/2015/05/async.html)

> React Boilerplate（2016-08-02 13:18）

* [react-starter-kit - 9702](https://github.com/kriasoft/react-starter-kit)
* [react-boilerplate - 8503](https://github.com/mxstbr/react-boilerplate)
* [react-redux-universal-hot-example - 6806](https://github.com/erikras/react-redux-universal-hot-example)
* [react-redux-starter-kit - 5071](https://github.com/davezuko/react-redux-starter-kit)
* [react-slingshot - 4071](https://github.com/coryhouse/react-slingshot)
* [electron-react-boilerplate - 3225](https://github.com/chentsulin/electron-react-boilerplate)
* [frontend-boilerplate - 2784](https://github.com/tj/frontend-boilerplate)
* [react-static-boilerplate - 1537](https://github.com/kriasoft/react-static-boilerplate)
* [universal-react-boilerplate - 808](https://github.com/cloverfield-tools/universal-react-boilerplate)
* [react-production-starter - 776](https://github.com/jaredpalmer/react-production-starter)
* [react-babel-webpack-boilerplate - 610](https://github.com/ruanyf/react-babel-webpack-boilerplate)
* [redux-easy-boilerplate - 559](https://github.com/anorudes/redux-easy-boilerplate)
* [react-static-boilerplate - 12](https://github.com/koistya/react-static-boilerplate)

> React Tutorial

* [react-redux-links - 2739](https://github.com/markerikson/react-redux-links)
* [redux-tutorial -2189](https://github.com/happypoulp/redux-tutorial)
* [react-router-tutorial - 1400](https://github.com/reactjs/react-router-tutorial)
* [react-redux-tutorial - 883](https://github.com/lewis617/react-redux-tutorial)
* [redux-tutorial-cn - 286](https://github.com/react-guide/redux-tutorial-cn)
* [todo-redux-react-webpack - 50](https://github.com/sadams/todo-redux-react-webpack)

> React UI - Desktop App

* [](http://ireact.cn/)
* [material-ui - 集合 - 17157 ♥](https://github.com/callemall/material-ui)
* [react-canvas - 8540](https://github.com/Flipboard/react-canvas)
* [react-bootstrap - 集合 - 6241 ♥](https://github.com/react-bootstrap/react-bootstrap)
* [react-motion - 5199](https://github.com/chenglou/react-motion)
* [react-storybook - 4802](https://github.com/kadirahq/react-storybook)
* [ant-design - 集合 - 4196 ♥](https://github.com/ant-design/ant-design)
* [react-select - 3774](https://github.com/JedWatson/react-select)
* [react-dnd - 3178](https://github.com/gaearon/react-dnd)
* [redux-form - 2666](https://github.com/erikras/redux-form)
* [elemental - 集合 - 2627](https://github.com/elementalui/elemental)
* [react-grid-layout - 2123](https://github.com/STRML/react-grid-layout)
* [react-color - 2040](https://github.com/casesandberg/react-color)
* [react-helmet - 1698](https://github.com/nfl/react-helmet)
* [react-style - 1578](https://github.com/js-next/react-style)
* [react-templates - 1483](https://github.com/wix/react-templates)
* [react-tween-state - 1437](https://github.com/chenglou/react-tween-state)
* [rebass - 集合 - 1339](https://github.com/jxnblk/rebass)
* [react-dropzone - 1305](https://github.com/okonet/react-dropzone)
* [amazeui-react - 集合 - 971 ♥](https://github.com/amazeui/amazeui-react)
* [react-ui - 集合 - 825](https://github.com/Lobos/react-ui)
* [react-router-bootstrap - 647](https://github.com/react-bootstrap/react-router-bootstrap)
* [react-sticky - 293](https://github.com/captivationsoftware/react-sticky)
* [react-fa - 229](https://github.com/andreypopp/react-fa)
* [react-components - 集合 - 175](https://github.com/vaffel/react-components)
* [stardust - 86](https://github.com/TechnologyAdvice/stardust)
* [tree-view - 80](https://github.com/maxogden/tree-view)
* [material-components - 集合 - 70](https://github.com/garth/material-components)
* [react-component - 集合 - 64](https://github.com/cd-fe/react-component)
* [uxcore - 集合 - 47 ♥](https://github.com/uxcore/uxcore)
* [react-scifi - 35](https://github.com/nygardk/react-scifi)
* [dragon-ui - 集合 - 17](https://github.com/JeromeLin/dragon-ui)
* [react-custom-scrollbars](https://github.com/malte-wessel/react-custom-scrollbars)

> React UI - Mobile App

* [OnsenUI - 3010](https://github.com/OnsenUI/OnsenUI)
* [react-web - 1551](https://github.com/taobaofed/react-web)

> React UI - Client App

* [react-desktop - 4688](https://github.com/gabrielbull/react-desktop)
* [Structor - 3095](https://github.com/ipselon/structor)

> React 周邊

* [Riot.js](http://riotjs.com/)
* [Vue.js](http://vuejs.org/)
* [enzyme - React Test](https://github.com/airbnb/enzyme)
* [Mock.js](http://mockjs.com/)
* [使用Mock.js進行獨立於後端的前端開發](https://segmentfault.com/a/1190000003087224)
* [致咱們終將組件化的Web](http://www.alloyteam.com/2015/11/we-will-be-componentized-web-long-text/)
* [css-modules](http://glenmaddern.com/articles/css-modules)
* [CSS Modules 用法教程](http://www.ruanyifeng.com/blog/2016/06/css_modules.html)
* [react-css-modules](https://github.com/gajus/react-css-modules)
* [postcss-modules-local-by-default](https://github.com/css-modules/postcss-modules-local-by-default)
* [React - 極客學院](http://www.jikexueyuan.com/course/reactjs/)
* [React 基礎 - 甯浩網](http://ninghao.net/course/2967)
* [React - 霹靂漁](http://piliyu.com/)

> SVG

* [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader)
* [SVG 圖標製做指南](https://zhuanlan.zhihu.com/p/20753791?refer=FrontendMagazine)

> React Native

* [React-Native學習指南](https://github.com/reactnativecn/react-native-guide)
* [React Native 中文版(含新增 Android 章節)](https://github.com/jikexueyuanwiki/react-native)

## ECMAScript 6

* [learn-es2015](http://babeljs.io/docs/learn-es2015/)
* [es6features](https://github.com/lukehoban/es6features)
* [ECMAScript 6入門](http://es6.ruanyifeng.com/)
* [JavaScript 標準參考教程（alpha）](http://javascript.ruanyifeng.com/)
* [React-Redux-ES6-Cookbook](https://github.com/nattatorn-dev/React-Redux-ES6-Cookbook)

## Babel

* [Babel](http://babeljs.io/)
* [babel](https://github.com/babel/babel)
* [babel-handbook](https://github.com/thejameskyle/babel-handbook)
* [Babel 手冊](https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/README.md)

## Webpack

* [webpack](http://webpack.github.io/docs/)
* [webpack-howto](https://github.com/petehunt/webpack-howto)
* [webpack-demos](https://github.com/ruanyf/webpack-demos)
* [webpack-demo](https://github.com/css-modules/webpack-demo)
* [Webpack 中文指南](http://zhaoda.net/webpack-handbook/index.html)
* [Beginner Webpack Tutorial](https://github.com/AriaFallah/WebpackTutorial)
* [Webpack傻瓜式指南（一）](https://zhuanlan.zhihu.com/p/20367175)
* [Webpack: 爲Web開發而生的模塊管理器](http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/)
* [awesome-webpack](https://github.com/xiaoyu2er/awesome-webpack)
* [webpack 教程資源收集](https://github.com/callmeJozo/webpack-tutorial-collection)
* [Webpack傻瓜式指南](https://github.com/vikingmute/webpack-for-fools)
* [QQ 音樂技術團隊分享之 Webpack 實用技巧高效實戰](http://www.tuicool.com/articles/FBbMvaj)

## 其餘

* [程序員的自我修養](https://leohxj.gitbooks.io/a-programmer-prepares/content/)
* [我由Angular轉向React，爲何？](http://m.csdn.net/article/2015-02-13/2823956)
* [關於從 Backbone 轉移到 React 的思考](http://www.tuicool.com/articles/IjAba2)

* [寫給想作前端的你](https://segmentfault.com/a/1190000005085629)

 

 

---

# CSS 進階路線

 

CSS 發展 | 概念

---|---

基礎階段 | [CSS](https://www.w3.org/Style/CSS/)

預處理階段 | [Less](http://lesscss.org/)、[Sass](http://sass-lang.com/)、[Stylus](http://stylus-lang.com/)

後處理階段 | [PostCSS](http://postcss.org/)

- | [You Don't Need JavaScript](https://github.com/you-dont-need/You-Dont-Need-Javascript)

 

CSS 架構 | 概念

---|---

1 級 | [DRY CSS](http://vanseodesign.com/css/dry-principles/)

2 級 | [SOLID CSS](http://blog.millermedeiros.com/solid-css/)

3 級 | [SMACSS](https://smacss.com/)

4 級 | [OOCSS](http://oocss.org/)

5 級 | [BEM](https://en.bem.info/methodology/key-concepts/)

6 級 | [CSS Modules](https://github.com/css-modules/css-modules)

 

每一階段、級別的產物均可以解決特定的問題，不要跳着閱讀哦~