V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
feibilanceon
V2EX  ›  程序员

从零学习 React 技术栈系列教程连载

  •  
  •   feibilanceon · 2017-08-30 21:38:16 +08:00 · 5114 次点击
    这是一个创建于 2423 天前的主题,其中的信息可能已经有所发展或是发生改变。

    教程主要内容介绍

    教程主要会分为六个部分进行讲解,在简要的基础知识准备和开发环境搭建之后,我会分别对 React/Redux/react-router 的关键知识点进行讲解,之后还会介绍到如何在 React 应用中编写样式,在最后一个部分,我们将一同实现一个运用上述 React 技术栈实现的 Todolist 应用。

    为什么会有这个系列教程?

    互联网上什么都有,杂乱无章。信息太多,相当于没有信息,选择太多,相当于没有选择。React 的中文资源比较少,大多数都已经过时,使用的是一两年前的版本,跟不上官方的版本更迭,且有一些中文资料由于翻译的不准确存在一些知识性的错误,很有可能会误导初学者。

    中文的学习资源还是太少,而且良莠不齐。国内前端学习者普遍英文水平还不够,况且现在前端发展这么快,等学好英语考过四六级,说不定 React 已经过气了。

    另外,网上还没有综合 React 技术栈所有库的最新版本的教程和代码示例。一些教程虽然非常优秀,但随着 React 及相关库的新版本发布,这些教程已经过期,甚至提供的示例代码已经不能正常运行了。

    本教程相较其他 React 学习资源的优点在哪里?

    我在准备教程的过程中查阅大量资料,综合了国内外所有优秀的 React 学习资源,萃取其中最精华的知识点,选择最为流行的 React 技术栈,立足最新版本的官网文档,在帮助新手入门上手的同时,也会对一些重要的知识概念进行讲解,满足初级、中级各个学习阶段和水平的同学。

    全部采用当前发布的正式版本库进行教学,确保我用起来是这个样子,你学完之后用起来也是这个样子。

    本教程的前置知识

    想要学习本教程的同学最好对 JavaScript 基础知识、ES6 新特性等相关内容掌握了解。熟悉 JavaScript 中变量、对象、函数等基本概念,ES6 中 const/class/箭头函数 /解构赋值等新语法的基本使用。

    本教程使用的框架版本及软件依赖

    框架及库

    软件及工具

    教程连载发布在我的博客和公众号上:

    • 微信搜索公众号 余博伦 每早 7:30 准时推送连载教程
    • 我的博客 每晚更新

    已发布的教程目录

    正在或准备学习 React 的同学可以参考交流一下。

    第 1 条附言  ·  2017-09-16 23:33:37 +08:00
    18 条回复    2017-09-01 00:02:01 +08:00
    tmxklzp
        1
    tmxklzp  
       2017-08-30 21:47:42 +08:00 via Android
    为余大打 call
    paledream
        2
    paledream  
       2017-08-30 21:50:17 +08:00
    最近在学 React,感觉 React 本身不难,难的是 Redux 后理解起来比较绕
    liruifengv
        3
    liruifengv  
       2017-08-30 21:50:24 +08:00 via Android
    才知道原来博客比公众号早
    fytriht
        4
    fytriht  
       2017-08-30 22:12:10 +08:00 via iPad
    这个目录..... 不如直接看官方文档?
    KeepPro
        5
    KeepPro  
       2017-08-30 22:20:31 +08:00 via Android
    我也感觉。redux 比较绕。最近尝试想用 mobx 作为替代
    feibilanceon
        6
    feibilanceon  
    OP
       2017-08-30 22:24:22 +08:00 via iPhone   ❤️ 1
    @fytriht 内容以及侧重点是不一样的,而且有代码示例,另外官方文档也是我们翻译的,可以在 https://doc.react-china.org 查看。
    tyrealgray
        7
    tyrealgray  
       2017-08-30 22:26:42 +08:00
    如果说是 react 系列的话,感觉可以把 flow 这个库也加上。
    codermagefox
        8
    codermagefox  
       2017-08-30 22:27:51 +08:00
    已收藏,希望楼主不要断更,萌新前端准备从你的教程入手了.
    feibilanceon
        9
    feibilanceon  
    OP
       2017-08-30 22:31:59 +08:00 via iPhone
    @tyrealgray 嗯,有精力的话,mobx 之类的也会聊聊。
    feibilanceon
        10
    feibilanceon  
    OP
       2017-08-30 22:32:26 +08:00 via iPhone
    @codermagefox 保证不会断更的。
    83f420984
        11
    83f420984  
       2017-08-30 23:27:41 +08:00 via Android
    谢谢,正好在学,收藏了
    hamalz
        12
    hamalz  
       2017-08-31 02:14:15 +08:00
    求换背景颜色,黄色有点辣眼睛😂
    TabGre
        13
    TabGre  
       2017-08-31 07:57:03 +08:00 via iPhone
    原来是我博伦大哥啊
    zyc841584303
        14
    zyc841584303  
       2017-08-31 08:21:41 +08:00
    redux 比较蛋疼
    yongjing
        15
    yongjing  
       2017-08-31 08:50:41 +08:00
    楼主的网站 ico 跟 chrome CL1024 插件相似度好高呀
    KnightYoung
        16
    KnightYoung  
       2017-08-31 12:55:37 +08:00
    提个建议,你的 blog 是否设置了延时滚动?个人感觉体验不是很好,感觉会有一些掉帧.是不是可以考虑去掉?
    feibilanceon
        17
    feibilanceon  
    OP
       2017-08-31 13:45:23 +08:00 via iPhone
    @KnightYoung 嗯,回头我调整一下
    t1518968889
        18
    t1518968889  
       2017-09-01 00:02:01 +08:00 via Android
    好黄~不忍直视~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2847 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 13:38 · PVG 21:38 · LAX 06:38 · JFK 09:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.