收藏

稿件投诉

记笔记

  • 用手机看
打造 React 即时通信 UI 库 2020

1.7万

已完结 · 共77课时

长期有效

打造属于自己的 React UI 库

发布者
关注
up

峰华前端工程师

前端开发工程师,擅长干货式教学。毕业于美国史蒂文斯理工学院,计算机科学硕士。

课程概述

评论(0)

注意:课程录制与 2020 年,重点是 CSS 样式的打造和 React 组件化思维培养,涉及框架本身的知识不多,所以版本不重要,在学习过程中可以尽量把软件版本和示例代码中的一致,否则会出现不兼容的现象,或者如果你已经有良好的自学能力,可以使用最新的版本。 如果你是一名前端工程师或者是正在学习前端,苦于没有完整的项目经验,也没有人系统的指导你该如何开发一个前端项目,那么你一定非常希望有一套课程来为你指点迷津,并且在课程结束后能收获开发思路、项目经验和发展方向 —— 这就是这门课的目的。 市面上大多数的课程都围绕电商、企业官网、后台管理来做项目实战。而本课程不同的是:以即时通信应用 UI 组件库和示例页面作为切入点,全面的演示了一套完整的 UI 库的实现过程,课程结束后,不但可以增加项目经验,扩充作品集,还可以在此基础上扩展为应用到各行各业的 UI 库,就像 Ant Design 和 Element UI。 这门课程以 React 为核心技术框架,为什么选择了 React 而不是用的人数比较多的 Vue 呢?因为: ● React 更接近于原生的 HTML,相当于自定义 HTML 标签,入门更容易。 ● React 编写的代码简洁,让开发者只关心组件的定义和状态的管理,其他像组件的注册都由 React 自行管理。 ● React 的用户量庞大,生态系统完善,很多开发理念都是围绕 React 产生的,比如 CSS-in-JS,GraphQL。 ● React 在国内大型企业应用广泛,掌握 React 开发的工程师求职更有竞争力。 学完本课程你将能够... ● 熟练使用 React 及其生态开发 UI 组件 ● 培养组件化的设计与开发思维 ● 开发可复用的组件,提升开发效率 ● 了解企业协作开发的方式 你将学到... ● React + Hooks 真实案例开发 ● Styled-Components 强大的组件样式管理 ● Storybook 组件文档化,方便团队协作 ● React Router 路由控制 ● React Spring 动画实现 ● React 组件设计思想 ● 设计思维 ● 以及更多 课程包括 ● 1 整套通用的 React UI 组件库 ● 30+ 常用组件 ● 5 个示例即时通信页面 ● 源代码 ● 图片素材 课程不包括 课程重点关注前端 UI 组件化设计思路,打造自有前端 UI 库,类似 Ant Design, 所以下列内容不包含在本课程中(考虑后续课程推出): ● Redux 数据流管理 ● 后端即时通信业务逻辑 面向人群 需要拥有扎实的 HTML、CSS、JS 基础 了解 React 基本概念(属性,状态)(非必需) 如果你没有 React 基础,也能够学会 HTML+ CSS 实现常见的 UI 组件。 如果你是 UI 设计师可以帮助你更好的跟前端工程师沟通
常见问题
Q:课程在什么时间更新?
A:课程更新频次以页面前端展示为准。购买成功后,课程更新将通过账号动态提示,方便及时观看。
Q:课程购买后有收看时间限制吗?
A:购买后除不可抗力因素外,本课程长期有效,请您放心购买。
Q:原价购买课程后,如遇到优惠折扣,是否可以退还差价或重新购买?
A:虚拟商品付款后无法返还,请您随时留意各类课程折扣信息,按需购买。
Q:购买课程后是否可以加入老师的粉丝群或者用户群?
A:如老师设置用户群,我们将邀您加入,但我们无法承诺所有老师均提供用户群服务,感谢理解。

查看更多

购买须知

1. 本内容为付费内容,购买成功后方可观看。

2. 本内容为虚拟服务,已购买内容不支持退款,敬请谅解。

3. 实际购买价格以页面展示的价格及订单结算页显示价格为准。

98 元/77课时 立即购买
课程目录

课程介绍

1

全集试看

项目演示

视频课

1分

2

全集试看

课程简介

视频课

1分4秒

3

源码下载

视频课

47秒

环境配置

4

安装Node.js

视频课

1分21秒

5

安装 VS-Code和插件

视频课

58秒

6

安装 yarn

视频课

33秒

7

创建 react 工程

视频课

2分13秒

8

全集试看

React 快速回顾

视频课

9分37秒

9

Styled-components 简介与配置

视频课

5分24秒

10

Storybook 简介与配置

视频课

3分

组件与页面规划

11

组件与页面规划

视频课

2分16秒

侧导航

12

头像组件设计与分析

视频课

3分32秒

13

头像组件开发-React部分

视频课

4分14秒

14

头像组件开发-样式部分

视频课

6分43秒

15

头像组件开发-添加属性

视频课

7分59秒

16

jsconfig.json 文件介绍

视频课

3分42秒

17

Hygen模板生成器配置

视频课

7分17秒

18

icon 组件

视频课

9分51秒

19

徽章组件

视频课

7分58秒

20

菜单项组件

视频课

7分53秒

21

侧导航组件

视频课

3分49秒

侧边栏

22

搜索框

视频课

7分

23

排版组件

视频课

8分2秒

24

下拉选项组件-过滤

视频课

3分27秒

25

按钮组件

视频课

4分46秒

26

过滤选项组件

视频课

2分57秒

27

消息卡片组件

视频课

10分13秒

28

消息列表组件

视频课

3分4秒

内容区

29

标题栏组件

视频课

3分26秒

30

会话气泡组件

视频课

6分39秒

31

语音消息组件

视频课

4分7秒

32

Emoji组件

视频课

2分15秒

33

Popover组件

视频课

8分16秒

34

底部操作组件

视频课

5分15秒

35

会话窗口组件

视频课

2分55秒

滑动抽屉

36

个人资料&头像组件

视频课

2分42秒

37

个人信息部分

视频课

57秒

38

社交信息部分

视频课

2分31秒

39

分隔线组件

视频课

1分7秒

40

联系信息部分

视频课

1分22秒

41

相册部分

视频课

2分43秒

42

关闭按钮

视频课

1分10秒

设置页面

43

InputText组件

视频课

5分14秒

44

select(表单)组件

视频课

1分40秒

45

Radio 组件

视频课

5分35秒

46

Switch 开关组件

视频课

3分13秒

47

个人资料-设置页

视频课

4分42秒

48

编辑个人资料组件

视频课

6分25秒

49

设置项组件

视频课

3分12秒

50

设置页面

视频课

1分47秒

51

屏蔽列表组件

视频课

5分11秒

其他列表组件

52

抽离过滤列表组件

视频课

3分23秒

53

联系人列表组件

视频课

2分42秒

54

文件列表组件

视频课

3分32秒

55

笔记列表组件

视频课

2分58秒

其他组件

56

视频通话组件

视频课

7分26秒

57

Dropdown组件

视频课

4分51秒

58

组装聊天首页

视频课

3分8秒

路由管理

59

react-router介绍

视频课

1分15秒

60

配置导航路由

视频课

4分53秒

61

配置内容区域路由

视频课

5分12秒

创建动画

62

react-spring 介绍

视频课

1分56秒

63

staggered-animation配置

视频课

2分29秒

64

抽离动画为自定义的 hooks

视频课

2分30秒

65

导航切换过渡动画

视频课

3分28秒

66

会话窗口动画

视频课

3分14秒

67

个人资料抽屉动画mp4

视频课

1分31秒

68

设置页面动画

视频课

1分

添加示例数据(本地)

69

添加示例数据

视频课

2分33秒

总结与回顾

70

总结与回顾

视频课

3分40秒

版本更新

71

迁移 styled-components 5.3

视频课

1分52秒

72

迁移 React Router 6.3

视频课

7分10秒

73

迁移 React Spring 9.5

视频课

2分41秒

74

迁移 Create React App 5.0

视频课

1分9秒

75

迁移 React 18.2

视频课

1分35秒

76

迁移 storybook 6.5

视频课

3分17秒

77

迁移 font awesome 6.1

视频课

1分2秒

相关推荐
课程封面

2026徐老师Next.js16全栈开发课程

2026最新录制Next.js 16版本全栈开发课程

1848播放/共143课时

课程封面

【最新版】Vue3从入门到精通(含资料)

对新手友好,手把手从零入门Vue,企业级实战项目落地

20.6万播放/共158课时

课程封面

React18 从入门到实战(含全套资料)

系统学习 React ,掌握大厂必备技能

20.1万播放/共95课时

课程封面

android支付实战课程集成支付宝支付

课程包含了后端代码,后端异步通知以及数据库的创建

927播放/共10课时

课程封面

Python小白也能听懂的入门课

Michael老师,ViaX盐趣签约导师,南洋理工大学博士。新华网大数据分析师、新加坡A-STAR研究中心研究员、曾获“新加坡总统奖学金”、论文曾多次发表在CSWIM、ICIS、ISR、IS等国际会议

396.1万播放/共20课时

课程封面

Javascript+Nodejs全栈前端全能课

【2024最新】前后端兼顾,全面系统、通俗易懂、案例丰富

63.3万播放/共424课时

课程封面

前端项目:从零搭建Vue3+Node智慧校园系统

模拟学生视角,打造毕设闭环+真实业务场景,学完无缝接轨企业

10.7万播放/共64课时

课程封面

Web前端入门:从零开始做网站

带社群答疑服务,赠送全部课件、素材、模版、软件

106.9万播放/共31课时

课程封面

前端实战训练:2个网站+1个APP

不止教技术,还教思维的前端系统入门课,手把手带你轻松搞定2个网站+1个APP项目,全场景养成你的思维、技术的高能方法论

54.4万播放/共52课时

课程封面

python上位机开发

利用python上位机开发案例让你快速掌握python上位机

2.2万播放/共38课时

课程封面

Web开发前沿技术栈(持续更新)

本课程希望提供系统、全面、最新的Web前端技术

2.3万播放/共243课时

课程封面

【Unity与C#实战】从零开发类皇室战争游戏

从0开发一个完整的商业案例,学会后可以自行开发其他3D案例。

35.8万播放/共62课时

课程封面

Grid网格布局

一门课全面了解Grid网格布局

5498播放/共32课时

课程封面

HTML5+CSS3基础实战

HTML5+CSS3零基础到实战

48播放/共36课时

课程封面

哲玄课堂-大前端面试宝典

大厂面试官-详解大前端八股文

216播放/共4课时