React のチュートリアル (3目並べの途中まで）

こちらにあるチュートリアルの途中まで、クリックすると X がつくところまでを、改造して、JSX らしくしてみました。
チュートリアル：React の導入

参考ページ
Reactに入門するよ

スタート時

クリック

またクリック

#プロジェクトの作成#

npx create-react-app proj01

必要のないファイルを削除

cd proj01
rm -f src/*

次の２つのファイルを作成
index.js はチュートリアルに変更を加えました。
index.css はチュートリアルと同じです。

$ tree src
src
├── index.css
└── index.js

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Square extends React.Component {
  constructor(props) {
    super(props);
	this.state = {
		value: null,
		};
	}
  render() {
    return (
      <button className="square"
	 onClick={() => this.setState({value: 'X'})}
	>
        {this.state.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

  render() {
    const status = 'Next player: X';

const width = 3;
const height = 3;

var rows = []
rows.push(status)
rows.push(<p></p>)
for (let it = 0; it < width; it++) {
    const cells = [];
    for (let jt = 0; jt < height; jt++) {
      cells.push(this.renderSquare(it * 3 + jt));
    }
 rows.push(<div className="board-row">{cells}</div>);	
}
  return <div>{rows}</div>;
  };
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

index.css

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

サーバーの起動

npm start

ブラウザーで、
http://localhost:3000/
にアクセス