现代React Web开发实战

现代React Web开发实战 / React新版本+函数组件&Hooks优先=高效进阶

宋一玮 FreeWheel 中国研发中心前端架构师
  • 课程目录
  • 课程介绍
  • 在线阅读:开篇词|React Web开发这样学,才能独当一面!

    学习一门技术,务必要有大于一门技术的收获,这也是我开设这个专栏的初衷。

  • 01|身为Web前端工程师,我都在开发什么?

    没有所谓“学了白学”,读书讲究“开卷有益”,学习前端技术的每个知识点、每次实践都帮你踏出坚实的一步。

  • 02|开发前端有哪些要点?React框架是如何应对的?

    我个人认为所谓的“功能少”反而是React流行的重要原因之一。一个大而全的框架难免会落入一个窘境:学起来更累,用起来更重,定制起来也更受限。

  • 03|看板应用:从零开始快速搭建一个React项目

    我们需要了解一个现状,那就是现代前端开发早已结束了刀耕火种的时代,逐步向其他软件开发领域看齐。

  • 04|JSX:如何理解这种声明式语法糖?

    运用好JSX,可以很大程度提高你的React开发效率和效果。

  • 05|前端组件化:如何将完整应用拆分成React组件?

    当你连续做决定时,你的决定的效率和效果都会逐渐下降,甚至会做出错误的决定。

  • 06|虚拟DOM:为什么要关心React组件的渲染机制?

    理想状态下,开发者在开发React应用时,可以完全不去接触真实DOM,一定程度上隐藏了Web原生技术的细节,有助于提高开发效率。

  • 07|组件样式:聊聊CSS-in-JS的特点和典型使用场景

    在组件化开发中,CSS-in-JS技术能帮我们做到样式隔离、提升组件样式的可维护性、可复用性。

  • 08|组件生命周期:React新老版本中生命周期的演化

    无论是选择函数组件加Hooks,还是在类组件上一条路走到黑,都要学习组件生命周期。

  • 09|React Hooks(上):为什么说在React中函数组件和Hooks是绝配?

    对于纯函数组件来说,这些其他特性全部都是外部状态或副作用。

  • 10|React Hooks(下):用Hooks处理函数组件的副作用

    副作用就是让一个函数不再是纯函数的各类操作。

  • 11|事件处理:React合成事件是什么?为什么不用原生DOM事件?

    React里内建了一套名为合成事件(SyntheticEvent)的事件系统,和DOM事件有所区别。

  • 12|组件表与里(上):数据是如何在 React 组件之间流转的?

    当你理解了在React的设计哲学中数据应该如何流转,就会对如何设计props和state了然于心。

  • 13|组件表与里(下):用接口的思路设计开发React组件

    手工重构不出错的一个小技巧是“少吃多餐”,即把一个大的重构任务分解成若干小的步骤,确保每个步骤是可验证的。

  • 14|现代化React:现代工程化技术下的React项目

    这节课我会带着你,不依赖CRA,用现代的工程化技术重新搭建一个React项目,然后把oh-my-kanban的代码迁移过来,让它真正成为你自己的项目。

  • 15|不可变数据:为什么对React这么重要?

    我们这节课的主要内容是不可变数据。

  • 16|应用状态管理(上):应用状态管理框架Redux

    接下来我们会用两节课的时间,学习React的应用状态管理。

  • 17|应用状态管理(下):该用React组件状态还是Redux?

    这节课,我们会把Redux与React结合起来使用,看看它能为React的状态管理带来什么好处,同时也要探讨什么时候该用Redux,什么时候用React内建的state,更或者,是否可以混用两种状态管理。

  • 18|数据类型:活用TypeScript做类型检查

    这节课我们一起来学习如何活用TypeScript,在React应用中加入数据类型检查。

  • 19|代码复用:如何设计开发自定义Hooks和高阶组件?

    这节课,我们来学习如何设计开发自定义Hooks和高阶组件,以此达到抽象和代码复用。

  • 20|大型项目:源码越来越多,项目该如何扩展?

    这节课我们会继续讨论React应用的整体逻辑,看看大中型React项目在代码增多后,整体扩展上会遇到的挑战,以及如何应对这些挑战。

  • 21|性能优化:保证优秀的用户体验

    这节课,我们来了解一下常见的React性能问题和优化方案。

  • 22|质量保证(上):每次上线都出Bug?你需要E2E测试

    接下来两节课,我们将进入大中型React项目最重要的实践之一:自动化测试的学习。

  • 23|质量保证(下):测试金字塔与React单元测试

    这节课,我们继续学习大中型React项目的质量保证。

  • 24|工程化与团队协作:让我们合作开发一个大型React项目

    这节课,我会新搭建一个开源React项目,在其中设计一系列扩展点,然后请你跟我一起,合作开发这个大型React项目。

  • 加餐01|留言区心愿单:真·子组件以及jsx-runtime

    在本专栏选用的React 18.2.0版本和与它配套的CRA中,新JSX运行时也是被默认启用的。

  • 加餐02|留言区心愿单:Fiber协调引擎

    从React v16开始,协调从之前的同步改成了异步过程,这主要得益于新的Fiber协调引擎。

  • 直播加餐01|前端开发为什么要工程化?

    为什么要用工程化的方式去做前端开发呢?这节课我们会从上世纪末的前端开发讲起,同时也将进行技术方面的一些考古,看看能否从历史中有所借鉴,寻找前端开发要参与工程化的初衷。

  • 直播加餐02|Freewheel前端工程化的演进和最佳实践

    上节课我们通过软件开发生命周期,了解了前端开发为什么工程化,这节课,我就来相应地介绍一些我所亲身经历的前端工程化的最佳实践,希望能对你有所启发。

  • 结束语|对React和前端技术未来的展望

    “学习一门技术,要有大于一门技术的收获”,希望你有这样的收获。

30讲

全场 6 折| 11.11 特惠


你将获得

  • 发展趋势:建构立体的前端开发知识结构
  • 上手实践:快速开发简单的React前端应用
  • 团队协同:开发大型React项目的工作方式
  • 老兵心法:高效掌握现代前端工程化技术

讲师介绍

毕业于北京理工大学,曾先后供职于IBM、Amazon、一家O2O创业公司以及时光网,现任FreeWheel基础架构部前端架构师。

目前负责FreeWheel自研前端框架、BFF、微前端等方案的设计研发和推广。从最早的ASP、JSF、Flex、Dojo,一直到移动端、Angular,以及现在FreeWheel内广泛使用的React,从事前端开发和架构设计已有16年。

曾担任2017年北京ArchSummit专题讲师,在《FreeWheel在微服务架构下的前端改造实践》专题中介绍了公司该如何利用自研React组件库以及高度封装Redux的状态管理库,搭建并有效利用前端基础设施,将企业原有的巨型Ruby-on-Rails应用逐步迁移至多个React单页应用。

他把写代码视为一种持续学习,更当作是一种乐趣。目前身为公司的前端架构师,在架构设计、技术评审等工作的同时,坚持上手写代码,这样无论宏观还是微观层面,对公司的前端都会更有把握。

目前正在撰写一本关于React企业级应用开发的图书。业余时间他是重度COD爱好者,平常发挥不稳定,菜的时候一定会怨网不好。

最后,他还是资深铲屎官,坚定的猫派。


课程介绍

React技术作为现代前端技术的集大成者之一,是Web开发应用的一把利器。不过在实际工作中,很多前端开发者都存在一个误区。

那就是过于关注和强调“最新框架”“最新版本”,而缺乏对前端发展历史的深度了解,也缺少对前端新技术新领域的上手实践

具体到实际项目中,主要表现在“五个无所适从”:

  1. 在Web前端开发时过于局限在框架上,脱离了框架就无所适从了;
  2. 对各类开源React组件库很有心得,但需要自己写组件时就无所适从了;
  3. 编写相对简单的React样板项目手到擒来,项目规模提升后就无所适从了;
  4. 习惯于手工测试,需要引入自动化测试时就无所适从了;
  5. 停留在独自开发一个项目的舒适区,多人协作开发时就无所适从了。

为此,我们特地邀请了FreeWheel 中国研发中心前端架构师宋一玮老师。他会结合自己多年来在前端领域深耕的经验和思考,帮助你解决React Web应用开发中的难题。

宋老师提炼出了“两步走”策略,分别是“以史为鉴”和“上手实践”。

第一步,他首先会展示前端的历史脉络,并从中建构解决问题的新思路:哪些东西一直在变,又有哪些东西从没变过。从而帮助我们构建起坚固的知识技能图谱,坚定从事前端开发工作的信心,对抗“新技术来得太快学了白学”的焦虑。

第二步,他会带你上手实践项目。在他看来,实践从来都不是二维的,而是三维的。比如学习一个新框架应该是这样的过程:

  1. 每学到一些概念,就需要放到全局看看它们的位置;
  2. 每学到一部分API接口,就需要上手写代码加深印象;
  3. 在合适的时机去了解框架原理,把概念和接口关联起来;
  4. 这时再去学习下一批概念或接口,就会事半功倍。

特定到React Web项目的学习,宋一玮老师认为可以用一个公式来表达:React新版本+函数组件&Hooks优先+团队协作=高效进阶

课程模块设计

课程一共分为三个部分,分别是历史篇、“独狼”篇和项目篇。

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

老师会从软件前端发展的历史抽取部分片段,揭示一些规律。在此基础上,由前端的发展趋势引出课程主题——React技术,帮助你从前端架构和技术选型的视角,建立起对React技术栈的总体认识。

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

老师会先带着你创建一个React项目,快速开发一个简单的React Web应用。然后从这个应用的代码开始,从浅到深,一起学习React的基本概念,如JSX语法、单向数据流等。

在学习这些概念和API的过程中,不仅是How,老师还会穿插一些Why,力求让你在脑海中建立这些概念之间的逻辑关系。也就是下面这张思维导图的蓝色部分:

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

老师还会介绍一些更具挑战的React概念和技巧,包括不可变数据、应用状态管理、代码复用等。在React项目规模和复杂度不断提升时(上图中的紫色部分),它们将成为你的得力工具。

此外,你在单打独斗时可能会形成自己特有的开发习惯。但如果因为开发大型项目需要融入一个前端开发团队时,就有必要掌握一些不同的团队协作的工作方式,包括项目代码结构、单元测试、端到端自动化测试和持续集成。

当完成这些内容,你将会对大型React项目和团队协作有所准备,相信也会对你在前端开发领域的职业发展有所助力。


课程目录


适合人群

希望学习并使用React开发Web应用的初级或中级前端开发者,或是对React Web应用开发有兴趣的其他领域的开发者。


订阅须知

随机推荐

可心柔婴童乳霜纸入手怎么样?来看看买家评测!

秋田满满婴幼儿调味品点评怎么样?测评大揭秘!

ZMIQB818简单易上手吗?来看看图文评测!

魔幻厨房烘焙模具功能是否出色?小白买前必看评测?

小东北星厨水饺-馄饨点评怎么样?良心测评分享。

法丽兹饼干-膨化实用性高,购买推荐吗?测评结果报告!