实战教程（7）开发首页

源码地址：https://github.com/wangfupeng1988/react-simple-o2o-demo/tree/stage1-home-page

介绍首页的开发过程。

React（或者 vue angular 等）是基于组件化的开发思路，因此首先要分析页面构成部分的结构。拿到页面效果图，从上到下详细分析：

特别提醒：再分析之前，我们首先要回忆下之前讲过的page - subpage - components以及“智能组件”、“木偶组件”的相关知识。如果对此还一知半解，建议暂停视频，再回顾之前讲述的这块内容。

• 首先，首页肯定是作为一个单独的页面存在的，它应该放在./app/container/Home中
• 最上面是一个header，其实就是三个链接。第一个链接到选择城市页面，第二个跳转到搜索页面，第三个跳转到用户中心页面。其中不会涉及到数据处理，可以做成一个组件，放在./app/components中。
• 再往下是一个轮播图，显示了商户的各个类型，点击每一个类型就会进入搜索页面，而且这些类型是相对固定的，轻易不会变动。因此，也不会涉及到数据处理，可以做成一个组件，放在./app/components中。
• 再往下是一组广告，广告的数据肯定是后台控制的，要从后台获取数据。既然涉及到数据处理了，那么我们就把广告这一块当做一个小页面处理（而不是单纯的组件了），放在./app/container/Home/subpage中。
• 最后一个下拉加载的数据列表，和上面的广告一样，数据也来自服务器端，我们也将它当做一个subpage处理，放在./app/container/Home/subpage中。不过这个列表比较负责，其本身有可以查分成多个组件，接下来会看到。

接下来就是整个页面的层次结构划分。接下来可根据源代码来看看如何实现的。

这项知识我们之前一直没讲过，因为单独拿出来讲的话内容比较少，而且放在哪一个章节都不合适。因此就计划，什么时候用到它什么时候再讲。

其实在webpack.config.js中有一句相关的配置（代码如下）：

    module: {
 loaders: [
     { test:/.(png|woff|woff2|svg|ttf|eot)($|?)/i, loader:'url-loader?limit=5000'} // 限制大小小于5k
 ]
    },

建议大家在以后的项目开发过程中，但凡遇到页面中使用小图标的地方，尽量使用字体图标，而不要再用 css 背景图片的那种方式了。除非有特殊环境要求。

• 能像文字一样，用 css 的font-size和color来控制大小和颜色，而且是适量放大的。如果你用 css 背景图片，想修改颜色和大小还是劳烦设计的同事协助，好费劲
• 目前开源字体图标库中，常用的图标都能找到，直接拿来就用。不用再找设计的同事裁图、切图…… 除非有特殊定制需求
• 资源足够小，无需担心性能
• 浏览器支持已经足够全面，特别是移动端浏览器

css3支持自定义字体图标，开源社区中比较有名气的算是Font Awesome，如果没听过或者只知道没用过，一定要再看到这个视频的近期去恶补一下。作为一名前端工程师，没用过 font-awesome（或者类似的插件）并不是一件多光彩的事儿。

Font Awesome 会一次性全部给你提供好几百个图标，供你选择使用。但是我们做项目时，根本用不了那么多图标，只用十几个就够了，加载过多会影响性能。接着往下看……

icomoon是一个字体图标生成器网站，在这里面你可以任意选择你需要的图标，并且打包下载。而且，如果觉得它默认提供的图标不够丰富，还可以添加其他图标库，有些免费有些收费，fontAwesome就在其中。该网站相对于直接用 Font Awesome 的特点是————你用几个就打包几个，用不到的不要管，这样就最大限度的缩小了网页需要加载的字体文件。

至于下载下来之后如何使用，和 Font Awesome 一样（都是一样的东西，来源不一样而已）这里就不在赘述了。

可以看一下代码中的实现方式。

注意，列表的”加载更多“是模拟的。后端没有太多数据，只能模拟一下效果。