本课程已暂停答疑和参考代码维护,购买请慎重!
由于本文档不能加链接,更多课程资料和答疑等信息请查看此文(blog.jaggerwang.net/jwcourse-nextjs-antd-react-app-develop-in-practice/)。iOS 上购买苹果会抽成 35%,请尽量在网站和安卓上购买,不影响在 iOS 上观看,谢谢!
课程介绍
NextJS 是一个 React 应用框架,无需做任何配置就可让你的应用获得服务端渲染、自动代码分割、客户端路由、代码热加载等特性。AntD 是蚂蚁金服开源的一个 React 组件库,提供了数十个功能强大而灵活的组件。NextJS + AntD,让你十分钟之内可以开始编写你的第一行业务代码,几天时间就能开发完成一个简单的网站。本课程将带你使用 NextJS + AntD 从零开始开发一个具有帐号和任务系统的单页网站应用(SPA),并且能够自动适配手机屏幕和对搜索引擎友好。课程内容来源于作者开发 及未支付 网站的实践经验,因此具备很强的工程实践参考性。即便你不使用 NextJS 和 AntD,本课程也能教给你许多 React 应用开发的实战技能。
适用人群
学习过 HTML、CSS 和 JavaScript 等 Web 前端基础技术,渴望职场进阶的初级工程师。
项目演示
课程目录
搭建应用骨架:掌控全局
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)
更新日志
- 2019-08-26 更新实战项目 Next.js 版本到 9.0
- 2019-05-01 课程发布