React 即时通信 UI 开发实战课程
为什么选这门课？#
如果你是一名前端工程师或者是正在学习前端，苦于没有完整的项目经验，也没有人系统的指导你该如何开发一个前端项目，那么你一定非常希望有一套课程来为你指点迷津，并且在课程结束后能收获开发思路、项目经验和发展方向 —— 这就是这门课的目的。 市面上大多数的课程都围绕电商、企业官网、后台管理来做项目实战。而本课程不同的是：以即时通信应用 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 设计师可以帮助你更好的跟前端工程师沟通
课程目录#
- 课程介绍
- 项目演示
- 课程简介
- 环境配置
- 安装 Node.js
- 安装 VS Code 和插件
- 安装 yarn（可选）
- 创建 React 工程
- React 快速回顾
- styled-components 简介与配置
- Storybook 简介与配置
- 组件开发
- 组件与页面规划
- 导航栏
- 头像组件
- jsconfig.json 文件介绍
- hygen 模板代码生成器配置
- 图标组件
- 徽章组件
- 菜单组件
- 侧导航组件
- 消息列表
- 搜索框组件
- 排版组件
- 下拉菜单组件 - 过滤
- 按钮组件
- 过滤选项组件
- 消息卡片组件
- 消息列表页面组件
- 会话列表
- 标题栏组件
- 会话气泡组件
- 语音气泡组件
- Emoji 组件
- Popover 组件
- 底部操作组件
- 个人资料
- 个人资料&头像组件
- 个人信息部分
- 社交信息部分
- 分隔线组件
- 联系信息部分
- 相册组件
- 关闭按钮组件
- 设置页面
- InputText 组件
- Select（表单）组件
- Radio 组件
- Switch 组件
- 个人资料-设置页
- 编程个人资料组件
- 设置项组件
- 设置页面组件
- 屏蔽列表组件
- 其他列表组件
- 抽离过滤列表组件
- 联系人卡片组件
- 文件列表组件
- 笔记列表组件
- 其他组件
- 视频通话组件
- Dropdown 组件
- 组装聊天首页
- 路由管理
- React Router 介绍
- 配置导航路由
- 配置内容区域路由
- 创建动画
- React Spring 介绍
- Staggered Animation 配置
- 抽离动画为自定义的 Hooks
- 导航切换过渡动画
- 会话窗口动画
- 个人资料抽屉动画
- 设置页面动画
- 示例数据（静态）
- 添加示例数据
- 项目总结
- 总与回顾