学习react ，react router，react redux的合适顺序是什么？

Question

学习react ，react router，react redux的顺序是什么？怎么学比较好接受这种思想呢

Answer 1

由浅入深的学习 React。其实思想和基本原理懂了，Redux，React-Redux，React-Router 都只是你的辅助工具而已。给你推荐我的《React.js 小书》，里面对于这三个都有涉及。也许你看完了就有了基本思路。http://huziketang.com/books/r...。《React.js 小书》

第一个阶段
Lesson 1 - React.js 简介
Lesson 2 - 前端组件化（一）：从一个简单的例子讲起
Lesson 3 - 前端组件化（二）：优化 DOM 操作
Lesson 4 - 前端组件化（三）：抽象出公共组件类
Lesson 5 - React.js 基本环境安装
Lesson 6 - 使用 JSX 描述 UI 信息
Lesson 7 - 组件的 render 方法
Lesson 8 - 组件的组合、嵌套和组件树
Lesson 9 - 事件监听
Lesson 10 - 组件的 state 和 setState
Lesson 11 - 配置组件的 props
Lesson 12 - state vs props
Lesson 13 - 渲染列表数据
Lesson 14 - 实战分析：评论功能（一）
Lesson 15 - 实战分析：评论功能（二）
Lesson 16 - 实战分析：评论功能（三）

第二个阶段
Lesson 17 - 前端应用状态管理 —— 状态提升
Lesson 18 - 挂载阶段的组件生命周期（一）
Lesson 19 - 挂载阶段的组件生命周期（二）
Lesson 20 - 更新阶段的组件生命周期
Lesson 21 - ref 和 React.js 中的 DOM 操作
Lesson 22 - props.children 和容器类组件
Lesson 23 - dangerouslySetHTML 和 style 属性
Lesson 24 - PropTypes 和组件参数验证
Lesson 25 - 实战分析：评论功能（四）
Lesson 26 - 实战分析：评论功能（五）
Lesson 27 - 实战分析：评论功能（六）

第三个阶段
Lesson 28 - 高阶组件（Higher-Order Components）
Lesson 29 - React.js 的 context
Lesson 30 - 动手实现 Redux（一）：优雅地修改共享状态
Lesson 31 - 动手实现 Redux（二）：抽离 store 和监控数据变化
Lesson 32 - 动手实现 Redux（三）：纯函数（Pure Function）简介
Lesson 33 - 动手实现 Redux（四）：共享结构的对象提高性能
Lesson 34 - 动手实现 Redux（五）：不要问为什么的 reducer
Lesson 35 - 动手实现 Redux（六）：Redux 总结
Lesson 36 - 动手实现 React-redux（一）：初始化工程
Lesson 37 - 动手实现 React-redux（二）：结合 context 和 store
Lesson 38 - 动手实现 React-redux（三）：connect 和 mapStateToProps
Lesson 39 - 动手实现 React-redux（四）：mapDispatchToProps
Lesson 40 - 动手实现 React-redux（五）：Provider
Lesson 41 - 动手实现 React-redux（六）：React-redux 总结
Lesson 42 - 使用真正的 Redux 和 React-redux
Lesson 43 - Smart 组件 vs Dumb 组件
Lesson 44 - 实战分析：评论功能（七）
Lesson 45 - 实战分析：评论功能（八）
Lesson 46 - 实战分析：评论功能（九）

Answer 2

一个个学很浪费时间，而且最后会发现上手一个项目还是很难。
我学react、redux、router的时候，根本就没有多少时间自学这些理论，在我看react文档的第三天，我就被老大要求开始用redux架构了，然后花了2个月用这套react技术栈把前端赶出来了，少年啊，叫个人逼着你直接上手一个项目，绝对很快就能学会了。

Answer 3

你可以看下这个链接，讲的比较详细！
链接描述

Answer 4

React是整个React项目的核心基础，Router是路由相关，而Redux是非常常用的状态管理组件，不过随着新的React版本推出，Hooks能够完成绝大多数项目中对于状态管理所需要的操作，而且步骤很少，所以全剧状态管理在未来项目中，未必是必须的，所以按照React->Router->Redux来学习是没有问题的。
此外，也把你的问题回答的全面一点，这些点是我自己做React项目中循序渐进，觉得都会使用到的技术，重要性按照顺序大致递减：

1. HTML，CSS，JS基础
2. React基础知识（包括react-dom，react-router-dom等）
3. NPM, YARN等包管理工具
4. 状态管理及钩子：Redux, Mobx, Hooks
5. 表单开发：Formik, AntD Form
6. API: Fetch, Axios, GraphQL
7. UI框架：AntD等

这些知识能够基本上帮助你开发一个Web端的React应用了，当然，在应对具体需求时，你还会学习到更多细碎的知识和组件，光学习理论学习起来是枯燥和低效的，在项目中学习，带着目标学习，会事半功倍，有问题欢迎互相讨论～

Answer 5

就按你排的顺序就行，他们的名字也表明了这种依赖顺序，把redux加进去放在第三位。

动手练，几个小时就熟练了。核心思想就是单向数据流，拿着个检验是不是接受好了。

Answer 6

我的顺序是react，react-router,redux
react是基础，官网的例子走一遍就可以了
react-router是辅助与react，所以要在react之后,github上有比较多的例子 你可以搜react-router-tutorial，我当时看的就只这个例子
最后学redux 这个是架构层面的，所以要对reactyou比较好的掌握之后再学更容易着手

Answer 7

最难的是 Redux 的概念，于是就有了 Redux 莞式一条龙教程

Answer 8

学习react的话理解有限状态机思想，所有的dom的改变都是由状态的改变而改变的。

react-router的话并不难可以说学习曲线很平滑的，react理解的差不多的话，react-router就可以当成一个组件来理解了。

redux的学习曲线比较陡，建议就是在github上找一个浅显的demo，重写一遍就理解的差不多了。还可以参考http://cn.redux.js.org/docs/a...

redux学的差不多了的话，那么就应该要学一点Immutable来提升react的性能了。

Answer 9

我是按这个顺序学的
1) react

2) react + redux

3) react + react-router

4) react + react-router + redux

这些在 github 都有现成的例子

Answer 10

先学react，react router，react redux

Answer 11

没有什么先学不先学的，你觉得需要就学。
React不用说了，构建UI界面。
Router就是模拟路由的，访问网页时www.xxx/xx/xxx这种，本来是后端的，放到前端来。
Redux就是存放state的，你的项目state结构很复杂就用，简单的就不用。

Answer 12

一起学啊，分开学更难接受这种思想。看文档，看demo，试着做demo，再看文档，然后尝试做个项目，慢慢磨

Answer 13

先模仿，后操作，学习别人做的项目和库，多看代码，才能多写，推荐一个不错的React组件和库的资源列表学习：

https://reactjsexample.com

Answer 14

先路由啊，肯定

Answer 15

目前 也在学习react，我就先按照你写的顺序来学习， React官网有一个发表评论的例子很好，可以试着敲一下，或者参考这个comment-demo,然后学习Router给demo加上路由，增添功能，再了解redux。

Answer 16

如果周围有人带你直接做一个项目是最好的，反正我当时看完redux文档是一脸懵逼呀

Answer 17

个人学习时的资源
推荐：http://www.ruanyifeng.com/blo...
react:

http://www.ruanyifeng.com/blog/2015/03/react.html
https://github.com/shiningjason1989/react-quick-tutorial

react-router

http://www.ruanyifeng.com/blog/2016/05/react_router.html
https://github.com/reactjs/react-router-tutorial/tree/master/lessons

redux

https://github.com/react-guide/redux-tutorial-cn
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
http://cn.redux.js.org/index.html
https://github.com/reactjs/redux/tree/master/examples (官方DEMO)

Answer 18

项目中学是最快的，三个同时用的

Answer 19

React中文社区-2群 523838207