component_divide.png

React設計の基礎の基礎.md

そもそも設計は必要？

• UI はコンポーネントの集まりでできている
• コンポーネントがバラバラだったら嫌！
• コンポーネントがバラバラだったら、今後見たくなくなる
• コンポーネントがバラバラだったら、修正しにくいし追加もしにくい
• コンポーネントに一定の秩序があることが大事

自由度が高いものには制限をかけることで運用しやすくなる

• CSSでいうとBEM、JSでいうとESLintが近い
• 野球やサッカーなどのスポーツにはルールがないと崩壊してしまう

コンポーネントの形状は最初にざっと決めておくべき

• Aさん、Bさんが独自にコンポーネントをつくる … 形状(大きさ、階層関係)がバラバラになってしまう
• 図でもテキストでも良いので、ゆるい決まりがあるとコンポーネントの形状を決めるものさしになる

React設計の基礎の基礎

1つのコンポーネントに1つの意味

• それぞれのコンポーネントの意味をひとことで言えるように

複雑な階層構造を避ける

• コンポーネントをwrapするコンポーネントをかける
• この声質を上手に使うことで多層構造を避ける

OKな例

// ルートとなるAppコンポーネント
const App = () => {
  return(
    <div>
      <MainContents>
        <Products>
          <ProductItem name="せっけん" num={10} />
          <ProductItem name="シャンプー" num={15} />
        </Products>
      </MainContents>
    </div>
  )
}
const MainContents = ({children}) => {
  return(
    <div>
      <h2>メイン</h2>
      {children}
    </div>
  )
}

const Products = ({children}) => {
  return(
    <div>
      <h3>商品リスト</h3>
      {children}
    </div>
  )
}

const ProductItem = ({name,num}) => {
  return(
    <div>名前:{name}, 個数:{num}</div>
  )
}
ReactDOM.render(<App />,document.getElementById("app"));

NGな例

// ルートとなるAppコンポーネント
const App = () => {
  return(
    <div>
      <MainContents />
    </div>
  )
}
const MainContents = () => {
  return(
    <div>
      <h2>メイン</h2>
      <Products />
    </div>
  )
}

const Products = () => {
  return(
    <div>
      <h3>商品リスト</h3>
      <ProductItem name="せっけん" num={10} />
      <ProductItem name="シャンプー" num={15} />
    </div>
  )
}

const ProductItem = ({name,num}) => {
  return(
    <div>名前:{name}, 個数:{num}</div>
  )
}
ReactDOM.render(<App />,document.getElementById("app"));

コンポーネントを2種類に分ける

• 管理する側のコンポーネント、管理される側のコンポーネント)
• ちなみにAtomicデザインはコンポーネントを5種類に分ける

ローカルStateを上手に見つける

• 状態を保持する必要があり、かつ上位の階層に影響がないとき

syourai_sekkei_man.png