Thinking in React

在我们的印象中，React最初是使用JavaScript来构建大型，快速的webApp的一种途径。据我们所知，在Facebook和Instagram它有很大规模的应用。

        在对React的很多了解当中，其中一个就是它用它如何去构建应用程序。在这篇文档中，我们将通过使用React来构建一个搜索产品数据的应用来阐述。

通过一个产品原型开始

下图是来自于我们设计人员且具有JSON API数据接口和原型的设计图。基于下图，我们的设计人员显然不是很好：

   我们的JSON API 数据接口返回的数据结构如下所示:

     [ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},

{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},

{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},

{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},

{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},

{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}

];

  第一步：分解UI为一个分层组件

  首先要做的一件事是在原型中为我们的每一个组件及子组件画框图并给他们命名。如果你和设计者一起工作，他们也许已经做了，你可以去和他们沟通！他们的Photoshop图层也许就是你的React component的名字！

但是你是如何知道它自己的组件是什么呢？正好使用这些技术来决定你是否应该创建新的函数或对象。其中一项技术是单一职责原则，即一个组件理想情况下仅仅只做一件事情。如果结果逐渐增加，它将被拆分成较小的子组件。

因为你经常展示一个JSON数据模型给用户，如果你的模型创建正确，你的UI(你的组件结构)将作很好的映射。那是因为UI和数据模型具有相同的信息结构而联系在了一起，意味着分割你的UI到组件的工作是非常关键的。正如把UI拆分成组件它一一代表着你的数据模型。

如上图，你将看到在我们的简单的APP中，它将有五个组件。我们标记了每一个组件表示的数据。

1.FilterableProductTable(orange)：包含例子的实体

2.SearchBar(blue):接收所有用户的输入

3.ProductTable(green)：根据用户的输入过滤和展示数据集

4.ProductCategoryRow(turquoise):展示每一个分类的标题

5.ProductRow(red)：每一个产品一行展示

未完待续......