商品リストページ開発の実践

イメージ

使用データ

const productList = [
  {id: 'E01', title: '商品1', inStock: false},
  {id: 'E02', title: '商品2', inStock: true},
  {id: 'E03', title: '商品3', inStock: false}
]

mapの使用

{productList.map(product => {
  const {id, title, inStock} = product
  return (
    <div key={id} className='list-item'>
      <strong>{title}</strong>
      &nbsp;
      {inStock ? <span style={{color: 'green', marginLeft: '20px'}}>在庫あり</span> : <span style={{color: 'gray', marginLeft: '20px'}}>在庫なし</span>}
      &nbsp;
      <button onClick={() => {edit(id)}} style={{border: '1px solid #00000', marginLeft: '20px'}}>商品編集</button>
    </div>
  )
})}

コンポーネントの分割

React すべてがコンポーネントです

React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.

React では UI をコンポーネントで構築します。
コンポーネントの分割は、特に大規模なソフトウェアにとってコードの組織化と保守性に役立ちます。
JSX では、コンポーネントのタグは大文字で始める必要があります。
React16以降、Reactは関数コンポーネントの使用を公式に推奨しています。

コンポーネントの利点

UI の構造を整理するためにコンポーネントをネストさせることは、HTML と同様、学習コストが低い
コンポーネントの分割は、コードのメンテナンスと複数人での共同開発を容易にする。
共通コンポーネント（またはサードパーティー製コンポーネント）の封装により、コードの再利用が可能で、開発効率が向上する