Dead simple using reactjs with plain html (no nodejs)

<html>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<style>
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>
<script type="text/babel">
	function Square(props) {
	  return (
		<button className="square" onClick={props.ClickAr}>
		  {props.value}
		</button>
	  );
	}

	class Board extends React.Component {
		constructor(props) {
		  super(props);
		  this.state = {
			squares: Array(9).fill(null),
		  };
		}

	  renderSquare(i) {
		return (
			<Square
				value={this.state.squares[i]}
				ClickAr={() => this.handleClick(i)}
			/>
		);
	  }

	  handleClick(i) {
		const squares = this.state.squares.slice();
		squares[i] = 'X';
		this.setState({squares: squares});
	  }

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

		return (
		  <div>
			<div className="status">Hi, {status}</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 {
	  render() {
		return (
		  <div className="game">
			<div className="game-board">
			  <Board />
			</div>
			<div className="game-info">
			  <div>{/* status */}</div>
			  <ol>{/* TODO */}</ol>
			</div>
		  </div>
		);
	  }
	}


	class Fuck extends React.Component {
	  render() {
		return (
			<div className="shopping-list">
			  <h1>Shopping List for {this.props.name}</h1>
			  <ul>
				<li>Instagram</li>
				<li>WhatsApp</li>
				<li>Oculus</li>
			  </ul>
			</div>
		);
	  }
	}

	ReactDOM.render(
	  <Game />,
	  document.querySelector('#app')
	);
    // ========================================
</script>
<body class="ms-Fabric">
<div id="app">
</div>
<div id="offIceApp"></div>
</body>
</html>
Post Views: 2,088
2017/12/18 by admin