Reactチュートリアルから学ぶ React独自の文法 with 三目並べゲーム

userStateのインポートの仕方

import { useState } from 'react';

userStateの定義　呼び出し

const [xIsNext, setXIsNext] = useState(true); 
const [squares, setSquares] = useState(Array(9).fill(null));

userStateの反映

setSquares(nextSquares); 
setXIsNext(!xIsNext);    //trueからfalseに変更するように要請を送るイメージ
//この時点ではまだ変更は反映されない
//コンポーネント内の全ての変更要請を受け取ったら、自動的にコンポーネントを最初から実行し始めます（再レンダリング）
//再レンダリング時に変更が反映される

新しい値が反映されるタイミングは、コンポーネントが次に実行される（再レンダリングされる）時

例:　setXIsNextの変更要請がxIsNextに反映されるタイミング

①const [xIsNext, setXIsNext] = useState(true);

xIsNext という state を宣言、状態の初期値はtrue

②五目並べのボードの四角をクリック→onclickでhandleClickメソッドが呼ばれる

③xIsNextがtrueだったら配列の値を"X"に変更する→setXIsNext(!xIsNext); ここで変更要請(まだ反映されない)

④このコンポーネント内での全ての変更要請を受け取ったら→自動的にコンポーネントを最初から実行し始めます（再レンダリング）　このタイミングで変更が反映されます。

コンポーネントの定義の仕方

function Square({value, onSquareClick}) {
// ...
}

戻り値の書き方はreturn ()括弧

悪い例:

return 
(　//←改行することでエラーになる可能性。正しくはreturn (
<div>
<p>Hello</p>
</div>
);

Fragment (<>...</>) の利用の仕方　

Reactコンポーネントの return 文の中では、複数要素を入れたい時に1つのコンテナにまとめて返す必要がある。コンテナ化のためだけにdivを追加して構造を複雑化させないために<></>がつかわれる

例:
このように<h1><p>タグ、複数要素を戻り値にしたいとき

return (
    <>
      <h1>Hello</h1>
      <p>Welcome to React!</p>
    </>
  );

チュートリアルで使われている箇所:

return (
<>
      <div className="status">{status}</div>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
 </>
 )

JSX内での変数埋め込み {}で囲む

JSXのタグ内や要素の中身で、JavaScriptの式（変数、関数、計算結果など）を使いたいときは、必ず {} で囲む

チュートリアルで使われている箇所:

<Square
  value={squares[0]} // Prop(プロパティー)、引数としてデータを渡す
  onSquareClick={() => handleClick(0)} // Propとして関数を渡す
/>