课程分类

课程介绍
课程目录
用户评论
课程介绍
课程目录
用户评论

你将获得

  • 掌握某些知识点
  • 学会某些技巧(或思路)

教学服务

  • icon

    1v1专属答疑服务

  • icon

    BAT专家面试辅导

讲师介绍

  • 超过十年的互联网技术研发经验,先后任职于腾讯、盛大、成都品果和成都实验楼。

  • 课程详情

    本课程已暂停答疑和参考代码维护,购买请慎重!
    由于本文档不能加链接,更多课程资料和答疑等信息请查看此文(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 课程发布
    温馨提示
    • 请勿私下交易
      请勿在平台外交易。与机构和老师私下交易造成的任何损失及纠纷,腾讯课堂不承担任何责任
    • 听课说明

      1、电脑:访问腾讯课堂官网 ke.qq.com 查看我的课表或下载win/mac客户端听课

      2、手机/平板:下载腾讯课堂APP, 进入学习页面听课