课程介绍

本课程将带你使用 Next.js + AntD 从零开始开发一个具有帐号和任务系统的单页网站应用(SPA),并且能够自动适配手机屏幕和对搜索引擎友好。课程内容来源于作者开发 及未支付 网站的实践经验,因此具备很强的工程实践参考性。即便你不使用 NextJS 和 AntD,本课程也能教给你许多 React 应用开发的实战技能。

课程地址

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

适用人群

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

课程资料

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

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

课程答疑

  1. 叽歪论坛 请在课程对应分类下提问
  2. QQ 讨论群 594403865

以上服务均为附赠,不保证答疑及时性。

项目演示

课程目录

搭建应用骨架:掌控全局

React 为什么这么流行:变化的 UI 太难把控

  • 特性
  • Hello World
  • 核心概念

选择 NextJS 的重要原因:服务端渲染很重要

  • NextJS 与 React 的关系
  • 特点
  • NextJS 应用架构
  • 基本用法

使用 AntD 组件快速构建 UI:避免重复发明轮子

  • 设计语言
  • 组件库
  • 通用
  • 布局

使用 Redux 来管理状态:应用的复杂性源于其状态变化

  • 为什么要使用 Redux
  • 核心概念
  • 三大原则
  • 用法示例(TODO 应用)

CSS-in-JS 的 Styled-JSX:兼容 CSS 但支持变量和局部作用域

  • 介绍
  • 基本用法

新一代编码神器 VSCode:工欲善其事必先利其器

  • 介绍
  • 前端开发推荐配置
  • 前端开发推荐插件
  • 常用功能介绍

Chrome 开发工具:前端开发人员必备

  • 介绍
  • 控制台
  • 查看元素
  • 查看网络请求
  • 查看应用资源
  • 安装插件和扩展

让应用 Run 起来:麻雀虽小五脏俱全

  • 将项目用到的各种技术集成到一起
  • 确定项目目录结构
  • 开发布局组件
  • 让应用运行起来

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

使用 Cookie 和 Session 来保持会话:让服务端知道你是谁

  • HTTP 是无状态协议
  • Session
  • Cookie
  • 交互流程

与服务端交互:让网站动起来

  • 封装底层 API 请求类
  • 使用反向代理来解决跨域问题
  • 让 Redux 支持异步 Action

模拟服务端 API:做一个不依赖服务端的应用

  • 不依赖服务端的好处
  • 尽量在越底层的地方拦截请求,以便对上层调用者影响尽量小

功能开发之注册/登录

  • 模拟服务端 API
  • 编写 Action Creators
  • 编写 Reducers
  • 编写注册页
  • 编写登录页
  • 在顶部导航条里增加登录入口/显示登录用户信息

功能开发之退出

  • 退出时需要重置应用到初始状态
  • 退出时需要清空页面路由堆栈
  • 为了避免因数据缺失导致页面错误,退出操作需要在一个特定页面中完成

功能开发之个人资料

  • 模拟个人资料编辑 API
  • 编写个人资料编辑 Action Creator
  • 编写上传文件组件
  • 编写个人资料页

妥善处理错误:别把用户蒙在鼓里

  • 统一处理 Action 错误
  • 正确处理 401、403、404、500 等常见 HTTP 状态码
  • 需要时自动跳转登录页

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

本地持久化应用状态:千万别丢失用户数据

  • 浏览器本地存储
  • 找出需要持久化到本地的数据
  • 使用 redux-persist 来自动持久化数据

功能开发之发布/编辑任务

  • 保存 AntD 表单数据到 Redux Store 里
  • 发布
  • 编辑

功能开发之展示/完成任务

  • 展示
  • 完成

功能开发之评价任务

  • 发布评价
  • 展示评价

功能开发之任务列表

  • 首页
  • 用户页(练习题)

适配手机屏幕:对低头族友好点儿

  • 响应式布局
  • 首页
  • 任务详情页
  • 导航条

美化 URL:讨好搜索引擎

  • 需要美化的 URL
  • 如何实现

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

版本化本地持久化数据:让老用户顺利升级到新版

  • 算法(代码)跟数据结构需要匹配
  • 如何保证

创建可配置的应用:提升代码可维护性

  • 为什么需要应用可配置
  • 哪些数据提取为应用配置

使用 Docker 来简化部署:不懂 Linux 也能做运维

  • 为什么 Docker 能简化部署
  • 如何使用 Docker 来部署应用

启用 HTTPS:别让数据裸奔

  • 为什么要使用 HTTPS
  • 如何配置 HTTPS

使用 GZip 和 CDN:页面加载还可以更快

  • HTTP 协议中的 GZip
  • 如何配置
  • CDN 加速

监控网站状态:996 还不够,7x24 才可以

  • 哪些状态需要被监控
  • 如何监控

分析网站流量:谁在访问我的网站

  • 分析网站流量有什么好处
  • 接入百度统计
  • 接入 GA(Google Analytics)

参考资料

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

更新日志

  • 2019-08-26 更新实战项目 Next.js 版本到 9.0
  • 2019-05-01 课程发布