ぬくぬくReact学習記(1)

Let's start!

今日からfacebookのtutorialでReactを勉強する。ちゃんとアウトプットもする。

最初のコード

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

JSでclassを使ったことがなかったから、いきなりちょっと面食らった。ES6からはJSでもclassはこういうふうな書き方になるんだね。prototypeなどを駆使してオブジェクト指向をやることはもうなくなるのかな。

• renderはReact elementオブジェクトを返す。
• <div />という書き方はJSXというシンタクス拡張。プリプロセッサによって、ECMAScriptへ翻訳される。React.createElementと等価。
• JSXの中には、{}で囲んでJavaScriptを書くことができる。

３つのコンポーネント

• Squreコンポーネントは、一つ一つのマス
• Boardコンポーネントは、9個のマス
• Gameコンポーネントは、○×の置き場所（ボード全体というようなことも書いてあって、Gameコンポーネントはこの段階ではちょっとわかりづらい、、、誤解しているかも）

をそれぞれrenderする。
Square < Board < Gameというように、階層的にコンポーネント化されている。なんかすごくReactっぽい。（こなみかん）

コンポーネントの状態

• {this.props.value}でコンポーネント間で値の受け渡しができる。
• onClick={() => alert('click')}なんだこの書き方は、、と思ったら、これもES6からの新記法。匿名関数の省略型と考えて良いようだ。
• ハッシュの最後のカンマがOKになっている。いつから？？と思ったら、ECMAScript5からはOKで、IEの古いバージョンではエラーになる、ということのよう。

    this.state = {
      value: null,
    };

• コンポーネントの中では、this.stateにコンポーネントの状態を格納する。this.stateを書き換えることによって、コンポーネントの状態変化を表現する。（this.stateはコンポーネント内でprivateなプロパティ。）stateの変化は自動で子コンポーネントに通知され、子コンポーネントは再renderされる。なるほど、楽しくなってきたぞ。

今日はここまで。