Thinking in React日本語まとめ

Thinking in Reactを読んだので徐々に日本語でまとめていきます。

Thinking in React

元ソースはブログです。
Reactは巨大で、早いWebアプリをJavascriptで構築する代表的な手法で、スケールしやすい。
ここでは検索できるテーブルを作りながら、Reactの素晴らしいパーツ使ってアプリの構築手順を見て行きましょう。

Start with a mock

APIとデザイナーからのモックがあると仮定します。モックはあまりイケてません。

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"}
];

Step 1: UIをコンポーネントに分けてみる

まず行いたいのは、各コンポーネントに分けてそれぞれに名前を付けることでしょう。
デザイナーとやっているのであれば、フォトショのレイヤー名がそれになるでしょう。
コンポーネントにどうやって分けるって？新しいメソッドやオブジェクトを作る場合は、「単一責任の原則」に従うだけ。

5個のコンポーネントがあります。

1. FilterableProductTable(オレンジ):全体を指します
2. SearchBar(青):ユーザーの入力を受け取ります
3. ProductTable(緑):データの表示、入力を元に絞り込みます
4. ProductCategoryRow(水色):それぞれのカテゴリ名を上部に表示します
5. ProductRow(赤):それぞれの商品名を表示します

ProductTableを見ると、自身のコンポーネントではない"Name", "Price"のヘッダがあります。これは好みが別れるところですが、今回の例ではProductTableの一部と見なします。

Step 2: 静的な画面を作ってみる

書きかけ

Step 3: Identify the minimal (but complete) representation of UI state

書きかけ

Step 4: Identify where your state should live

書きかけ

Step 5: Add inverse data flow

書きかけ