Thinking in React日本語まとめ
Thinking in Reactを読んだので徐々に日本語でまとめていきます。
Thinking in React
元ソースはブログです。
Reactは巨大で、早いWebアプリをJavascriptで構築する代表的な手法で、スケールしやすい。
ここでは検索できるテーブルを作りながら、Reactの素晴らしいパーツ使ってアプリの構築手順を見て行きましょう。
Start with a mock
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
書きかけ
Author And Source
この問題について(Thinking in React日本語まとめ), 我々は、より多くの情報をここで見つけました https://qiita.com/musclemikiya/items/409b0330eb0fd2e534ff著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .