React // source https://jsbin.com/yufijad

index.html

<style id="jsbin-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;
}
</style>
<div id='root'></div>
<script id="jsbin-javascript">
A = 'appendChild'
g = a => (
//   console.log('g', a),
  a = a || [],
  a.map ? a.flatMap(g) : [a]
)
React = {
    Component: function(p) {
      this.props = p
    },
    [C = 'createElement']: (t, p, ...c) => (
//       console.log('createElement', '\n>>', t, '\n>>', p, '\n>>', c, '\n'),
      t.bind
        ? new t(p)
        : (
          e = document[C](t),
          (() => {
            for (n in p)
              e[n] = p[n]
          })(),
          g(c).map(a => (
//             (!e || !e[A]) && console.log('tpc', t, p, c),
            e[A](
              a.props
                ? a.render()
                : a.part
                  ? a
                  : new Text(a)
            )
          )),
//           console.log('e',e),
          e
        )
    )
}

// Additional ReactDOM plugin
ReactDOM = {
  render: (r, h) => (
    r.h = h,
//   (!h || !h[A]) && console.log('rh', r, h),
    h[A](r.render())
  )
}

// Additional plugin, if you also want setState
React.Component.prototype.setState=function(s){
  this.state={...this.state,...s};
  !this.h && console.log('setState', this, this.h);
  this.h.innerHTML='';
  ReactDOM.render(this,this.h)
}


function Square(props) {
  return (
    React.createElement("button", {className: "square", onclick: props.onClick}, 
      props.value
    )
  );
}

class Board extends React.Component {
  renderSquare(i) {
    return (
      React.createElement(Square, {
        value: this.props.squares[i], 
        onClick: () => this.props.onClick(i)}
      )
    );
  }

  render() {
    return (
      React.createElement("div", null, 
        React.createElement("div", {className: "board-row"}, 
          this.renderSquare(0), 
          this.renderSquare(1), 
          this.renderSquare(2)
        ), 
        React.createElement("div", {className: "board-row"}, 
          this.renderSquare(3), 
          this.renderSquare(4), 
          this.renderSquare(5)
        ), 
        React.createElement("div", {className: "board-row"}, 
          this.renderSquare(6), 
          this.renderSquare(7), 
          this.renderSquare(8)
        )
      )
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [
        {
          squares: Array(9).fill(null)
        }
      ],
      stepNumber: 0,
      xIsNext: true
    };
  }

  handleClick(i) {
    console.log('handleClick', i);
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? "X" : "O";
    this.setState({
      history: history.concat([
        {
          squares: squares
        }
      ]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext
    });
  }

  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0
    });
  }

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);

    const moves = history.map((step, move) => {
      const desc = move ?
        'Go to move #' + move :
        'Go to game start';
      return (
        React.createElement("li", {key: move}, 
          React.createElement("button", {onclick: () => this.jumpTo(move)}, desc)
        )
      );
    });

    let status;
    if (winner) {
      status = "Winner: " + winner;
    } else {
      status = "Next player: " + (this.state.xIsNext ? "X" : "O");
    }

    return (
      React.createElement("div", {className: "game"}, 
        React.createElement("div", {className: "game-board"}, 
          React.createElement(Board, {
            squares: current.squares, 
            onClick: i => this.handleClick(i)}
          )
        ), 
        React.createElement("div", {className: "game-info"}, 
          React.createElement("div", null, status), 
          React.createElement("ol", null, moves)
        )
      )
    );
  }
}

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

ReactDOM.render(React.createElement(Game, null), document.getElementById("root"));
console.log('✓')

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}
</script>

<script id="jsbin-source-css" type="text/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;
}
</script>

<script id="jsbin-source-javascript" type="text/javascript">A = 'appendChild'
g = a => (
//   console.log('g', a),
  a = a || [],
  a.map ? a.flatMap(g) : [a]
)
React = {
    Component: function(p) {
      this.props = p
    },
    [C = 'createElement']: (t, p, ...c) => (
//       console.log('createElement', '\n>>', t, '\n>>', p, '\n>>', c, '\n'),
      t.bind
        ? new t(p)
        : (
          e = document[C](t),
          (() => {
            for (n in p)
              e[n] = p[n]
          })(),
          g(c).map(a => (
//             (!e || !e[A]) && console.log('tpc', t, p, c),
            e[A](
              a.props
                ? a.render()
                : a.part
                  ? a
                  : new Text(a)
            )
          )),
//           console.log('e',e),
          e
        )
    )
}

// Additional ReactDOM plugin
ReactDOM = {
  render: (r, h) => (
    r.h = h,
//   (!h || !h[A]) && console.log('rh', r, h),
    h[A](r.render())
  )
}

// Additional plugin, if you also want setState
React.Component.prototype.setState=function(s){
  this.state={...this.state,...s};
  !this.h && console.log('setState', this, this.h);
  this.h.innerHTML='';
  ReactDOM.render(this,this.h)
}


function Square(props) {
  return (
    <button className="square" onclick={props.onClick}>
      {props.value}
    </button>
  );
}

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [
        {
          squares: Array(9).fill(null)
        }
      ],
      stepNumber: 0,
      xIsNext: true
    };
  }

  handleClick(i) {
    console.log('handleClick', i);
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? "X" : "O";
    this.setState({
      history: history.concat([
        {
          squares: squares
        }
      ]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext
    });
  }

  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0
    });
  }

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);

    const moves = history.map((step, move) => {
      const desc = move ?
        'Go to move #' + move :
        'Go to game start';
      return (
        <li key={move}>
          <button onclick={() => this.jumpTo(move)}>{desc}</button>
        </li>
      );
    });

    let status;
    if (winner) {
      status = "Winner: " + winner;
    } else {
      status = "Next player: " + (this.state.xIsNext ? "X" : "O");
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={i => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>
        </div>
      </div>
    );
  }
}

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

ReactDOM.render(<Game />, document.getElementById("root"));
console.log('✓')

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}</script>

jsbin.yufijad.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;
}

jsbin.yufijad.js

A = 'appendChild'
g = a => (
//   console.log('g', a),
  a = a || [],
  a.map ? a.flatMap(g) : [a]
)
React = {
    Component: function(p) {
      this.props = p
    },
    [C = 'createElement']: (t, p, ...c) => (
//       console.log('createElement', '\n>>', t, '\n>>', p, '\n>>', c, '\n'),
      t.bind
        ? new t(p)
        : (
          e = document[C](t),
          (() => {
            for (n in p)
              e[n] = p[n]
          })(),
          g(c).map(a => (
//             (!e || !e[A]) && console.log('tpc', t, p, c),
            e[A](
              a.props
                ? a.render()
                : a.part
                  ? a
                  : new Text(a)
            )
          )),
//           console.log('e',e),
          e
        )
    )
}

// Additional ReactDOM plugin
ReactDOM = {
  render: (r, h) => (
    r.h = h,
//   (!h || !h[A]) && console.log('rh', r, h),
    h[A](r.render())
  )
}

// Additional plugin, if you also want setState
React.Component.prototype.setState=function(s){
  this.state={...this.state,...s};
  !this.h && console.log('setState', this, this.h);
  this.h.innerHTML='';
  ReactDOM.render(this,this.h)
}


function Square(props) {
  return (
    React.createElement("button", {className: "square", onclick: props.onClick}, 
      props.value
    )
  );
}

class Board extends React.Component {
  renderSquare(i) {
    return (
      React.createElement(Square, {
        value: this.props.squares[i], 
        onClick: () => this.props.onClick(i)}
      )
    );
  }

  render() {
    return (
      React.createElement("div", null, 
        React.createElement("div", {className: "board-row"}, 
          this.renderSquare(0), 
          this.renderSquare(1), 
          this.renderSquare(2)
        ), 
        React.createElement("div", {className: "board-row"}, 
          this.renderSquare(3), 
          this.renderSquare(4), 
          this.renderSquare(5)
        ), 
        React.createElement("div", {className: "board-row"}, 
          this.renderSquare(6), 
          this.renderSquare(7), 
          this.renderSquare(8)
        )
      )
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [
        {
          squares: Array(9).fill(null)
        }
      ],
      stepNumber: 0,
      xIsNext: true
    };
  }

  handleClick(i) {
    console.log('handleClick', i);
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? "X" : "O";
    this.setState({
      history: history.concat([
        {
          squares: squares
        }
      ]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext
    });
  }

  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0
    });
  }

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);

    const moves = history.map((step, move) => {
      const desc = move ?
        'Go to move #' + move :
        'Go to game start';
      return (
        React.createElement("li", {key: move}, 
          React.createElement("button", {onclick: () => this.jumpTo(move)}, desc)
        )
      );
    });

    let status;
    if (winner) {
      status = "Winner: " + winner;
    } else {
      status = "Next player: " + (this.state.xIsNext ? "X" : "O");
    }

    return (
      React.createElement("div", {className: "game"}, 
        React.createElement("div", {className: "game-board"}, 
          React.createElement(Board, {
            squares: current.squares, 
            onClick: i => this.handleClick(i)}
          )
        ), 
        React.createElement("div", {className: "game-info"}, 
          React.createElement("div", null, status), 
          React.createElement("ol", null, moves)
        )
      )
    );
  }
}

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

ReactDOM.render(React.createElement(Game, null), document.getElementById("root"));
console.log('✓')

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}