Layer 名 | 目的 | 相互参照 | Query を呼んで良いか | hooks | props で受け取って良い型 |
|---|---|---|---|---|---|
Pages | URL に対応させる React router の path が各 page にマッピングされる | 無し | ○ | ○ | |
Templates | header / menu などを定義 自身で Organisms などを実体化する事はしない | 無し | ○ | ○ | stringbooleanarray<any>numericany |
Organisms | Hooks を呼べる | 無し | ○ | ○ | stringbooleanarray<any>numericany |
Compounds | Molecule を複数使った構造だが hooks は呼ばない 任意の型を props として受け取れる | 無し | X | userState useCallback useEffect | stringbooleanarray<any>numericany |
Molecules | Atoms を複数持てる構造 props としては js の組み込み型のみを受け取る | 無し | X | X | stringbooleannumericarray<string>array<numeric> |
Atoms | html の生タグ (div, p img など) と react material ui のタグのみで構成される最小単位(quontum 除く) | 無し | X | X | stringbooleannumeric |
Quantums | これ以上分解できない最小単位特殊型ではあり、現在はアイコンのみ | 無し | X | X | |