Reactのこれ、覚えてますか？

概要

• Reactを実務で使っている投稿者が
  • 曖昧になっていた部分
  • 印象に残った部分
  • をピックアップします
• 気軽にコメントください

JSXはあくまでも糖衣構文

• ReactはあくまでもJavascriptであり、
  • 例えJSXを使用していても、その正体はJSに他ならない
• 一見、HTMLを記述しているように見えるが、JSを記述していることを忘れないように

Babel

• Javascriptトランスコンパイラ
• 最新のイケてるJS構文や、JSXを現行のブラウザでも動くようにトランスパイルしてくれる

Atomic Design

• react設計の考え方
• ページと部品（コンポーネント）で分けて考える
  • 単位は以下の通り
    • Atomics（原子）
    • Molcules（分子）
    • Organisms（有機物）
    • Templates（テンプレート）
    • Pages（ページ）

webpack

• モジュールバンドラー
• モジュール化されたJSファイルをブラウザ上で動くようにバンドルするツール
• 依存関係を解決してくれる
  • 例えばindex.jsで使うメソッドがlib.jsで定義されているとしたら
    • index.jsはlib.jsに依存している
  • 上記のような依存関係を解決してくれる

liタグとkey

• mapでliを操作する際はkeyを使わないと以下のエラーが発生する

Warning: Each child in a list should have a unique “key” prop.

ので、以下のようにliにkeyをつける

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
    const people = [{
      id: 0, // Used in JSX as a key
      name: 'Creola Katherine Johnson',
      profession: 'mathematician',
      accomplishment: 'spaceflight calculations',
      imageId: 'MK3eW3A'
    }, {
      id: 1, // Used in JSX as a key
      name: 'Mario José Molina-Pasquel Henríquez',
      profession: 'chemist',
      accomplishment: 'discovery of Arctic ozone hole',
      imageId: 'mynHUSa'
    }, {
      id: 2, // Used in JSX as a key
      name: 'Mohammad Abdus Salam',
      profession: 'physicist',
      accomplishment: 'electromagnetism theory',
      imageId: 'bE7W1ji'
    }];

    const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}</b>
          {' ' + person.profession + ' '}
          known for {person.accomplishment}
      </p>
    </li>
    );
    return <ul>{listItems}</ul>;
    }