本课程将带你使用 NextJS + AntD 从零开始开发一个具有帐号和任务系统的单页网站应用(SPA),并且能够自动适配手机屏幕和对搜索引擎友好。课程内容来源于作者开发 及未支付 网站的实践经验,因此具备很强的工程实践参考性。Next.js 是一个 React 应用框架,无需做任何配置就可让你的应用获得服务端渲染、自动代码分割、客户端路由、代码热加载等特性。AntD 是蚂蚁金服开源的一个企业级应用组件库,提供了数十个功能强大而灵活的组件,能够满足百分之八十的 Web 交互场景。NextJS + AntD,让你十分钟之内可以开始编写你的第一行业务代码,几天时间就能开发完成一个简单的网站。即便你不使用 NextJS 和 AntD,本课程也能教给你许多 React 应用开发的实战技能。

课程地址

因不同平台收取的服务费不同,因此各平台课程价格略有差异。大家可以自由选择在哪个平台购买,内容都会同步更新。如有任何有关课程购买的疑问,可加入 QQ 群 729051923 咨询。

适用人群

学习过 HTML、CSS 和 JavaScript 等 Web 前端基础技术,渴望职场进阶的初级工程师。

课程资料

  1. 技术讲解示例代码
  2. 实战项目代码

由于 GitHub 仓库代码更新(优化或修复 Bug)比课程内容快,因此课程里所讲代码跟仓库代码可能会有细微差别。如有不同之处,请以仓库代码为准。

课程答疑

学习过程中遇到任何问题可至 叽歪论坛 发帖提问,请先按 此贴 说明申请会员,以便享受会员服务。

QQ 讨论群 594403865,讨论群为附赠服务,不保证答疑及时性。

功能演示

内容介绍

本课程共包含四个章节,最终目标是为了完成一个真实在线网站 及未支付 的精简版。第一个章节会对项目开发中用到的一些基础技术进行讲解,并搭建好应用骨架,以便为后面的业务功能开发做好准备。第二个和第三个章节主要是进行业务功能开发,分别是开发帐号系统和任务系统,其中也会穿插讲解一些技术知识点或者工程实践方面的技巧。最后一个章节是部署和运维应用,随着云计算的流行,很多开发团队已经没有专门的运维人员,都是开发人员兼任运维,因此这部分的技能对于开发人员来说也比较重要。

搭建应用骨架:掌控全局

  • React 为什么这么流行:变化的 UI 太难把控
  • 选择 NextJS 的重要原因:服务端渲染很重要
  • 使用 AntD 组件快速构建 UI:避免重复发明轮子
  • 使用 Redux 来管理状态:应用的复杂性源于其状态变化
  • CSS-in-JS 的 Styled-JSX:兼容 CSS 但支持变量和局部作用域
  • 新一代编码神器 VSCode:工欲善其事必先利其器
  • Chrome 开发工具:前端开发人员必备
  • 让应用 Run 起来:麻雀虽小五脏俱全

开发帐号系统:做一个有身份的人

  • 使用 Cookie 和 Session 来保持会话:让服务端知道你是谁
  • 与服务端交互:让网站动起来
  • 模拟服务端 API:做一个不依赖服务端的应用
  • 功能开发之注册/登录
  • 功能开发之退出
  • 功能开发之个人资料
  • 妥善处理错误:别把用户蒙在鼓里

开发任务系统:大家都来做任务

  • 本地持久化应用状态:千万别丢失用户数据
  • 功能开发之发布/编辑任务
  • 功能开发之展示/完成任务
  • 功能开发之评价任务
  • 功能开发之任务列表
  • 适配手机屏幕:对低头族友好点儿
  • 美化 URL:讨好搜索引擎

部署和运维:接受用户的考验

  • 版本化本地持久化数据:让老用户顺利升级到新版
  • 创建可配置的应用:提升代码可维护性
  • 使用 Docker 来简化部署:不懂 Linux 也能做运维
  • 启用 HTTPS:别让数据裸奔
  • 使用 GZip 和 CDN:页面加载还可以更快
  • 监控网站状态:996 还不够,7x24 才可以
  • 分析网站流量:谁在访问我的网站

参考资料

  1. 技术讲解代码示例
  2. 实战项目代码
  3. React
  4. NextJS
  5. AntD
  6. Redux
  7. Styled-JSX
  8. Caddy https://caddyserver.com/
  9. Let’s Encrypt https://letsencrypt.org/
  10. 天火技术博客
  11. 天火 GitHub