Next.js + AntD React 应用开发实战

0人 购买 好评度 -
用手机看

扫一扫继续用手机看

  • 微信扫码

  • QQ扫码

下载手机APP
收藏
  • 第 1 期
更多班级

第 1 期

支持随到随学,21年06月过期

¥553.22

本班因教学质量问题暂时不能报名。 查看详情

课程因违反平台规定暂时不能报名。

立即购买

课程概述

目录

评论

老师介绍

  • 天火

    天火

    超过十年的互联网技术研发经验,先后任职于腾讯、盛大、成都品果和成都实验楼。
简  介 本课程将带你使用 NextJS + AntD 从零开始开发一个具有帐号和任务系统的单页网站应用(SPA),并且能够自动适配手机屏幕和对搜索引擎友好。

由于本文档不能加链接,更多课程资料和答疑等信息请查看此文(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 课程发布

* 课程提供者:天火

老师还为你推荐了以下几门课程