React 拍卖二手车

目录

§ 技术栈

§ 快速开始

• 安装
• 启动

§ 项目架构

• 目录结构

§ 性能

§ 参考

---

§ 技术栈

详情可参阅 package.json

• React 15.3.0
• Redux
• React Router
• Webpack
• ES6 + Babel

---

§ 快速开始

在开始前，希望您已通读如下资料

• React 文档
• Redux 文档（参转～ Redux）
• React Router 文档

同时您还需要熟悉 ES6。例如，请把如下代码 const foo = ({ hello: { world: bar } }) => ({ bar })
转译成 ES5（答案请自行到 Babel REPL 在线编译验证）

⊙ 安装

推荐升级到 node 5.x/6.x + npm 3.x 环境，强烈推荐使用 cnpm 安装依赖或手动
切换到淘宝 npm 源：npm set registry https://registry.npm.taobao.org/
（经测试，cnpm 对于 node-sass 等问题多多的 Package 拥有秒杀能力）

敲下 npm install 安装依赖

需要全局安装跨平台环境变量配置器：npm i cross-env -g

⊙ 启动

敲下 npm start
如无意外，默认浏览器就会自动打开 localhost:9090，您立即可以看到效果
若浏览器没有自动弹出，则请自行手动访问

---

§ 项目架构

⊙ 目录结构

.
├─ build/            # Webpack 配置目录
├─ dist/             # build 生成的生产环境下的项目
├─ src/              # 源码目录（开发都在这里进行）
│   ├─ assets/         # 放置需要经由 Webpack 处理的静态文件
│   ├─ components/     # 组件（COMPONENT）
│   ├─ redux/          # Redux 一箩筐
│   │   ├─ actions/      # （ACTION）
│   │   ├─ reducers/     # （REDUCER）
│   │   ├─ store/        # （STORE）
│   ├── routes/        # 路由（ROUTE）
│   ├── services/      # 服务（SERVICE，用于统一管理 XHR 请求）
│   ├── utils/         # 工具库（UTIL）
│   │   ├─ HoC/          # 高阶组件（HOC，全称 Higher Order Component）
│   │   ├─ mixins/       # 混合（MIXIN）
│   ├── views/         # 路由视图基页（VIEW）
│   │   ├─ layout/       # 全局布局
│   ├── app.js         # 启动文件
│   ├── index.html     # 静态基页
├── static/          # 放置无需经由 Webpack 处理的静态文件
├── .babelrc         # Babel 转码配置
├── .eslintignore    # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc        # ESLint 配置
├── .gitignore       # （配置）需被 Git 忽略的文件（夹）
├── package.json     # （这个就不用多解释了吧）

为了减少代码量，省去了 Prop 验证，建议您在往后的开发中使用

⊙ 性能

大概可参阅如下文章：

• React 文档 · Advanced Performance
• 反鸡汤 · Should I use shouldComponentUpdate（译文）
• 淘宝 FED · 高性能 React 组件
• 腾讯 Dev Club · React 移动 Web 极致优化

---

§ 参考

• Vue Demo
• davezuko/react-redux-starter-kit
• 探讨 React 项目目录结构