Correction

src/App.css

@@ -3,7 +3,7 @@
 }
 
 .App-logo {
-  animation: App-logo-spin infinite 20s linear;
+  animation: App-logo-spin infinite 120s linear;
   height: 40vmin;
 }
 
@@ -30,3 +30,45 @@
     transform: rotate(360deg);
   }
 }
+
+.status {
+    margin-bottom: 10px;
+}
+
+.board-row:after {
+    clear: both;
+    content: "";
+    display: table;
+}
+
+.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;
+}
+
+.game {
+    display: flex;
+    flex-direction: row;
+}
+.game {
+    display: flex;
+    flex-direction: row;
+}
+
+.game-info {
+    margin-left: 20px;
+}

src/App.js

@@ -1,24 +1,17 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import GameComponent from './GameComponent';
+import SquareComponent from './SquareComponent';
+import BoardComponent from './BoardComponent';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
         <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
+            <img src={logo} className="App-logo" alt="logo" />
+            <BoardComponent/>
         </header>
       </div>
     );

src/BoardComponent.jsx

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import SquareComponent from "./SquareComponent";
+
+export default class BoardComponent extends Component{
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            grid: Array(9).fill(null),
+            player: "X",
+        };
+    }
+
+    handleClick(index) {
+        const grid = [...this.state.grid];
+        grid[index] = this.state.player;
+
+        if(this.state.player === 'X'){
+            this.setState({player: 'O'});
+        }
+        else{
+            this.setState({player: 'X'});
+        }
+        this.setState({ grid });
+    }
+
+
+
+    renderCell(index) {
+        return <SquareComponent
+            value={this.state.grid[index]}
+            onClick={() => this.handleClick(index)}
+        />;
+    }
+
+    render() {
+        const status = 'Next player:' + this.state.player + '';
+        return (
+            <div>
+                <div className="status">{status}</div>
+                <div className="board-row">
+                    { this.renderCell(0) }
+                    { this.renderCell(1) }
+                    { this.renderCell(2) }
+                </div>
+                <div className="board-row">
+                    { this.renderCell(3) }
+                    { this.renderCell(4) }
+                    { this.renderCell(5) }
+                </div>
+                <div className="board-row">
+                    { this.renderCell(6) }
+                    { this.renderCell(7) }
+                    { this.renderCell(8) }
+                </div>
+            </div>
+        );
+    }
+
+}

src/GameComponent.jsx

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import BoardComponent from "./BoardComponent";
+
+export default class GameComponent extends Component{
+
+    render() {
+        return (
+            <div className="game">
+                <BoardComponent />
+                <div className="game-info">
+                    <div>{/* status */}</div>
+                    <ol>{/* TODO */}</ol>
+                </div>
+            </div>
+        );
+    }
+
+}

src/SquareComponent.jsx

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+export default class SquareComponent extends Component{
+
+    getStyle() {
+        return {
+            cursor: this.props.value ? 'default' : 'pointer'
+        }
+    }
+
+    render() {
+        return (
+            <button
+                className="square"
+                style={this.getStyle()}
+                onClick={this.props.onClick}
+            >
+                {this.props.value}
+            </button>
+        );
+    }
+
+}