分享自己的 react 学习路径
发布于 12 天前 作者 alicePan 866 次浏览 最后一次编辑是 5 天前 来自 分享

楼主自己也是才踩 react 的路。。之前偷懒用了 vuejs 就不思上进了…无赖美帝都是 react 占据了90个点的江山.* **一直觉得学习,选择好的学习资料和学习的顺序很重要… 对了,路子顺…挫折感小. ** 希望自己的学习顺序,能给别人带来帮助. 群主弄了个 QQ 技术交流群: 371932256 ,方便讨论我的 cnodejs 的 react 版本的项目…一起进步…也欢迎高手加入…哈哈…

  1. 掌握 react 的基本概念 1.1 看视频课程:https://time.geekbang.org/course/intro/100 (非推广…只是个人是个很热心的妹砸) 01 ~10 1.2 边看然后边刷官方的 Main Concepts 部分的文档https://reactjs.org/docs/hello-world.html 做好第一步和第二步后,对 react 有基本的概念了…

  2. 学习 redux/react-redux 2.1 看ruanyifeng 的 redux/react-redux 教程… 看教程第一二篇的时候,会有个基本的概念呢… 2.2 然后返回去看 11~ 15, 视频讲解的 redux、react 课程 当然你在刷课课程中,也会不时的去看看官方文档看看些细节. flux 等概念 2.3 在上述步骤(3.1 ~3.2 ) 中,你会做 Counter 的例子,了解 redux 的基本玩法… 也会把 Counter的例子改成结合 react-redux 类型的; 如果这两个例子完成了…可以试试这个视频教程… 2.4 完成一个小demo: https://www.youtube.com/watch?v=93p3LxR9xfM&t=1168s 这部分想必,对新手会绕一段时间…特别是 redux 这部分如果你没进去看过源码…有时候会被 API 绕晕…觉得 API 多 这边是楼主写的 redux 阅读笔记: https://github.com/pandoracat/learn-react/blob/master/Notes/Redux/includes/markdown/ReduxSourceCode.md

  3. 完成学习 react基本概念… redux/react-redux 基本用法后…(一定要试着敲每个课程的代码哟,扎扎实实走过来的,你内心才踏实) 可以直接去 react-router 官网看看 demo, 边用用demo, 了解文档,了解用法. 如果有朋友觉得英文文档看起来吃力,可以看看这个 https://www.jianshu.com/p/1781bc1dd938#24-history

  4. 学习完这些后,咱看看 react 项目,代码咋拆分…咋组织 课程22~25 : https://time.geekbang.org/course/detail/100-11278

  5. 这些都过了,下面看 react 怎么测试。关于 react 测试: 强行硬广一波自己的笔记:https://github.com/pandoracat/frontend-testing ,我记录了自己的 javascript 测试的学习路程…

  6. 上面这些你都做了…咱们再把视频教程撸撸… 再次提升下自己的理解…

  7. 最后,react cnode , 新手练手都用它 😎…看看 它的 api, 咱们 ready go 写个项目试试. 这边是我正在写的 https://github.com/pandoracat/react-cnode 欢迎瞧瞧…我会写自己的 readme, 方便你照着模仿一个… 弱弱的觉得自己设计的风格还不错(偷笑,我是一个审美超级弱的前端妹纸) 怎么开始这个用 cnodejs.org 做 api 服务器的练手项目呢?请点击:https://github.com/pandoracat/react-cnode

群主弄了个 QQ 技术交流群: 371932256 ,方便讨论我的 cnodejs 的 react 版本的项目…一起进步…也欢迎高手加入…哈哈…

15 回复

怎么启动的?

不错,就是视频有点小贵

@weizhuanhua 啥怎么启动的?

@clancytom 弱弱的觉得200块很好…相对某些培训机构…动辄几千近万的培训费…这种高屋建瓴的课程…学了后,只要你资料找的对…起来还是挺快的哟

@weizhuanhua

首先安装所有依赖文件: npm install, 然后再启动… 启动方式是: npm run start 使用的脚手架是: create-react-app

create-react-app 可以到其 github 主页…看文档了解配置方式…

新加了项目架构说明… https://github.com/pandoracat/react-cnode

@weizhuanhua 请把 commit id 更新到: 51cf3008a11a89214b0af4227e69ff30c6876082

不错的!我也分享个挺多react视频教程的网站给大家 http://www.sucaihuo.com/search?keyword=react&mtype=30

@alicePan 还是不行 不弄了

@weizhuanhua 当然 ok, 不过我觉得你是没有更新代码到最新版本…

@mmhaobai 棒棒的哟

我弄了个 QQ 技术交流群: 371932256 ,方便讨论我的 cnodejs 的 react 版本的项目: https://github.com/pandoracat/react-cnode …一起进步…也欢迎高手加入…哈哈…

看下文档就上手,很简单

回到顶部