React チュートリアル
目次

ふむ

  • インタラクティブな三目並べゲーム (tic-tac-toe) を作る

  • Create React App: https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app

    • フロントエンドのビルドパイプラインを構築する

    • バックエンドのロジックやデータベース接続は扱わない

    • 内部では Babel と webpack を利用している

  • コンポーネントは props (“properties” の略)と呼ばれるパラメータを受け取り、render メソッドを通じて、表示するビューの階層構造を返します。

  • this.state はそれが定義されているコンポーネント内でプライベートと見なすべきものです

  • JavaScript のクラスでは、サブクラスのコンストラクタを定義する際は常に super を呼ぶ必要があります。

  • constructor を持つ React のクラスコンポーネントでは、すべてコンストラクタを super(props) の呼び出しから始めるべきです。

  • state を親コンポーネントにリフトアップ (lift up) することは React コンポーネントのリファクタリングでよくあることです

  • React では、イベントを表す props には on[Event] という名前、イベントを処理するメソッドには handle[Event] という名前を付けるのが慣習となっています。

  • React における関数コンポーネントとは、render メソッドだけを有して自分の state を持たないコンポーネントを、よりシンプルに書くための方法です。React.Component を継承するクラスを定義する代わりに、props を入力として受け取り表示すべき内容を返す関数を定義します。

  • リストには key が必要です

  • 「実を言うと class コンポーネントはもうあんまり使わないから state も使わないんだよなぁ。関数コンポーネントで書いて、状態はフックで管理するのが今どきのやり方らしい。」という情報を得た

コマンド memo

# https://nodejs.org/en/
# Node.js のバージョンを確認する
$ node --version

# Create React App で新しいプロジェクトを作成する
# npx: npm 5.2 から利用できるパッケージランナーツール
$ npx create-react-app tic-tac-toe

# アプリを起動
$ cd tic-tac-toe
$ npm start