React官方文档React理念Demo

最近准备系统学习React，首先看了官方文档，React官方中文文档，读到快速开始的React理念这一章，就动手写了一下Demo，按照提示实现了一遍，效果如下：
Github地址：https://lucyzlu.github.io/React-demo-product-list/my-app/build/index.html
JSFiddle：

width="100%" height="300" src="//jsfiddle.net/senmu/dz504L3L/6/embedded/" allowfullscreen="allowfullscreen">

下面提取官方文档中重要的点复制到此处，以及动手的过程中遇到的一些问题记录，最后贴上完整的HTML，CSS以及React+JSX源码以供参考。

1.功能和效果

提供的效果图如下，这是一个商品列表，上面的部分是对商品进行过滤搜索的交互区域，下面部分是根据用户的输入进行过滤后的商品列表展示。

如何进行组件化呢？
官方提供了如下的组件化划分方案：

在这里你会看到，我们的简单应用中有5个组件。我们把每个组件展示的数据用斜体表示。

组件层级可以表示成：

看起来很明了，那么就动手实现吧。我选择从底层组件开始写，一直写到顶层组件。

2.实现的步骤

整个步骤顺序：
第一步：把 UI 划分出组件层级

第二步：用 React 创建一个静态版本（也就是只在组件中只使用props进行单项数据流传递（不使用state），从父组件到子组件，并且在每个组件中使用render函数定义要渲染的UI，所有组件写好之后，为顶级组件提供一个数据看一下整个静态的UI是否正确）

第三步：定义 UI 状态的最小(但完整)表示（也就是确定有哪些state），考虑state时遵循如下3个问题：

1. 它是通过 props 从父级传来的吗？如果是，他可能不是 state。
2. 它随着时间推移不变吗？如果是，它可能不是 state。
3. 你能够根据组件中任何其他的 state 或 props 把它计算出来吗&#x