React 即时通信 UI 开发实战课程

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
    • 导航切换过渡动画
    • 会话窗口动画
    • 个人资料抽屉动画
    • 设置页面动画
  • 示例数据(静态)
    • 添加示例数据
  • 项目总结
    • 总与回顾