re: Atomic Designの設計について

[ucpr]

概要

https://www.atmarkit.co.jp/ait/articles/1702/28/news017_2.html に寄せてやっていくことにする

    Atoms（Presentational Components）
　最小限単位のコンポーネントで、IconやButtonなどが該当します。親コンポーネントから渡されたpropsを元にHTMLを返却します。

    Molecules（Presentational Components）
　再利用前提のコンポーネントで、ListやModal、User thumbnailなどが該当します。親コンポーネントから渡されたpropsを元にHTMLを返却します。

    Organisms（Container Components）
　画面上の大きな一部のコンポーネントです。HeaderやEntry、Naviなどが該当します。この階層のコンポーネントでは、データ取得処理を記述したり、Redux Stateとconnectしたりして、状態を保持できます。ここで取得した状態はpropsとして、Molecules,Atoms のコンポーネントに引き継がれます。

    Templates
　path（URL）ごとのコンポーネントです。ひな型となるコンポーネントであるため、必要なパーツをOrganismsからインポートし、リスト化するだけの役割にします。

    Pages
　ベースとなるページのコンポーネントです。基本的には渡されたコンポーネント(this.props.children)をそのまま表示するだけのコンポーネントです。アメブロはSPAであるため、1ページのみ存在しています。

その他

[ucpr]

• Organismsでconnectとかやっていく.
• 現状だとApp.jsがpagesみたいになるなあ

[ucpr]

Organismsでコンポーネントごとにディレクトリ作ってComponentとContainerで分けるのが良さそう?

[ucpr]

288

[ucpr]

Wikiに書いてcloseする