Reactチュートリアルをやっていってみるその6

これは

Reactチュートリアルをやっていく記事です。

参考

ja.reactjs.org

チュートリアル:React の導入

インタラクティブコンポーネントを作る

Squareコンポーネントがクリックされた場合に"X"と表示されるようにする

まずはSquareをクリックするとブラウザでアラートが表示されるように変更
gyazo.com

アラートが表示されました。
gyazo.com

いちいちアラートが出ては困るので、stateを使ってSquareコンポーネントに自分がクリックされたことを記憶しておき、"X"マークで、マスを埋めるように変更する。
Reactコンポーネントはコンストラクタでthis.stateを設定することで状態を持つことができるようになる。

Squareコンポーネントにコンストラクタを追加する。
JavaScriptのクラスではサブクラスのコンストラクタを定義する際にはsuperを呼ぶ必要がある。
gyazo.com

Sqareコンポーネントのrenderメソッドを書き換えてクリックされた時にstateの場所を表示するようにする。

gyazo.com

クリックした場所にXが表示されるようになりました。

gyazo.com

今日はここまで。