これは
Reactチュートリアルをやっていく記事です。
参考
チュートリアル:React の導入
インタラクティブなコンポーネントを作る
Squareコンポーネントがクリックされた場合に"X"と表示されるようにする
まずはSquareをクリックするとブラウザでアラートが表示されるように変更
gyazo.com
アラートが表示されました。
gyazo.com
いちいちアラートが出ては困るので、stateを使ってSquareコンポーネントに自分がクリックされたことを記憶しておき、"X"マークで、マスを埋めるように変更する。
Reactコンポーネントはコンストラクタでthis.stateを設定することで状態を持つことができるようになる。
Squareコンポーネントにコンストラクタを追加する。
JavaScriptのクラスではサブクラスのコンストラクタを定義する際にはsuperを呼ぶ必要がある。
gyazo.com
Sqareコンポーネントのrenderメソッドを書き換えてクリックされた時にstateの場所を表示するようにする。
クリックした場所にXが表示されるようになりました。
今日はここまで。