学习react ,react router,react redux的合适顺序是什么?

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

阅读 6.2k
评论 2016-06-15 提问
    18 个回答

    由浅入深的学习 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 - 实战分析:评论功能(九)

    评论 赞赏 2017-04-07
      二月
      • 3.5k

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

      评论 赞赏 2016-12-20

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

        评论 赞赏 2016-11-07

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

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

          评论 赞赏 2016-06-15
            秋雨
            • 422

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

            评论 赞赏 2016-07-11
              评论 赞赏 2016-08-24

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

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

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

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

                评论 赞赏 2016-11-07

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

                  2) react + redux

                  3) react + react-router

                  4) react + react-router + redux

                  这些在 github 都有现成的例子

                  评论 赞赏 2016-11-09
                    dingxinglrj
                    • 3
                    • 新人请关照

                    先学react,react router,react redux

                    评论 赞赏 2017-10-13

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

                      评论 赞赏 2017-10-16

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

                        评论 赞赏 2018-02-06

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

                          https://reactjsexample.com

                          评论 赞赏 2018-07-29

                            先路由啊,肯定

                            评论 赞赏 2019-02-21

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

                              该答案已被忽略,原因:

                              评论 赞赏 2016-12-13

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

                                该答案已被忽略,原因:无意义的内容:赞、顶、同问等毫无意义的内容,不符合答题规范:内容不是答案,可用评论、投票替代

                                评论 赞赏 2017-01-03

                                  个人学习时的资源
                                  推荐: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)

                                  该答案已被忽略,原因:

                                  评论 赞赏 2017-01-13
                                    soga
                                    • 15

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

                                    该答案已被忽略,原因:

                                    评论 赞赏 2017-07-18
                                      qq_36011570
                                      • -1
                                      • 新人请关照

                                      React中文社区-2群 523838207

                                      该答案已被忽略,原因:垃圾广告信息:广告、招聘、推广、测试等内容,不符合答题规范:内容不是答案,可用评论、投票替代,无意义的内容:赞、顶、同问等毫无意义的内容

                                      评论 赞赏 2016-09-22
                                        撰写回答

                                        登录后参与交流、获取后续更新提醒