{"id":13672401,"url":"https://github.com/ywwhack/react-journey","last_synced_at":"2026-01-25T23:27:43.197Z","repository":{"id":92664239,"uuid":"58745915","full_name":"ywwhack/react-journey","owner":"ywwhack","description":"记录学习react时阅读过的优秀文章、教程等等","archived":false,"fork":false,"pushed_at":"2017-01-13T02:19:45.000Z","size":24,"stargazers_count":324,"open_issues_count":0,"forks_count":53,"subscribers_count":29,"default_branch":"master","last_synced_at":"2024-11-11T10:42:27.489Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ywwhack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-05-13T14:12:11.000Z","updated_at":"2024-10-07T22:06:15.000Z","dependencies_parsed_at":"2023-03-05T09:30:49.446Z","dependency_job_id":null,"html_url":"https://github.com/ywwhack/react-journey","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ywwhack%2Freact-journey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ywwhack%2Freact-journey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ywwhack%2Freact-journey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ywwhack%2Freact-journey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ywwhack","download_url":"https://codeload.github.com/ywwhack/react-journey/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251219601,"owners_count":21554444,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:34.431Z","updated_at":"2026-01-25T23:27:43.182Z","avatar_url":"https://github.com/ywwhack.png","language":null,"funding_links":[],"categories":["Others"],"sub_categories":[],"readme":"# React 相关的优秀资源\n以下列出的资源主要来自自己学习react过程中看过的觉的不错的文章、教程，也算是一个学习过程的记录。\n\n## React\n### 教程\n名称  |  简介\n---- | ----\n[fullstackreact](https://www.fullstackreact.com/) | 如果只看一个react教程，并且希望全面的了解其生态圈，这本书就够了。\n[reactjsprogram](http://www.reactjsprogram.com/) | 有几个大的系列(redux/react native等)，其中react基础部分是免费的，内容对初学者来说很优质。\n\n\n### 文章\n名称  |  简介\n---- | ----\n[Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.3tk94s6k0) | 介绍了react中Presentational和Container Components的概念和区别，以及使用场景\n[React Components, Elements, and Instances](https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html) | 详细介绍了React中令人困惑的Component和Element的区别，以及React底层是如何将Component解析为DOM树的。\n[Learning React Without Using React](https://medium.com/javascript-inside/learn-the-concepts-part-1-418952d968cb#.6e7z5tvgq) | 作者抛开react库本身，围绕react中的render方法,virtual DOM,Component,单向数据流动等概念，实现了一个todolist的例子，demo虽易，但是思想非常棒。\n[React.js in patterns](http://krasimirtsonev.com/blog/article/react-js-in-design-patterns?utm_campaign=React%2BNewsletter\u0026utm_medium=email\u0026utm_source=React_Newsletter_38) | react的设计模式\n[初识React中的High Order Component](https://leozdgao.me/chushi-hoc/) | 介绍了react中的高阶组件，通俗易懂，顺带还提了下react-redux中的connect的实现。\n[React Higher Order Components in depth](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#.4twzbtufq) | 介绍了高阶组件(HOC)的两种实现方式，以及如何通过它来重用代码、操作WrappedComponent的props/state，render劫持等等。\n[react-interview-questions](https://tylermcginnis.com/react-interview-questions/) | react相关的\"面试题\", 很有意思\n[How to develop a React library](http://cloudinary.com/blog/how_to_develop_a_react_library?utm_campaign=React%2BNewsletter\u0026utm_medium=email\u0026utm_source=React_Newsletter_59) | 介绍了如何开发一个react相关的库(组件)，便于其他开发者集成到自己的应用中\n\n## Redux\n### 教程\n名称 | 简介\n---- | ----\n[Full-Stack Redux Tutorial](http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html) | 这是一篇博客文章，内容相当的多，作者从零搭建了一个实时投票系统，从服务端到浏览器前端，介绍了如何使用[mocha](https://mochajs.org/),[chai](http://chaijs.com/)进行功能测试，如何使用[Immutable.js](https://github.com/facebook/immutable-js)，以及如何进行react组件的测试。作者在整篇文章中，一点点引入redux中的概念，深入浅出。还有一点非常有意思的是，作者在前后端分别建立了个redux。\n\n### 文章\n名称 | 简介\n---- | ----\n[so-youve-screwed-up-your-redux-store-or-why-redux-makes-refactoring-easy](https://blog.boldlisting.com/so-youve-screwed-up-your-redux-store-or-why-redux-makes-refactoring-easy-400e19606c71?utm_campaign=React%2BNewsletter\u0026utm_medium=email\u0026utm_source=React_Newsletter_32#.1po5f1k30) | 主要讲述了对reducers的几种改进方式来对redux进行重构。\n[The Redux Journey](https://www.youtube.com/watch?v=uvAXVMwHJXU\u0026feature=youtu.be) | Dan在react-europe 2016上关于redux一年发展过程的总结，并且示范了如何使用redux的优秀特性。\n\n## CSS Modules\n### 文章\n名称 | 简介\n---- | ----\n[What are CSS Modules? A visual introduction](http://andrewhfarmer.com/what-are-css-modules/) | 介绍了什么是css modules，以及它是如何解决css global问题的。\n[CSS Modules by Example](http://andrewhfarmer.com/css-modules-by-example) | 7个例子涵盖了css modules在React开发中使用的场景。\n\n## Webpack\n### 文章\n名称 | 简介\n---- | ----\n[Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案](http://www.cnblogs.com/ihardcoder/p/5623411.html) | 比较深入的介绍了hash和chunkhash的一些东西\n[Progressive loading for modern web applications via code splitting](https://medium.com/@lavrton/progressive-loading-for-modern-web-applications-via-code-splitting-fb43999735c6#.yi8ev5c95) | 介绍了如何使用require.ensure来实现code-split，同时实现延迟加载。\n### 教程\n名称 | 简介\n---- | ----\n[http://survivejs.com/webpack/introduction/](http://survivejs.com/webpack/introduction/) | 目前看过最全面，也是唯一一本专门介绍webpack的书（webpack是个巨坑＝＝）。\n[Webpack Deep Dive](https://frontendmasters.com/courses/webpack) | 深入介绍如何在项目中使用webpack2。视频是workshop上录制的，有现场讲师和学生的提问互动，非常赞。\n\n## GraphQL \u0026\u0026 Relay\n### 教程\n名称 | 简介\n---- | ----\n[https://learngraphql.com](https://learngraphql.com) | 非常详细的介绍了graphql的基础用法，很好的入门教程。\n\n## 其他\n名称 | 简介\n---- | ----\n[http://flexbox.io/](http://flexbox.io/) | flexbox视频教程，共20个小视频，前13小节讲述了flexbox的各种属性，后7小节实例演示。\n[Functional Programming in JavaScript](https://www.manning.com/books/functional-programming-in-javascript) | React生态圈中到处透露着函数式编程的思想，这本书对于函数式编程接触较少的人来说内容非常丰富，并且一些地方讲的比较深入，适合多次阅读。\n[learnrx](http://reactivex.io/learnrx/) | 前面章节讲了大量的函数式思想(其实就是map,filter,reduce,concatAll,concatMap这五个函数啦)，后面引入Rx，并和数组进行对比，讲解Observable和array有什么联系和区别。\n\n\n## 问答\n问题  |  简介\n---- | ----\n[How to dispatch a Redux action with a timeout?](http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559) | 回答者是Redux的作者，阐述了如何在Redux中进行异步操作，什么情况下需要对异步操作进行封装，以及redux-thunk中间件的使用。\n[Why is 'key' needed?](https://www.reddit.com/r/reactjs/comments/4mjdcf/why_cant_i_put_key_in_default_props_or_define_the/d3xwa6m) | 解释了为什么在一个React Elements数组中需要指定每个元素的key属性。\n[what-does-webpack-mean-by-xx-hidden-modules](https://stackoverflow.com/questions/28858176/what-does-webpack-mean-by-xx-hidden-modules) | webpack运行时,控制台出现+n hidden modules的原因。\n\n## Advanced\n* [React PureComponent 源码解析](https://segmentfault.com/a/1190000006741060)\n* [深度剖析：如何实现一个 Virtual DOM 算法](https://github.com/livoras/blog/issues/13)\n* [React: Implementation Notes](https://facebook.github.io/react/contributing/implementation-notes.html)\n* [reactjs源码分析-上篇（首次渲染实现原理）](http://purplebamboo.github.io/2015/09/15/reactjs_source_analyze_part_one/)\n* [dive-into-react-codebase-transactions](http://reactkungfu.com/2015/12/dive-into-react-codebase-transactions/)\n* [React 源码剖析系列 － 解密 setState](https://zhuanlan.zhihu.com/p/20328570)\n\n## Newsletter\n* [http://reactjsnewsletter.com/](http://reactjsnewsletter.com/)\n* [http://newsletter.fullstackreact.com/](http://newsletter.fullstackreact.com/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fywwhack%2Freact-journey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fywwhack%2Freact-journey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fywwhack%2Freact-journey/lists"}