├── README.md └── RN.md /README.md: -------------------------------------------------------------------------------- 1 | ## react-tutorial 2 | a tutorial react collection and sort,let you easily get started and organized 3 | 4 | 主要是搜集整理`react`生态从入门到深入的教程、工具和自己做的demo,以便日后查阅 :blush: 包括web端和移动端(`react-native`) 5 | 6 |

一、react-web端

7 | 8 | ### 设计思想 9 | 10 | 学习React之前，我们先了解一下它的设计思想，它与如今其他热门的前端框架有什么不同？它能为我们的开发解决哪些痛点？ 11 | 12 | >1. [React 设计思想](https://github.com/react-guide/react-basic) 13 | 2. [React的设计哲学 - 简单之美](http://www.infoq.com/cn/articles/react-art-of-simplity/) 14 | 3. [颠覆式前端UI开发框架:React](http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react/) 15 | 4. [React 模式](https://www.geekjc.com/ebook/detail/5bae0c10ddb4f437ecfdc708/1538132695121) 16 | 17 | --- 18 | 19 | ### 初学者入门 20 | 21 | #### 文章 22 | 23 | 可以结合一些简单demo去看文章，例如你在看阮一峰的React 入门实例教程时，可结合他写的入门demo，或官方给的demo。当然你也要边学习边自己去写一些简单demo，去改改别人写的一些React 项目。一定要多动手。 24 | 25 | >1. [React 入门实例教程-阮一峰](http://www.ruanyifeng.com/blog/2015/03/react.html)：建议先看demo 26 | 2. [一看就懂的ReactJs入门教程（精华版）](http://www.cocoachina.com/webapp/20150721/12692.html) 27 | 3. [React 教程-菜鸟教程](http://www.runoob.com/react/react-tutorial.html)：安装那节好像有点错 28 | 4. [React 入门，5个常用DEMO展示](http://blog.csdn.net/iambinger/article/details/51803606) 29 | 5. [如何学习React](http://www.360doc.com/content/16/0129/07/13518188_531384175.shtml) 30 | 6. [给新手的 React&Webpack 上手教程](https://github.com/theJian/build-a-hn-front-page) 31 | 7. [ReactJS 傻瓜教程](https://zhuanlan.zhihu.com/p/19896745?columnSlug=FrontendMagazine) 32 | 8. [React 最简单的入门应用项目](http://guodavid.tk/2016/08/29/React-Message-board/) 33 | 9. [为你定制的 React 学习路线](http://geek.csdn.net/news/detail/88222) 34 | 35 | --- 36 | 37 | #### 入门 demo 38 | 39 | >1. [官方入门 demo](https://github.com/facebook/react/tree/master/examples)：可结合官方的入门文档 40 | 2. [入门 demo-阮一峰](https://github.com/ruanyf/react-demos)：结合入门文章 41 | 3. [模仿知乎界面的一个简单React demo](https://github.com/tsrot/react-zhihu)：结合 [ReactJS中文基础视频教程-爱酷](http://www.icoolxue.com/album/show/262) 42 | 43 | --- 44 | 45 | #### 入门视频教程 46 | 47 | 一定要边看边写，不要囫囵吞枣的看一遍就好了。 48 | 49 | >1. [React入门-慕课网](http://www.imooc.com/learn/504) 50 | 2. [ReactJS中文基础视频教程-爱酷](http://www.icoolxue.com/album/show/262) 51 | 3. [ReactJS中文视频教程](http://react-china.org/t/reactjs/584) 52 | 4. [React教程- 汇智网](http://www.hubwiz.com/course/552762019964049d1872fc88/?ch=alloyteam) 53 | 54 | --- 55 | 56 | #### 入门实战视频 57 | 58 | 了解React开发流程，作者的编码思路，写作规范。 59 | 60 | >1. [React实战--打造画廊应用（上）](http://www.imooc.com/learn/507) 61 | 2. [React实战--打造画廊应用（下）](http://www.imooc.com/learn/652) 62 | 3. [ReactJS中文基础视频教程](http://zexeo.com/course/56753a22b2b8de861c0d281a) 63 | 4. [构建实时聊天应用](http://zexeo.com/course/5672c2bd52b470c02bc28b6c) 64 | 65 | --- 66 | 67 | ### 开发文档 68 | 69 | 开发其实不用详细去全看，在你做项目时，遇到不懂的就去查看一下文档，我认为这样效率更高一点。当然你有时间也可以一步步去阅读。 70 | 71 | 1. [官方文档](https://facebook.github.io/react/docs/hello-world.html) 72 | 2. [中文文档](http://reactjs.cn/react/docs/getting-started-zh-CN.html) 73 | 74 | ### 学习网站 75 | 76 | 在学习中我们会遇到 一些问题，可以去社区或一些网站寻找答案，下面推荐一些好的React 社区和学习网站。 77 | 78 | >1. [React中文社区](http://react-china.org/) 79 | 2. [React 中文索引](http://nav.react-china.org/) 80 | 2. [React知识库](http://lib.csdn.net/base/react) 81 | 3. [A quick start to React](https://codepicnic.com/posts/a-quick-start-to-react-0777d5c17d4066b82ab86dff8a46af6f) 82 | 4. [stack overflow](http://stackoverflow.com/questions/tagged/reactjs) 83 | 5. [知乎 React 话题](https://www.zhihu.com/topic/20013159/hot) 84 | 6. [segmentfault React 话题](https://segmentfault.com/t/react.js) 85 | 86 | --- 87 | 88 | ### React技术栈 89 | 90 | React是一款非常优秀的前端框架，你要发挥它完全的性能，你就要结合其他一些技术，例如webpack、redux、react-router等。 91 | 92 | >1. [React 技术栈系列教程](http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html) 93 | 2. [百度母婴技术团队—基于Reactjs实现webapp](https://github.com/my-fe/wiki/issues/1) 94 | 3. [Building a React Universal Blog App](https://www.sitepoint.com/building-a-react-universal-blog-app-a-step-by-step-guide/) 95 | 4. [React为啥非得使用immutable.js](http://react-china.org/t/react-immutable-js/3770) 96 | 5. [React Server Side Rendering 解决 SPA 应用的 SEO 问题](https://blog.coding.net/blog/React-Server-Side-Rendering-for-SPA-SEO) 97 | 6. [webpack官方文档](http://webpack.github.io/docs/) 98 | 7. [Webpack 中文指南](http://webpackdoc.com/) 99 | 8. [webpack一小时快速入门](http://www.w2bc.com/Article/50764) 100 | 9. [使用webpack轻松构建你的第一个react开发框架](http://www.jianshu.com/p/c8a805145046) 101 | 10. [入门Webpack，看这篇就够了](http://www.jianshu.com/p/42e11515c10f#):写的很不错，逐级深入，适合入门，有点长，耐心看完 102 | 10. [react-router](https://github.com/ReactTraining/react-router) 103 | 11. [React Router 中文文档](https://react-guide.github.io/react-router-cn/) 104 | 12. [React Router 官方 demo](https://github.com/reactjs/react-router-tutorial/tree/master/lessons) 105 | 13. [Redux官网](http://redux.js.org/) 106 | 14. [Redux 中文文档](http://cn.redux.js.org/index.html) 107 | 15. [Redux 官方 demo](https://github.com/reactjs/redux/tree/master/examples) 108 | 16. [Redux 莞式教程](https://github.com/kenberkeley/redux-simple-tutorial) 109 | 17. [Redux 视频教程](https://egghead.io/courses/getting-started-with-redux) 110 | 18. [redux 大法好](http://qiutc.me/post/redux-%E5%A4%A7%E6%B3%95%E5%A5%BD-%E2%80%94%E2%80%94-%E5%85%A5%E9%97%A8%E5%AE%9E%E4%BE%8B-TodoList.html) 111 | 19. [Flux 傻瓜教程](https://zhuanlan.zhihu.com/p/19900243?columnSlug=FrontendMagazine) 112 | 20. [react+redux渲染性能优化原理](http://foio.github.io/react-redux-performance-boost/) 113 | 21. [React开发社区](https://react.ctolib.com/) 114 | 22. [用mobx代替redux](https://www.geekjc.com/post/5a044533d0a2f936e03a623a) 115 | 116 | --- 117 | 118 | ### 相关好文: 119 | >1. [React初体验](http://hustlzp.com/post/2016/03/react-first-blood) 120 | 2. [React 最佳实践——那些 React 没告诉你但很重要的事](http://www.v2ex.com/t/274697) 121 | 3. [Redux 状态管理方法与实例](https://segmentfault.com/a/1190000005933397) 122 | 4. [高质量的 React 相关文档和翻译](https://github.com/react-guide) 123 | 5. [redux观点](https://github.com/lawrencebla/redux-review) 124 | 6. [还在纠结 Flux 或 Relay，或许 Redux 更适合你](https://segmentfault.com/a/1190000003099895) 125 | 7. [react,react-router 4,mobx构建我的移动端web](http://www.jianshu.com/p/3d3ed3e0626d) 126 | 127 | --- 128 | 129 | ### 相关工具: 130 | >1. [react-babel-webpack-boilerplate](https://github.com/ruanyf/react-babel-webpack-boilerplate) 131 | 2. [react-webpack-generators](https://github.com/react-webpack-generators/generator-react-webpack) 132 | 3. [React项目可视化生成器](http://www.overreact.io/) 133 | 4. [react-starter-kit](https://github.com/bodyno/react-starter-kit) 134 | 135 | --- 136 | 137 | ### 规范 138 | >1. [react-style-guide](https://github.com/JasonBoy/javascript/tree/master/react) 139 | 140 | --- 141 | 142 | 143 | ### React 开源项目 144 | 145 | 介绍一些国内外比较好的 React 开源项目。 146 | 147 | 国内： 148 | - [阿里的 React 组件库](https://github.com/react-component) 149 | - [Ant Design](https://github.com/ant-design/ant-design) 150 | - [简易留言板](https://github.com/tsrot/react-demo) 151 | - [react-zhihu](https://github.com/tsrot/react-zhihu) 152 | - [React的扫雷游戏](https://github.com/cjohansen/react-sweeper) 153 | - [在线聊天室](https://github.com/redsx/CR) 154 | - [使用React技术栈开发SPA](https://github.com/JasonBai007/reactSPA) 155 | - [阔论留言评论](https://github.com/NumerHero/kuolun) 156 | - [React版cnode社区](https://github.com/lzxb/react-cnode) 157 | 158 | 国外： 159 | - [Relax](https://github.com/relax/relax) 160 | - [SoundRedux](https://github.com/andrewngu/sound-redux/) 161 | - [Gatsby](https://github.com/gatsbyjs/gatsby) 162 | - [isomorphic500](https://github.com/gpbl/isomorphic500) 163 | - [NuclearMail](https://github.com/ianobermiller/nuclearmail) 164 | - [Picard](https://github.com/Automattic/Picard) 165 | - [React Color](https://github.com/casesandberg/react-color) 166 | - [Sentry](https://github.com/getsentry/sentry/) 167 | - [react-hn](https://github.com/insin/react-hn) 168 | - [Perseus](https://github.com/khan/perseus) 169 | 170 | ### 自己做的项目 171 | >1.[极客教程网](https://www.geekjc.com) 172 | 2. [极客教程移动版](http://m.geekjc.com) 173 | 3. [cll's blog](https://cllgeek.github.io/) 174 | 4. [gallery-by-react](https://cllgeek.github.io/gallery-by-react) 地址:[https://github.com/cllgeek/gallery-by-react](https://github.com/cllgeek/gallery-by-react) 175 | 176 | ### 其它相关 177 | 1. [react-router-tutorial](https://github.com/reactjs/react-router-tutorial) 178 | 2. [redux-tutorial](https://github.com/react-guide/redux-tutorial-cn) 179 | --- 180 | 181 | --- 182 | -------------------------------------------------------------------------------- /RN.md: -------------------------------------------------------------------------------- 1 | ## React Native 2 | #### 教程: 3 | >1. [react-native官方文档](https://facebook.github.io/react-native/) 4 | 2. [React-Native学习指南](https://github.com/reactnativecn/react-native-guide) 5 | 3. [ReactNativeMaterials](https://github.com/LeoMobileDeveloper/ReactNativeMaterials) 6 | 7 | --- 8 | 9 | #### 相关好文: 10 | >1. [React Native跨平台移动应用开发实战 - 开篇](https://blog.zaiqiuchang.com/react-native-cross-platform-mobile-app-develop-intro/) 11 | 2. [ React Native开发之IDE（Atom+Nuclide）安装，运行，调试](http://blog.csdn.net/hello_hwc/article/details/51612139) 12 | 13 | --- 14 | --------------------------------------------------------------------------------