こんにちは、さもです。
ブログなど漁ってみて、RailsへReactを導入してみようと思ったのですが、理解が及ばず。
まずはちゃんと入門してからにしようと、Reactの公式チュートリアルとチュートリアルの最後に書かれている追加課題をやってみました。
難しかったですが、なんとなくReactについて分かったような気がしなくもないです。
こちらのレポジトリにプッシュしています。
スポンサーリンク
目次
チュートリアルを始める
Tutorial: Intro To React - Reactからチュートリアルページへ飛びます。
※チュートリアルを始める前にNode.jsをインストールしておいてください。
まずは金型を作ってくれるcreate-react-appをインストールし、最初のプロジェクトを作ります
npm install -g create-react-app create-react-app my-app cd my-app
次に、新しく始めるために、srcフォルダを空にしておきます
rm -f src/*
srcフォルダにindex.jsとindex.cssを作成して、それぞれ、
からコピペしておきます。
あとはチュートリアルにしたがって進めていくと、履歴も見れちゃう○×ゲームが完成します。
環境構築は簡単でした！
特にnpm startとするだけで、サーバーが立てられブラウザが開いて、さらにファイルを保存するだけですぐに画面に反映されます。すぎょい！
解決した疑問・新たに抱いた疑問
親って何だ？
クラスをインスタンス化？描画？埋め込み？するクラス
HTMLでいう親要素とほぼ同じようなものかと思いました。
propsとstate何が違う？
- propsは子供へ伝えたり、親から伝わってきたりするプロパティ
- stateは自分自身だけがもつステータス。stateが変わるとすぐに画面に反映される
子へpropsを伝えるためだけのコード
途中から、ボタンクリック時のイベントがGameクラスで定義され、Boardクラスを通過してSquareに伝わります。
BoardクラスはGameクラスのonClickプロパティをそのままSquareクラスに伝えます。
なんとなく、Boardクラスのこの部分は無駄なコードのように見える。
最終的にトップクラスが太る
チュートリアル中でもそうですが、だんだんと処理がゲーム全体を見て行うようになっていくため、Gameクラスへ処理が集まってきました。
そういうものなんでしょうか？
追加課題
○×を置いた場所の位置を表示
各historyに以下のプロパティを追加して、ボタンクリック時に位置を記録しておき、画面に表示しています
position: { col: null, row: null, },
選択中のステップを太字にする
Gameクラスのrenderメソッドにて、現在のstepNumberとループ中のindexを比較して、同じならselectedというクラスを付与するようにしました。
2重ループでボードを作る
本当はfor文で実装したかったのですが、よく分からず。
mapを使った例はチュートリアルでも出てくるので、こちらを使いました。
以下はBoardクラスのrenderメソッドです
render() {
return (
<div>
{
Array(3).fill(0).map((row, i) => {
return (
<div className="board-row" key={i}>
{
Array(3).fill(0).map((col, j) => {
return(
this.renderSquare(i * 3 + j)
)
})
}
</div>
)
})
}
</div>
);
}
揃ったラインをハイライト
caclulateWinnerメソッドがどのラインが揃ったのかも返すようにし、
Gameクラス、Boardクラスを通してハイライトするかどうかをSquareクラスへ伝えています。
トグルボタンでボタンの並び順を変える
Ganeクラスに新しくorderステータスとトグルボタンを追加し、
ボタンが押されたらorderステータスを更新。
orderステータスがdescならmoves.reverse()してから描画、ということをしています。
チュートリアルをやってみた感想
（仮想）DOMとロジックが入り混じっているのでコードを読むのが結構大変だと思いました。結構泥臭い感じ？
もうちょっと勉強してみないと、Reactの良さが分からないですね。でも同じ機能をjQueryで実装するのもそこそこ大変そうです。今度jQueryでも同じやつやってみよう！
よく入門をうたうブログではReduxやFluxも使おうとしますが、Reactだけで精一杯です。公式のチュートリアルはReactだけなので、まず入門したい方は公式チュートリアルをやってみるのがいいと思います。英語ですが、Google翻訳しながらできましたよ！笑
以上、Reactチュートリアルやってみました。
読者登録はこちらからお願いします。
