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

オンラインのボードゲーム(OXゲーム)とかを作りたいと思って、Unityで作ったが、Chromeやモバイルで動かないので、Reactで作りたくなった。ReactのチュートリアルがちょうどOXゲームを作るものだったのでやってみる。

1日目

コンセプトからひとつひとつ学んでいきたい人のためのガイドHello World – Reactを読んでみるが、途中で飽きて、読み飛ばすことにする。

開発をブラウザで行うか、ローカル環境で行うか選べるが、将来的にローカルで開発することを考えて、ローカル環境を構築する。チュートリアルに従って問題なく環境構築できた。(Node.jsのインストールはMacにNode.jsをインストール – Qiitaを参考にした。)ローカル環境で実行できたので1日目は終了。

40分くらい。

2日目

概要ゲームを完成させるをやる。なんとなくReactがどんなものかわかってきた。

1時間くらい。

メモ: 関数コンポーネントとクラスコンポーネント

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

↑のthis.propsが何かわからないなら、ドキュメントにわかりやすく書いてある。↑は↓と等価。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

コンポーネントにはpropsとstateがあるらしい。 React Devtools 拡張機能を使用してブラウザから確認できる。

3日目

タイムトラベル機能の追加を行う。Reactについてなんとなくわかった気がする。

30分くらい。

今後

サーバと通信できるOXゲームに改良する。

終わりに

初めてReactを試した。

JavaScriptと比べて良さがいまいちわからなかった。

チュートリアルとしてはとてもわかりやすかったので、今後また使うことがあれば、もう一度このチュートリアルをやるのは良さそう。

Comments

タイトルとURLをコピーしました