react资源汇总(react-tutorial)
react-tutorial
a tutorial react collection and sort,let you easily get started and organized
主要是搜集整理react生态从入门到深入的教程、工具和自己做的demo,以便日后查阅 :blush: 包括&a href=&#web&&web端&/a&和移动端(&a href=&`&/a&)
&h2 name=&web&&一、react-web端&/h2&
学习React之前，我们先了解一下它的设计思想，它与如今其他热门的前端框架有什么不同？它能为我们的开发解决哪些痛点？
初学者入门
可以结合一些简单demo去看文章，例如你在看阮一峰的React 入门实例教程时，可结合他写的入门demo，或官方给的demo。当然你也要边学习边自己去写一些简单demo，去改改别人写的一些React 项目。一定要多动手。
：建议先看demo
：安装那节好像有点错
：可结合官方的入门文档
：结合入门文章
入门视频教程
一定要边看边写，不要囫囵吞枣的看一遍就好了。
入门实战视频
了解React开发流程，作者的编码思路，写作规范。
开发其实不用详细去全看，在你做项目时，遇到不懂的就去查看一下文档，我认为这样效率更高一点。当然你有时间也可以一步步去阅读。
在学习中我们会遇到 一些问题，可以去社区或一些网站寻找答案，下面推荐一些好的React 社区和学习网站。
React技术栈
React是一款非常优秀的前端框架，你要发挥它完全的性能，你就要结合其他一些技术，例如webpack、redux、react-router等。
:写的很不错，逐级深入，适合入门，有点长，耐心看完
React 开源项目
介绍一些国内外比较好的 React 开源项目。
自己练习做的项目
JavaScript
随时随地看视频扫码下载官方App
学习过该课程的人还学习过：
其他联系方式
所属系列课程
网易公司()旗下实用技能学习平台。与优秀讲师、专业机构、院校合作，为您提供海量优质课程，以及创新的在线学习体验，帮助您获得全新的个人发展和能力提升。
关注我们：
& 网易公司 版权所有
React+Redux实战,IT与互联网,网站制作,你将学到：
- React : 创建React组件、React组件的嵌套、React组件的状态管理以及React组件的数据传递等
使用Redux来将我们SPA应用的数据状态进行有效的管理
- React Router :
使用React Router来管理SPA应用的路由
- WebPack :
用WebPack这个打包工具来处理JS、样式、图片等文件，并使用WebPackDevServer来建立一个高效的开发环境
- Babel : 使用Babel来将我们编写的ES6、React编译转换成浏览器可以认识的ES5语法
- ES6 : 紧跟前端的发展脚步，完全使用新的ES6语法来进行开发。无需担心兼容性问题，因为我们有像Babel这样的工具来对它进行编译
- WordPress主题 :
使用WP REST API配合React来开发一个全站Ajax的WordPress主题
– 项目开始：/blwoosky/React-Redux-WP-Theme-Starter
– 项目结束：/blwoosky/BlwooSky-Theme-v2.1
大家可以到/courses/react-redux-in-action/留言讨论
注：购买了即是打赏，不购买也可以预览所有课程！
适用人群：- 了解Javascript
- 了解HTML、CSS京ICP备号-1 2007- 版权所有React、Redux、React开发实战（体验）
总课时：2课时
发布时间：2016年
被业界潮流指引方向却不给归宿的伪文艺随性IT男
收看本课程的其它同学
zhupeng2014
三番文武贝
pangshi347
已有949人购买
浪曦星际一卡通
已有377人购买
浪曦OA与工作流系统
已有348人购买
Spring源码解读与设计详析
已有305人购买
Java常见笔试、面试系列
已有295人购买
浪曦CRM企业级开发应用系统
已有289人购买
风中叶2016述职规划全程讲座分享
已有246人购买
Git应用开发详解（体验）
已有237人购买
Mysql高级海量数据存储和优化
已有226人购买
圣思园视频
已有192人购买
Oracle DBA系列教程
已有人购买
？这里有最新的Androi
课程评价（0）
本门课程会完整介绍一个Web应用的开发过程。该应用的出发点是让技术人员可以把实际工作过程中遇到的难题推送给领域专家或科研人员，简单来说就是面向多个领域的Stackoverflow。
技术路线上后端选用基于Express和Mongoose的CMS系统KeystoneJS，前端采用react+redux+react-router。由于篇幅所限，所用的各个框架不会展开介绍，请各位学员阅读相关文档并跟随课程学习。
l&KeystoneJS：/zh/
l&React：http://facebook.github.io/react/
n&http://redux.js.org/
n&/happypoulp/redux-tutorial
l&React-router：/reactjs/react-router
1.&基本业务规则
1.&所有用户都可以提问，但只有经过审核的问题才能进入待回答问题列表。
2.&只有被认定为领域专家的用户才能回答问题，专家登录后会在主界面看到自己专业领域内的待回答问题。
3.&默认为匿名问答，即提问者和回答者的个人信息默认都不可见。
4.&每次问答完成，变更提问者信用积分，变更回答被采用者的专业积分
2.&技术栈及程序架构
2.1.&React及Redux
2.1.1.&客户端的MVC
MVC的概念在Web应用的后台开发中由来已久，大部分&Web&应用程序现在已经对模型-视图-控制器&(MVC)&架构进行了标准化，使用单独的代码实现业务逻辑、显示逻辑和用户交互（路由）逻辑。随着前端开发的复杂性日益加深，也逐渐出现了一些应用在客户端的MVC框架，比如Backbone.js、Spine.js、Knockout.js等，但一直都没有广为流传的解决方案。React+Redux的组合应该会有很好的前景。
2.1.2.&React
React最初是Facebook内部的前端框架，后来开源贡献给业界。大家一般把它当作是MVC中的V，负责前端界面的显示。其核心理念是将页面分解成不同的组件，每个组件都有各种状态（数据），以及与状态对应的显示界面。开发人员只要定义好组件的状态，然后用几乎等同于HTML的JSX编写相应的显示界面就可以了；React框架负责在数据更新时重新渲染组件的显示界面。由于React表达简单灵活，性能优异，并且非常适合目前基于API的应用开发方式，所以迅速成为了主流的前端框架。
2.1.2.1.&React要解决的问题
介绍如何用React完成下面这两项任务：
1.&显示数据
2.&事件与交互
2.1.2.2.&组件、状态与属性
组件的定义。介绍state及props的用法。
2.1.2.3.&组件的关系
介绍组件的组合，ownership及child关系
2.1.2.4.&组件的生命周期方法
介绍componentWillMount、componentDidMount、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate、componentWillUnmount组件生命周期方法的含义及用法。
2.1.2.5.&使用JSX时的一些注意事项
常见问题及需要避免的用法。
2.1.3.&Redux
2.1.3.1.&Flux、Immutable.js及fetch
Flux概念介绍
Immutable.js及fetch类库的用法。
2.1.3.2.&Action
action的概念及用法。
2.1.3.3.&Reducer
reducer的概念及用法，如何组合。
2.1.3.4.&Promises与dispatcher
Promises及dispatcher的概念及用法。
2.2.&React Router
2.2.1.&router
如何定义路由，以及如何将路由关联到React组件。
2.2.2.&onEnter&onLeave
如何利用路由中的两个钩子方法实现访问控制及数据清理。
2.2.3.&Link
Link标签的用法。
2.2.4.&history,query?ms
在React组件中如何通过history进行导航。如何通过query?ms获取URL中的数据。
2.3.&KeystoneJS
2.3.1.&模型
如何定义模型及模型间的关系。
2.3.2.&路由
KeystoneJS中的路由。
2.3.3.&服务
如何编写服务API。
3.&工作环境及日常工作
3.1.&工作环境搭建及相关工具介绍
3.1.1.&Git仓库
搭建私有Git仓库以及常用的Git命令。
3.1.2.&gulp
介绍常用的gulp指令。
3.1.3.&npm
介绍常用的npm命令及cnpm的用法。
3.2.&每日工作流程
代码版本管理流程
l&git pull
l&git commit
l&git push
l&router,page&component
l&action&reducer
l&service api
讲师介绍：吴海星，总是被业界潮流指引方向却不给归宿的伪文艺随性IT男。风中叶老师实现给会员朋友们的承诺，给我们请来的第一位大牛讲师，吴海星，目前是infoq的编辑。常年录制前端开发的视频，对于授课有独特的方式，讲课深受广大朋友们的喜爱和支持。对于javascript语言具备深度的研究，精通各种js框架，如：Rect,Extjs,JQuery, Angularjs,Node.对各种后端开发语言也是相当的精通，如java，PHP等等。在前端方向的研究，更是风中叶老师也表示钦佩不已。熟悉并领导基于Java和Node.js的Web应用开发。曾开发过短信SP服务提供商系统，并主持开发了高速公路速通卡管理系统、快速公交IC卡交易采集及管理系统、健身卡管理系统、足球俱乐部网站等多个应用系统。独立完成《Java程序员修炼之道》、《量化：大数据时代的企业管理》、《JavaScript编程实战》、《Node.js实战》的翻译，并主导合译了《Node与Express开发》与《产品经理面试宝典》等书籍。是基于Express和Mongoose的CMS系统KeystoneJS中文文档的主要译者。
本课程采用录制方式最晚六月份全部更新结束：
课程正式出售价格为&1200元&&(视频开始更新恢复价格，预存会员可以享受恢复价格的的折扣)
课程的预售价格为&&&600元&(时间节点为:4月9号~课程开始更新的时间，预存会员可以享受预售的折扣)
课程抢购价格为 380元（时间节点为:4月5号~4月9号下午6点，没有额外的优惠）
第二讲：项目介绍
更新时间：React 实践心得：react-redux 之 connect 方法详解 - 推酷
React 实践心得：react-redux 之 connect 方法详解
Redux 是「React 全家桶」中极为重要的一员，它试图为 React 应用提供「可预测化的状态管理」机制。Redux 本身足够简单，除了 React，它还能够支持其他界面框架。所以如果要将 Redux 和 React 结合起来使用，就还需要一些额外的工具，其中最重要的莫过于 react-redux 了。
react-redux 提供了两个重要的对象， Provider 和 connect ，前者使 React 组件可被连接（connectable），后者把 React 组件和 Redux 的 store 真正连接起来。react-redux 的文档中，对 connect 的描述是一段晦涩难懂的英文，在初学 redux 的时候，我对着这段文档阅读了很久，都没有全部弄明白其中的意思（大概就是，单词我都认识，连起来啥意思就不明白了的感觉吧）。
在使用了一段时间 redux 后，本文尝试再次回到这里，给
（同时摘抄在附录中）一个靠谱的解读。
首先回顾一下 redux 的基本用法。如果你还没有阅读过 redux 的文档，你一定要先去
const reducer = (state = {count: 0}, action) =& {
switch (action.type){
case 'INCREASE': return {count: state.count + 1};
case 'DECREASE': return {count: state.count - 1};
default: return
}}const actions = {
increase: () =& ({type: 'INCREASE'}),
decrease: () =& ({type: 'DECREASE'})}const store = createStore(reducer);store.subscribe(() =&
console.log(store.getState()));store.dispatch(actions.increase()) // {count: 1}store.dispatch(actions.increase()) // {count: 2}store.dispatch(actions.increase()) // {count: 3}
通过 reducer 创建一个 store ，每当我们在 store 上 dispatch 一个 action ， store 内的数据就会相应地发生变化。
我们当然可以 直接 在 React 中使用 Redux：在最外层容器组件中初始化 store ，然后将 state 上的属性作为 props 层层传递下去。
class App extends Component{
componentWillMount(){
store.subscribe((state)=&this.setState(state))
return &Comp state={this.state}
onIncrease={()=&store.dispatch(actions.increase())}
onDecrease={()=&store.dispatch(actions.decrease())}
但这并不是最佳的方式。最佳的方式是使用 react-redux 提供的 Provider 和 connect 方法。
使用 react-redux
首先在最外层容器中，把所有内容包裹在 Provider 组件中，将之前创建的 store 作为 prop 传给 Provider 。
const App = () =& {
&Provider store={store}&
&/Provider&
Provider 内的任何一个组件（比如这里的 Comp ），如果需要使用 state 中的数据，就必须是「被 connect 过的」组件——使用 connect 方法对「你编写的组件（ MyComp ）」进行包装后的产物。
class MyComp extends Component {
// content...}const Comp = connect(...args)(MyComp);
可见， connect 方法是重中之重。
connect 详解
究竟 connect 方法到底做了什么，我们来一探究竟。
首先看下函数的签名：
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
connect() 接收四个参数，它们分别是 mapStateToProps ， mapDispatchToProps ， mergeProps 和 options 。
mapStateToProps(state, ownProps) : stateProps
这个函数允许我们将 store 中的数据作为 props 绑定到组件上。
const mapStateToProps = (state) =& {
count: state.count
这个函数的第一个参数就是 Redux 的 store ，我们从中摘取了 count 属性。因为返回了具有 count 属性的对象，所以 MyComp 会有名为 count 的 props 字段。
class MyComp extends Component {
return &div&计数：{this.props.count}次&/div&
}}const Comp = connect(...args)(MyComp);
当然，你不必将 state 中的数据原封不动地传入组件，可以根据 state 中的数据，动态地输出组件需要的（最小）属性。
const mapStateToProps = (state) =& {
greaterThanFive: state.count & 5
函数的第二个参数 ownProps ，是 MyComp 自己的 props 。有的时候， ownProps 也会对其产生影响。比如，当你在 store 中维护了一个用户列表，而你的组件 MyComp 只关心一个用户（通过 props 中的 userId 体现）。
const mapStateToProps = (state, ownProps) =& {
// state 是 {userList: [{id: 0, name: '王二'}]}
user: _.find(state.userList, {id: ownProps.userId})
}}class MyComp extends Component {
static PropTypes = {
userId: PropTypes.string.isRequired,
user: PropTypes.object
return &div&用户名：{this.props.user.name}&/div&
}}const Comp = connect(mapStateToProps)(MyComp);
当 state 变化，或者 ownProps 变化的时候， mapStateToProps 都会被调用，计算出一个新的 stateProps ，（在与 ownProps merge 后）更新给 MyComp 。
这就是将 Redux store 中的数据连接到组件的基本方式。
mapDispatchToProps(dispatch, ownProps): dispatchProps
connect 的第二个参数是 mapDispatchToProps ，它的功能是，将 action 作为 props 绑定到 MyComp 上。
const mapDispatchToProps = (dispatch, ownProps) =& {
increase: (...args) =& dispatch(actions.increase(...args)),
decrease: (...args) =& dispatch(actions.decrease(...args))
}}class MyComp extends Component {
const {count, increase, decrease} = this.
return (&div&
&div&计数：{this.props.count}次&/div&
&button onClick={increase}&增加&/button&
&button onClick={decrease}&减少&/button&
}}const Comp = connect(mapStateToProps， mapDispatchToProps)(MyComp);
由于 mapDispatchToProps 方法返回了具有 increase 属性和 decrease 属性的对象，这两个属性也会成为 MyComp 的 props 。
如上所示，调用 actions.increase() 只能得到一个 action 对象 {type:'INCREASE'} ，要触发这个 action 必须在 store 上调用 dispatch 方法。 diapatch 正是 mapDispatchToProps 的第一个参数。但是，为了不让 MyComp 组件感知到 dispatch 的存在，我们需要将 increase 和 decrease 两个函数包装一下，使之成为直接可被调用的函数（即，调用该方法就会触发 dispatch ）。
Redux 本身提供了 bindActionCreators 函数，来将 action 包装成直接可被调用的函数。
import {bindActionCreators} from 'redux';const mapDispatchToProps = (dispatch, ownProps) =& {
return bindActionCreators({
increase: action.increase,
decrease: action.decrease
同样，当 ownProps 变化的时候，该函数也会被调用，生成一个新的 dispatchProps ，（在与 statePrope 和 ownProps merge 后）更新给 MyComp 。注意， action 的变化不会引起上述过程，默认 action 在组件的生命周期中是固定的。
[mergeProps(stateProps, dispatchProps, ownProps): props]
之前说过，不管是 stateProps 还是 dispatchProps ，都需要和 ownProps merge 之后才会被赋给 MyComp 。 connect 的第三个参数就是用来做这件事。通常情况下，你可以不传这个参数， connect 就会使用 Object.assign 替代该方法。
最后还有一个 options 选项，比较简单，基本上也不大会用到（尤其是你遵循了其他的一些 React 的「最佳实践」的时候），本文就略过了。希望了解的同学可以直接看文档。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致