Architecture

Atomic Design

AtomsとMoleculesはdaizu-online-judgeに特化した機能は入れないでOrganismsに入れる.

• Atoms
  • htmlタグに相当するようなやつ
    • それ以上機能として分解できないくらいのやつ
  • Material UIのコンポーネントは、より具体的な役割を与えて、ラベルやスタイルなどを当てたものをAtomとして作る
  • Presentational Component
• Molecules
  • Atomsを2つ以上を用いて作る比較的シンプルな要素
  • Presentational Component
• Organisms
  • AtomsとMoleculesを組み合わせて作る比較的複雑な要素
  • dojに特化した機能はここで作る
  • reduxとかとのやり取りが出来る
  • presentaionとcontainerのコンポーネントがある
• Templates
  • ワイヤーフレームっぽいやつをAtoms, Molecules, Organismsで作ったやつ
  • useAuth0はここでやる
  • 骨格のみ
• Pages
  • SPAなので1つだけ
  • App.jsがそれに相当する

参考にした文献

• google「Atomic Desing」🔍
• https://www.atmarkit.co.jp/ait/articles/1702/28/news017_2.html
• https://www.kaitoy.xyz/2020/05/05/atomic-design/

re-ducks

• google「re-ducks」🔍
• https://noah.plus/blog/021/
• https://github.com/alexnm/re-ducks