解决什么问题：用电商实战打通语法与组件

很多前端转行者在学完基础语法后，面对真实的业务逻辑往往会卡壳。这门资料的主题是 React 结合 ES6 的前端开发实战，它解决的正是“看懂语法却写不出项目”的断层问题。课程没有停留在枯燥的 API 罗列上，而是把 ES6 的新特性和 React 的组件化思维，直接塞进一个仿京东电商系统的业务场景里。你在日常工作中会遇到的状态管理、异步数据请求、列表渲染、组件拆分，在这个项目里都会碰到。它不是教你写几个零散的 demo 页面，而是让你跟着真实的电商业务线，把现代前端工程化的开发流程完整走一遍。

适合什么基础与建议先看哪几块

这套资料适合已经掌握 HTML、CSS 和 JavaScript 基础，想往现代前端框架转型的上班族或转行者。如果你连普通的函数声明和 DOM 操作都不熟练，直接看会非常吃力。建议在跟学时，先重点啃透 ES6 核心语法部分，特别是箭头函数、解构赋值、扩展运算符以及 Promise 与 async 的异步处理逻辑。这些是 React 开发的底层基建，不弄懂它们，后续写组件逻辑时会处处踩坑。环境配置部分建议边看边实操，先把开发工具和 React 脚手架跑通，确保本地能正常启动项目，再去对照下载的电商系统源码。对于选学的 Webpack 配置部分，新手第一遍可以略过，等整个电商项目跑通后，再回头研究前端打包工具的底层机制。

学完能独立做什么与资料配合练习建议

跟着这套资料走完，你能独立搭建基于 React 的单页应用，并具备开发中大型前端业务模块的能力。学完后，你可以独立承担一个电商项目的商品列表展示、购物车交互、异步数据请求与渲染，以及复杂状态管理的工作。在练习时，建议这样配合资料：先看一遍视频理解业务逻辑和 ES6 语法的应用场景，然后关闭教程，只看着源码自己在编辑器里手敲复现。遇到卡壳的地方，再去定位到对应的视频节点对照排查。电商源码不要只当参考资料看，要尝试修改它的组件结构和交互逻辑，比如把购物车的数量加减改成全选反选逻辑。通过这种主动破坏再重构的练习，才能真正把别人的经验转化为你自己的开发能力。


学习后，可以开发大型项目，增强逻辑思维，至少让你拥有3年以上开发经验的实力！

课程目录

*   01 课程介绍

*   02 前端开发神器webstorm破解与安装

*   03 安装React

*   04 仿京东电商系统源码下载

*   05 let与var的区别

*   06 const常量的声明

*   07 模板字面量之多行字符串

*   08 模板字面量之变量占位符

*   09 默认参数

*   10 扩展运算符三个点的使用

*   11 Object.assign对象的拷贝与合并

*   12 对象字面量语法扩展

*   13 解构赋值

*   14 模块化

*   15 箭头函数

*   16 promise

*   17 async/await/promise让异步变成“同步”

*   18 class类的使用

*   19 【选学】Webpack配置入口文件和打包后的文件

*   20 【选学】webpack-dev-server的安装与配置

*   21 【选学】HTML模板插件

*   22 【选学】多页面(MPA)配置

*   23 【选学】loaders配置加载css样式

*   24 【选学】post-css处理css兼容性

*   25 【选学】css和js压缩

*   26 【选学】url-loader图片等资源文件处理

*   27 【选学】babel-loader，es6转es5

*   28 【选学】url-loader3.0，上节课配置出问题看这里

*   29 【选学】用webpack搭建react项目

*   30 【必学】使用React官方脚手架create-react-a

*   31 【必学】JSX、支持HTML标签、Ref的使用、虚拟DOM的

*   32 【面试必学】自己手写jsx实现虚拟dom

*   33 【面试必学】diff算法原理和代码分析

*   34 【必学】条件渲染、列表(Lists) 和 键(Keys)循环

*   35 【必学】组件(Components) 和 属性(Props)

*   36 【必学】状态(State) 和 生命周期

*   37 【必学】事件处理和form表单

*   38 【必学】子组件向父组件传值

*   39 【必学】使用插槽(Portals)自定义封装button组件

*   40 【必学】lazy和suspense实现组件懒加载

*   41 【必学】自定义组件之仿天猫轮播图效果

*   42 【必学】自定义组件之toast轻提示开发

*   43 【必学】自定义组件之confirm开发

*   44 【必学】CSS和CSS模块化

*   45 css-loader3版本配置模块化

*   46 【必学】无状态组件和有状态组件配合高阶组件的使用

*   47 【必学】用高阶组件(HOC)开发仿天猫轮播图效果

*   48 【必学】hooks的使用

*   49 【必学】使用hooks开发仿天猫轮播图效果

*   50 【选学】react-transition-group动画实战

*   51 【面试必学】手写router路由了解底层的原理

*   52 【必学】react-router路由和路由懒加载解决**加载

*   53 【必学】路由嵌套（子路由）和组件路由跳转

*   54 【必学】路由认证（会员权限）

*   55 【必学】hash与history路由模式的区别

*   56 【必学】redux的使用和模块化封装

*   57 【必学】redux-thunk中间件的使用

*   58 【必学】Axios的get、post请求和图片上传

*   59 【必学】封装axios开发项目中使用

*   60 【必学】Fetch的get、post请求和图片上传

*   61 【必学】封装fetch开发项目中使用

*   62 【必学】解决跨域以及自动区分开发和生产环境

*   63 【必学】redux-thunk实现异步数据流

*   64 【必学】redux-saga代替thunk实现异步数据流

*   65 【必学】ui库antd-design之table表格和分页器

*   66 【必学】antd之Form表单验证和upload上传

*   67 【必学】antd移动版ui库的使用

*   68 【选学】React多语言国际化

*   69 【选学】HOC封装多语言国际化组件

*   70 【必学】【赠送】前端架构模板,工作中直接用

*   71 【赠送】后端架构模板，工作当中直接用

*   72 【选学】Immutable常用API的使用

*   73 【选学】redux+Immutable组合搭配使用

*   74 【选学】mobx之decorators修饰器的使用

*   75 【选学】mobx在react中的使用

*   76 搭建项目架构

*   77 电商系统底部导航

*   78 首页-布局

*   79 商品分类页面布局

*   80 商品分类页面对接数据和js效果

*   81 开发搜索组件

*   82 使用flexible自动换算rem

*   83 搜索页面之页面布局

*   84 搜索页面之数据对接

*   85 商品详情页静态布局

*   86 商品详情页js效果解决白屏、滚动定位、内存溢出、抛物线动画

*   87 商品详情页对接动态数据

*   88 完善商品详情页面的评价页面和商品描述页面

*   89 购物车页面布局

*   90 实现购物车逻辑

*   91 会员注册页面布局

*   92 会员注册js逻辑的实现与后台对接

*   93 会员登录(实现单点登录解决安全性问题)

*   94 确定订单页面布局

*   95 将购物车数据渲染到确定订单页面

*   96 添加收货地址页面布局

*   97 加收货地址页面的逻辑实现和antd的picker的使用

*   98 选择收货地址页面的布局

*   99 选择收货地址页面的删除，选择，设置默认地址，解决冒泡事件

*   100 修改收货地址

*   101 提交订单并防止重复提交订单

*   102 开发我的页面

*   103 个人资料（头像上传、给组件绑定事件）

*   104 我的订单页面布局

*   105 对接我的订单数据解决路由改变参数数据不更新的问题

*   106 布局订单详情页面并阻止冒泡事件

*   107 对接订单详情页面动态数据

*   108 评价页面布局

*   109 评价逻辑实现

*   110 我的收货地址管理

*   111 绑定手机号

*   112 修改密码

*   113 我的收藏

*   114 真机测试调试兼容性跨平台解决方案

*   115 最终上线路由的hash模式和history模式的区别解决访问