starting to build

src/App.tsx

@@ -1,26 +1,67 @@
 import React from 'react';
-import logo from './logo.svg';
+import ReactDOM from 'react-dom';
 import './App.css';
 
 function App() {
   return (
-    <div className="App">
+    <Game />
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
   );
 }
 
+class Square extends React.Component {
+  render() {
+    return(
+      <button className='square'>
+        { this.props.value }
+      </button>
+    );
+  }
+}
+
+class Board extends React.Component {
+  renderSquare(i: any) {
+    return <Square value={i} />
+  }
+
+  render() {
+    const status = 'Next player: X';
+
+    return(
+      <div>
+        <div className="status">{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>
+    );
+  }
+}
 export default App;