你将学到的
  • 前沿的前端开发方式
  • TypeScript 开发 React 项目
  • 前端组件的单元测试
  • React Hooks 的使用
  • 复杂的组件化开发
  • webpack 项目打包配置
课程内容
  共8个章节
lab-classic 实验 1 学习前的准备

知识点: 1.什么是TypeScript 2.什么是ReactHooks 3.什么是组件化开发 4.什么是单元测试

lab-classic 实验 2 搭建项目环境

知识点: 1.webpackconfigjswebpack配置 2.tsconfigjsonTypeScript配置 3.babelrc 4.源码入口以及项目分层

lab-classic 实验 3 TypeScript 基础

知识点: 1.基础类型 2.interface 3.泛型 4.类

lab-classic 实验 4 在 React 中使用 TypeScript

知识点: 1.classcomponent 2.泛型声明component的props和state 3.类

知识点: 1.useState 2.useEffect 3.useCallback 4.useMemo 5.useRef 6.函数式编程

lab-classic 实验 6 编写 DatePicker

知识点: 1.css3animation 2.受控组件 3.自定义hooks 4.moment日期处理库 5.组件拆分 6.父子组件通信

lab-classic 实验 7 编写单元测试

知识点: 1.jest 2.enzyme 3.快照测试 4.模拟文件和函数

lab-classic 实验 8 发布到 npm 仓库

知识点: 1.packagejson配置 2.模块规范 3.npm包管理器

课程介绍

该课程详细讲解了使用 TypeScript + React Hooks 开发一个复杂的 DatePicker 组件,共分为 8 个章节。其中,1、2 章节主要讲解课程用到的一些技术和完整的前端项目环境搭建; 3、4 章节介绍 TypeScript 的基础语法并介绍了怎样在 React 中使用 TypeScript。第 5 章节详细介绍 React Hooks 的一些使用和原理。第 6 章节详细讲解一个复杂的日期选择器组件 如何拆分、组合、然后实现。最后两章介绍前端开发往往忽略的一些点,比如通过单元测试保证代码质量。并且介绍了一些常用的模块规范,package.json 的一些细节以及如何发布到 npm 提供给大家使用。

为什么学这个课程

在如今的前端项目中,越来越多技术选型采用了 TypeScript 进行开发。JavaScript 作为一个流行的开发语言虽然被广泛使用,但由于自身的一些设计缺陷和作为弱类型本身过于灵活的问题,导致了在大型前端工程或多人开发的项目中,缺少类型检测,容易失控,而且维护、重构也比较困难。使用 JavaScript 的超集 TypeScript 帮助我们静态类型检查,再配合现代化的编辑器,提高开发体验,减少运行时的错误。更可控,重构也更可行可靠。

React Hook 是今后 React 团队主推的编程方式,组件开发更加函数式,逻辑复用更加的简单。

DatePicker 作为一个前端常用的组件,开发时往往直接采用第三方开源组件库的实现。本课程就使用 TypeScript + React Hooks ,从 0 开始一步一步地开发一个 DatePicker 组件。 通过这个课程,你可以学习到复杂的组件是如何开发的,也可以了解清楚 DatePicker 的实现原理。相信通过这样一个结合学习, 你的前端技术可以得到一个系统提升。

课程特色

从 0 开始由浅到深,从项目搭建到最终的 DatePicker 开发完成,事无巨细的进行教学。本课不只是教你怎么用, 更要教你为什么要用,用知其然并知其所以然的方式,让你对前端开发有一个系统的学习。

效果演示

先学课程

课程难度

本课程难度中等。

适合人群

  • 有一定 React 技术栈相关基础,喜欢前端和新技术的用户。

课程信息

  • 学习周期:课程有效期 2 个月, 2 个月后实验文档一直可以看,但无法进行在线实验。高级会员有效期内可一直学习(部分实验环境因为成本较高会限制次数),高级会员到期后课程失效(不能看文档)。
  • 课程价格:当前优惠价格 99 元。
  • 企业团报:可获得更多支持服务,请点击 购买咨询
课程教师

包邮的黄瓜 共发布过 1 门课程

查看老师的所有课程 >
实验楼楼+
实验楼会员