import React from 'react';

class App extends React.Component {
    render() {
        return (
            <h1>Hello World!</h1>
        );
    }
}

export default App;
import React from 'react';
import GameModel from './models/GameModel';
import NewGameComponent from './components/NewGameComponent';
import GameListComponent from './components/GameListComponent';



const headerStyle = {
  textAlign: "center"
};

const containerStyles = {
  width: "500px",
  height: "500px",
  margin: "auto",
};

class App extends React.Component {
  constructor() {
    super();

    this.games = new GameModel();
    this.games.subscribe(this.updateList.bind(this));

    this.state = {
      games: [],
    };
  }

  updateList() {
    this.setState({
      games: this.games.resources
    });
  }

  createGame() {
    this.games.addResource({
      playerOne: newPlayer
    });
  }

  render() {
    console.log(this.state);
    return (
      <div style={containerStyles}>
        <h1 style={headerStyle}>Games Menu</h1>
        <NewGameComponent games={this.state.games}/>
        <GameListComponent games={this.state.games}/>
      </div>
    );
  }
}

export default App;

add game components and model to App.js