zoukankan      html  css  js  c++  java
  • 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)
     
    每一阶段、级别的产物都可以解决特定的问题,不要跳着阅读哦~
  • 相关阅读:
    React学习笔记(六)事件处理
    React学习笔记(五)State&声明周期
    学会装逼,你的人生可能会开挂
    Go指南
    JavaScript检测数据类型
    $.on()方法和addEventListener改变this指向
    JavaScript返回上一页
    js继承
    js原型二
    全局变量与局部变量
  • 原文地址:https://www.cnblogs.com/mian-bread/p/6023844.html
Copyright © 2011-2022 走看看