在开始编写你的第一行 React 应用的业务代码之前,你是否花费了数小时甚至几天的时间来折腾配置,以便让你的应用可以获得服务端渲染、自动代码分割、客户端路由、热加载等特性。现在开始,你可以使用 Next.js,一个 React 应用框架,无须作任何配置就可以让你的应用具备这些能力。还在从零开始编写你的网站 UI?花费了数小时你才完成了一个还算通用的级联选择器,项目开发的大半时间都花在了设计和开发这些通用的 UI 组件上。现在你有更好的选择,使用 AntD 组件库,数十个功能强大又灵活,能够满足你的网站百分之八十 UI 交互场景的组件可供你选择。NextJS + AntD,让你十分钟之内可以开始编写你的第一行业务代码,几天时间就能完成一个轻量级的,具有良好用户体验和对搜索引擎友好的网站。

本课程将带你使用 NextJS + AntD 从零开始开发一个具有帐号系统和任务系统的单页网站应用(SPA),并且会适配手机屏幕和对搜索引擎友好。课程内容来源于作者开发 及未支付 网站的经验总结,具备很强的工程实践参考性。

课程地址

适用人群

掌握前端开发基础技术的同学,包括 HTML、CSS 和 JavaScript。

课程资料

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

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

课程答疑

学习过程中遇到任何问题可至 叽歪论坛 发帖提问,请先按 此贴 说明申请会员,以便享受会员服务。每位购买课程的学员可免费获得一个月的会员服务,对课程做出客观评价的学员将额外获赠一个月。

功能演示

内容介绍

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

搭建应用骨架:掌控全局

  • 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