现代 React Web 开发实战
宋一玮
FreeWheel 中国研发中心前端架构师
16115 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 31 讲
现代 React Web 开发实战
15
15
1.0x
00:00/14:32
登录|注册

开篇词|React Web开发这样学,才能独当一面!

讲述:宋一玮大小:13.27M时长:14:32
你好,我是宋一玮,欢迎加入 React 应用开发的学习。
React 作为当下极为火热的三大前端技术之一,市面上的相关课程、书籍和文档层出不穷,其中也不乏一些优质内容。那为什么我还要开设 React Web 应用开发这样一门课呢?
在近几年的开发工作中,我有幸与一些刚上手 React 不久的前端开发者共事,他们之中有些是刚入行的年轻人,有些是从其他技术栈,甚至是其他软件领域转过来的开发者,他们都很优秀。
在为前端开发队伍不断发展壮大感到高兴的同时,我也从中观察到一些问题,并将其归纳总结成了“五个无所适从”:
对 Web 前端开发形成了固化印象,过于局限在框架上,脱离了框架就无所适从了;
对各类开源 React 组件库很有心得,但需要定制或自己写组件时就无所适从了;
编写相对简单的 React 样板项目手到擒来,项目规模提升后就无所适从了;
在开发 Web 前端时习惯手工测试,当需要引入自动化测试时就无所适从了;
停留在独自开发一个前端项目的舒适区,多人协作开发时就无所适从了。
之所以有这些问题,是因为我发现很多前端开发者都有一个误区,那就是过于关注和强调“最新框架”“最新版本”,而缺乏对前端发展历史的深度了解,也缺少对前端新技术新领域的上手实践。
对此,我积累了一套从原理到实战的思考总结,并提炼了走出这个误区的“两步走”策略,分别是“以史为鉴”和“上手实践”,这一次想全部分享给你。

为什么总是学不好 Web 前端开发?

容我先向你介绍一下我自己。我曾先后供职于 IBM、Amazon、一家 O2O 创业公司以及时光网,现任 FreeWheel 中国研发中心基础架构部的前端架构师,负责 FreeWheel 自研前端框架、BFF、微前端等方案的设计研发和推广。
从最早的 ASP、JSF、Flex、Dojo,一直到移动端、Angular,以及现在 FreeWheel 内广泛使用的 React,我从事前端开发和架构设计已有 16 年。

以史为鉴,学习新技术

比起很多朝气蓬勃的年轻人,16 年不算短,硬要说优势的话,那就是一直专注于前端,亲身经历了诸多新老前端技术的更迭。
我想你肯定会说前端技术的更迭太快了,在这一轮又一轮的学习实践中,似乎没有什么能沉淀下来的东西。其实我跟你一样,并不清楚未来的新技术具体是什么,但我认为新老前端技术有很多相通的部分,相互之间有着紧密的传承
你应该知道,随着 Web 前端技术的能力和应用领域不断增多,Web 前端开发工作的广度和深度也随之提升,这就要求 Web 前端工程师必须构建起坚固的知识技能图谱。
因此解决“五个无所适从”问题的第一步,就是以史为鉴,从历史脉络中建构解决问题的新思路:哪些东西一直在变,又有哪些东西从没变过,从而对自己为之工作的前端应用有更立体的了解,并将其真正变成自己的知识。
比如有很多朋友都很熟悉 JSP,它是本世纪初非常热门的技术,但作为被寄予厚望的后继者 JSF(Java Server Faces)就没多少人用过了,就在这一少部分 JSF 开发者中,也许更少人会知道 JSF 1.1 有多少 Bug,1.2 有多么姗姗来迟,还有前面的版本与后来的 JSF 2.0 简直就是两个不同物种
虽然 JSF 的这种折腾精神导致它流失了不少用户,最终也败给了更务实的 Struts 框架。但我亲历过 JSF Web 应用项目,深刻领悟到了前端组件化开发的潜力,也为之后学习 Adobe Flex 和 Angular 奠定了扎实基础。
可以说,正是对软件前端发展规律的认识,才让我坚定了从事前端开发工作的信心,也在一定程度上帮助我对抗了“新技术来得太快学了白学”的焦虑。

上手实践,时常总结思考

不过,比起很多业内有威望有实力的前辈,16 年的工作经历也不算长,若问起我的自信从何而来,那我会说自己数年如一日,对新技术新领域一直保持上手实践的习惯。这也是解决“五个无所适从”的第二个方法,也是我认为最根本的方法。
对于上手实践,我们不能理解得太简单片面,以为实践时间投入得越来越多,技术的熟练程度就会越来越高。无论是从跟同行的交流中,还是从自己和身边同事朋友的经历中,我都意识到实践不是二维的,而是三维的
我想用一个螺旋学习曲线,来定义这个三维的学习实践过程:
如图所示,学习一个新框架,学习它的基本概念、上手调用 API 写代码,一般而言都属于技术表层;而理清概念之间的联系、理解 API 内部的原理,则属于技术底层。
如果学习实践只停留在表层,那一定会遇到瓶颈但如果这时更进一步,去学习底层,把概念和接口关联起来,就会豁然开朗;然后再回到表层,掌握程度就会不断提升。
我举一个有些微不足道的小例子。边框圆角是前端应用常见的一种设计,与功能无关,更多是在强调视觉和交互。然而 CSS 属性border-radius是从 2011 年的 IE9 才开始被浏览器支持,而且当年 IE9 市场份额还很小,那其他版本的浏览器该怎么实现呢?
我先后经历了切图 +table 定位、切图 +div+CSS、jQuery 插件。后来在 Android 2.1 上做 App 开发时,从它内建的九宫格图片(Nine-Patches)功能中受到启发,原来切图也可以推迟到运行时再做。于是我又专门去研究如何用 JS 解析 Photoshop 的 PSD 源文件,希望能进一步优化从设计稿到 HTML 原型的工作流程。
后来有一天商业软件 Sketch 横空出世,改革了原型设计工作,我也很识趣地放弃了这个尝试。但工程化的思路,为我后续快速上手 Gulp、Webpack 这些构建工具打下了基础。
从边框圆角到前端工程化,看似跨度过大,但这正说明了动手实践、深度理解技术表层与底层,支撑了我前端职业生涯发展的每一步
在我的观念里,无论软件架构还是前端架构,说到底都是对软件不同层次的抽象(Abstraction),而各类开发框架里的概念、模型、算法也是抽象,开发者编写的代码也包含抽象,三者具有相通性。
因此做架构、搭框架、写代码,都是前端开发工作的组成部分,并没有绝对的界限。

React Web 应用开发的正确打开方式

特定到 React 技术,我对如何学好这门技术也有一些自己的见解,可以用一个公式来表达——“React 新版本 + 函数组件 &Hooks 优先 + 团队协作 = 高效进阶”。
公式可能有点长,不过理解起来并不难,接下来我就具体地讲一讲。

新版 React,函数组件 +Hooks 优先

我是从 React v0.14 版本开始投入到 React Web 应用开发工作的。当时类组件还是主流,JSX、React 元素、props、state、context 这些概念已经稳定下来。
React 官方虽然试验性地推出了无状态函数组件,但功能还非常简单,无论是官方文档还是各类教程,都是以类组件为主。当 React 来到 v16.8.0,正式推出了 Hooks。从功能上来说,函数组件已经可以和类组件平起平坐了,不过毕竟还是新功能,文档教程还是以类组件为主。
然而三年过去了,React 已经推出了 v18.2.0 版本,函数组件加 Hooks 已经取代类组件成为 React 开发主流,多数文档教程们还在坚守着类组件。
我认为更有效率的 React 学习方式,是在掌握基础概念的同时,优先学习函数组件和 Hooks,必要时再补充类组件的知识。这样开发者就能更贴近 React 社区的最新趋势,更快上手实际项目的开发。

了解现实挑战,为团队协作做准备

但我并不认为这些已足够解决前面提到的“五个无所适从”的问题,我也不建议你止步于此。当你真正从事 React 前端开发的工作时,会有更多的挑战接踵而至。
这里引用一个我司 FreeWheel 的案例。我们利用自研 React 组件库以及高度封装 Redux 的状态管理库,搭建并有效利用前端基础设施,将企业原有的巨型 Ruby-on-Rails 应用,逐步迁移至多个 React 单页应用。
在整个迁移过程中,我们不仅要边学边用新框架,更要理解老框架是怎么工作的。为了降低产品迭代的成本和风险,在很长一个阶段中,我们都要保持新老框架的共存。
打个不恰当的比方,这种技术栈杂糅的情况就好像在四合院里建起了写字楼,再把写字楼的一半改建成东方明珠。我认识的不少开发者是有技术洁癖的,他们会有意无意地抵触这种技术共存的状态。
然而,正是这个大胆的改造方案,让我们的产品迭代和技术演进之间取得了平衡,既能更早地引入 React 技术,带来开发体验和用户体验的提升,也为后期清偿各种技术债务奠定了基础。
这个案例正好也佐证了,React 前端开发不仅仅是 React 框架本身,还包括对前端整体架构和 React 技术边界的把握,对新老前端技术差异的理解,与历史遗留代码的整合,与多个前端开发团队的协作,等等。
因此在面对一个大型 React 项目时,我们不仅需要掌握一些趁手的工具,还要建立在团队中协作开发的工作方式和技术体系。

课程是怎么设计的?

刚刚说的这些,其实也正是咱们这门课的核心设计理念。接下来,我就说说这门课具体是怎么设计的。

历史篇:建构对 React 技术栈的总体认识

我会从软件前端发展的历史抽取部分片段,揭示一些规律,为你增加学习前端技术和从事前端开发工作的信心。
在此基础上,将由前端的发展趋势引出课程主题——React 技术,从前端架构和技术选型的视角,让你对 React 技术栈建立一个总体认识。

“独狼”篇:快速开发简单的 React 前端应用

我会先带着你创建一个 React 项目,快速开发一个简单的 React Web 应用。然后从这个应用的代码开始,从浅到深,一起学习 React 的基本概念,如 JSX 语法、单向数据流等。
在学习这些概念和 API 的过程中,不仅是 How,我还会穿插一些 Why,力求让你在脑海中建立这些概念之间的逻辑关系。也就是下面这张思维导图的蓝色部分:

项目篇:高效掌握现代前端工程化技术

在这个模块,我会介绍一些更具挑战的 React 概念和技巧,包括不可变数据、应用状态管理、强类型校验、代码复用(也就是上图中的紫色部分),在 React 项目规模和复杂度不断提升时,它们将成为你的得力工具。
此外,你在单打独斗时可能会形成自己特有的开发习惯。但如果因为开发大型项目需要融入一个前端开发团队时,就有必要掌握一些不同的团队协作的工作方式,包括项目代码结构、单元测试、端到端自动化测试和持续集成。
当完成这些内容,你将会对大型 React 项目和团队协作有所准备,相信也会对你在前端开发领域的职业发展有所助力。

开篇寄语

我深知开发者用于学习的时间精力是很有限的,投入一门课的时间,肯定希望这门课物超所值。相应的,学习一门技术,务必要有大于一门技术的收获,这也是我开设这个专栏的初衷。
好了,千里之行始于足下,我们第一节课见!
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

React Web开发文章总结: 宋一玮的《React Web开发》一文深入探讨了前端开发中的React技术,并提出了以“以史为鉴”和“上手实践”为策略的学习方法。他强调了对前端发展历史的深度了解,并推崇通过实践来不断总结和思考。文章还介绍了宋一玮对React技术的见解,包括函数组件和Hooks的优先学习,以及团队协作对于React前端开发的重要性。他还分享了自己在前端开发领域的经验和案例,以及对大型React项目和团队协作的见解。整篇文章围绕着历史篇、独狼篇和项目篇三个核心设计理念展开,为读者提供了系统的React技术学习路径。通过这篇文章,读者可以获得对React Web应用开发的正确打开方式的深入了解,以及如何避免在学习和实践中陷入困境。宋一玮的经验分享和学习方法对于前端开发者来说具有很高的参考价值,尤其是对于想要深入学习React技术的读者来说,这篇文章是一份宝贵的指南。

2022-08-2240人觉得很赞给文章提建议

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《现代 React Web 开发实战》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(14)

  • 最新
  • 精选
  • 🐑
    置顶
    你好,我是咱们《现代React Web开发实战》的专栏编辑!课程中的相关代码我都放在了这里,你可以根据需要来学习👇 🌟https://gitee.com/evisong/geektime-column-oh-my-kanban 这是oh-my-kanban项目源代码。 🌟https://gitee.com/evisong/geektime-column-oh-my-kanban/commits/main 这个是03分步骤提交的commits。 🌟https://gitee.com/evisong/geektime-column-oh-my-kanban/releases/tag/v0.3.0 这个是03的完整代码。
    2022-08-25归属地:北京
    12
  • 俞俊001
    老师你好,对于您画的 “三维坐标图” 有个疑问想要请教: 为什么要把 “表层” 和 “掌握层度” 分成两个维度? “表层” 知识不是属于 “掌握层度”这个抽象里面吗?是不是只需要两个维度即可?

    作者回复: 你好,俞俊001,很高兴你对“螺旋学习曲线”感兴趣。我来用三维模型的三视图来进一步解释一下这个学习曲线(留言区不能贴图,我用ASCII图试试): ________________________________________________ 【正面】            ▲            │ 掌握程度            │      ▲            │     ┌┘       ┌────┼─────┘       └┐   │        └───┼───┐            │   │            │  ┌┘         ┌──┼──┘         │  │         └┐ │          └┐│ ◄─────────┴┴───────────► 技术表层                技术底层 ________________________________________________ 【侧面】 ▲ │ 掌握程度 │                 ┌─► │                 │ │                ┌┘ │              ┌─┘ │             ┌┘ │         ┌───┘ │        ┌┘  (瓶颈期) │       ┌┘ │   ┌───┘ │  ┌┘ (瓶颈期) │┌─┘ └┴─────────────────────►                     学习投入 ________________________________________________ 【俯视】 ▲ 技术底层 │                ┌──► │               ┌┘ │       ┌──┐    │ │      ┌┘  │    │ │    ┌─┘   │    │ ├┬───┼─────┼────┼──────► │└┐  │     │    │   学习投入 │ └──┘     │    │ │          └┐   │ │           └┐  │ │            └──┘ │ ▼ 技术表层 ________________________________________________ 不知道有没有回答你的疑问?

    2022-08-26归属地:北京
    19
  • Tristan
    这五个无所适从,真说心坎里去了

    作者回复: 你好,Tristan,很高兴能引起你的共鸣,在后续的课程中我会跟大家一起解决掉这“五个无所适从”。

    2022-08-22归属地:北京
    2
    8
  • Tokamak
    一直徘徊在学习前端 -> 做个小demo -> 忘记 -> 再重学前端,这一次一定要跟着老师将前端的知识学会。

    作者回复: 你好,Casper,很高兴看到你的决心:) 所谓学而时习之,如果你做前端开发的机会相对比较少,可以考虑在业余开发一个小的前端工具,开源并持续维护它。

    2022-08-29归属地:北京
    2
    1
  • Endure
    学习一门技术,务必要有大于一门技术的收获

    作者回复: 你好,Endure,是的,这点很重要,在制作课程期间我会时刻铭记这一点,也请你监督:)

    2022-08-25归属地:北京
    1
  • 打卡主持人
    老师很有洞见🤔打卡学习第一天!

    作者回复: 你好,不是苏苏,一起打卡,一起加油!

    2022-08-23归属地:北京
    1
  • 智能-杨晋
    老师你还,问个简单的问题,你的后缀名为啥不是.jsx?你的idea能识别吗?

    作者回复: 你好,智能-杨晋,我习惯用的IDE是VSCode,VSCode能识别包含JSX的.js文件。之所以用.js扩展名,是因为这是Create React App脚手架工具的默认模版。 我个人比较推荐对包含JSX语法的JS文件,用.jsx作为后缀名,这样可以一目了然地把组件跟普通JS区别开。

    2022-09-23归属地:北京
  •  
    这个不是视频吗

    作者回复: 你好,(空格),这个专栏是音频加文稿的形式。之前上新时有一次视频直播,感兴趣的话可以看一下。

    2022-08-27归属地:北京
    2
  • 爱微笑的酒窝
    希望有时间一直跟下去 一起加油

    作者回复: 你好,爱微笑的酒窝,非常期待你能完整地学习这个专栏,同时也希望你能从每一讲中都有所收获。

    2022-08-25归属地:北京
  • 棒棒的小伙
    很喜欢课程的 内容 希望更新加速:)

    作者回复: 你好,棒棒的小伙,很高兴你能喜欢这个专栏,我会和我的编辑一起,尽全力保证更新速度。

    2022-08-24归属地:北京
收起评论
大纲
固定大纲
为什么总是学不好 Web 前端开发?
以史为鉴,学习新技术
上手实践,时常总结思考
React Web 应用开发的正确打开方式
新版 React,函数组件 +Hooks 优先
了解现实挑战,为团队协作做准备
课程是怎么设计的?
历史篇:建构对 React 技术栈的总体认识
“独狼”篇:快速开发简单的 React 前端应用
项目篇:高效掌握现代前端工程化技术
开篇寄语
显示
设置
留言
14
收藏
44
沉浸
阅读
分享
手机端
快捷键
回顶部