React のサンプルで勉強中
はじめに
React をダウンロードすると付属している example を写経中。
ページを開いてからの時間を表示するサンプルとクリックするとカウントアップするサンプルとの2つを作ったので載せておきます。
経過時間表示
ポイント「Prop」
外部から値を渡す場合、Propを通して行います。
<RunningTime start={start}/> のようにして渡した値は、this.props.start のようにして参照することが出来ます。
注意点は、渡されたこの値は変更が出来ません（Immutable）。
クリックカウンタ
ポイント「State」
Prop と異なり、動的に値が変わる場合は State を使用します。
基本的には getIntialState で state の初期値を返し、データに変更がある場合には this.setState で更新をします。
this.setState({count: this.state.count + 1});
this.state.count += 1 のように、直接値を値を代入しても変更されません。
必ずthis.setStateを使用する必要があるんですね。
まとめ
JS自体苦手なので、JSの勉強をしながら React 触ってるので進まない進まないw
まぁ、少しずつ進めていこうと思います。
