7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ぬくぬくReact学習記(1)

Posted at

##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を書くことができる。

3つのコンポーネント

  • 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される。なるほど、楽しくなってきたぞ。

今日はここまで。

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?