Javascript (React_基本的なこと01)

■三目並べのサンプルをいじる。
公式のHPにのっていた三目並べのコードを修正して、メソッドの意味とか確認している。公式ページにボタンのサンプルもあったので、それも使って下のようなものに修正した。ボタンを押すとクリック数が増えて、ある数から四角の枠の中に'X'を表示させる。また枠内をクリックすると'O'が表示される。

状態を保つためには、useState というAPI が必要。
import { useState } from 'react'; としてインポート。
下のコードのように、useState から変数と関数が作られる（squares と setSquares）。枠内をクリックすると、handleClickが呼び出され、それらにふられた番号(i)に応じた場所に'O'が入力される。

    const [squares, setSquares] = useState(Array(3).fill(null));

    function handleClick(i) {
        const nextSquares = squares.slice(); 
        nextSquares[i] = 'O';
        setSquares(nextSquares);
    }

コード全体を一番下に示すけど、src/App.js の中身になる。実行自体は、コマンドプロンプトから package.json があるフォルダへ行き、npm start でlocalhostのブラウザを立ち上げる。package.json から /src/index.js が呼び出され、さらに index.js から SampleApp_user01 を呼び出している。SampleApp_user01 から Square, MyButton への参照という構成。

Visual Studioでコード編集。

App.jsコード。

import { useState } from 'react';

function Square({ value, onSquareClick }) {
    return (
        <button className="square" onClick={onSquareClick}>
            {value}
        </button>
    );
}


function MyButton({ aaa }) {
    const [count, setCount] = useState(0);
    function handleClick() {
        setCount(count + 1);
        if (count < 5) {
            aaa(2, 'X');
        } else if (count < 10) {
            aaa(1, 'X');
        } else {
            aaa(0, 'X');
        }
    }
    return (
        <button onClick={handleClick}>
            Clicked {count} times
        </button>
    );
}

export default function SampleApp_user01() {

    const [squares, setSquares] = useState(Array(3).fill(null));

    function handleClick(i) {
        const nextSquares = squares.slice(); 
        nextSquares[i] = 'O';
        setSquares(nextSquares);
    }

    return (
        <div className="c1">
            <div className="game-info">
                <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>
                <MyButton
                    aaa={(index, newValue) => {
                        const nextSquares = squares.slice();
                        nextSquares[index] = newValue;
                        setSquares(nextSquares);
                    }} />
            </div>
        </div>
    );
}