thinking in reacting（part1）

翻译

---

premier 总理

Instagram 一款图片分享应用

In this post 在这篇文章中

mock 模拟

apparently 显然

hierarchy 层次结构

responsibility 职责

principle 原理

ideally 理想化的

decomposed 分解

subcomponents 子

adhere 坚持

architecture 建筑

trivial 平凡的

exactly 正确的

    React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram.

在我的观点里，react 是javascript构建大的，快速的web 应用。react 能很好的控制我们的 facebook 和instagram 规模。

    One of the many great parts of React is how it makes you think about apps as you build them. 

react的伟大之一就是在你在创立你的app的时候，他能让你思考如何构建你的app

    In this post, I'll walk you through the thought process of building a searchable product data table using React.

在这篇文章中，我将会带领你使用react来构建一个可以进行搜索的数据表。

    Start with a mock：Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good because the mock looks like this:

用你的想象力假装我们已经有了 json 数据的api 和从设计师那里获得的模拟,
我们的设计师显然不是一个好的设计师，因为这个模型真心不好看。

    Step 1: break the UI into a component hierarchy。 The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer, they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!

首先第一步，把ui分解成组件的层次结构，首先你希望做的是，在设计模型中围绕组件（子组件），画出盒模型，并且给他们都取上名字。如果你经常和一个设计师一起干活，你可能已经这样做了，所以直接告诉设计师把，他们的photoshop 的布局名称就会以你的 react 组件来命名。

    But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.

但是，你又怎么知道什么会成为他自己的组建呢？用相同的技术来决定你是否要创建一个函数或是一个对象。期中一个技术是这样一个单一职责原理。这就意味着，一个组件应该很理想化的只做一件事情，如果组件结束成长，他就应该被分解成更小的子组件。

    Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. 

既然你经常向用户展现一个展示json数据的模型，你会发现，如果你的模型被正确的建立，你的ui（以及你的组件结构）看起来会非常爽。

    That's because UI and data models tend to adhere to the same information architecture, which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model

因为ui和数据模型坚持趋向于同样的信息结构，这意味着分解你的ui成组件化的工作是非常平凡的。所以只要分解成组件化，你的模型的每一块都会非常正确的显示