SHARE
TWEET

Untitled

a guest Apr 24th, 2019 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. class Square extends React.Component {
  2.   render() {
  3.     return (
  4.       <button className="square">
  5.         {/* TODO */}
  6.       </button>
  7.     );
  8.   }
  9. }
  10.  
  11. class Board extends React.Component {
  12.   renderSquare(i) {
  13.     return <Square />;
  14.   }
  15.  
  16.   render() {
  17.     const status = 'Next player: X';
  18.  
  19.     return (
  20.       <div>
  21.         <div className="status">{status}</div>
  22.         <div className="board-row">
  23.           {this.renderSquare(0)}
  24.           {this.renderSquare(1)}
  25.           {this.renderSquare(2)}
  26.         </div>
  27.         <div className="board-row">
  28.           {this.renderSquare(3)}
  29.           {this.renderSquare(4)}
  30.           {this.renderSquare(5)}
  31.         </div>
  32.         <div className="board-row">
  33.           {this.renderSquare(6)}
  34.           {this.renderSquare(7)}
  35.           {this.renderSquare(8)}
  36.         </div>
  37.       </div>
  38.     );
  39.   }
  40. }
  41.  
  42. class Game extends React.Component {
  43.   render() {
  44.     return (
  45.       <div className="game">
  46.         <div className="game-board">
  47.           <Board />
  48.         </div>
  49.         <div className="game-info">
  50.           <div>{/* status */}</div>
  51.           <ol>{/* TODO */}</ol>
  52.         </div>
  53.       </div>
  54.     );
  55.   }
  56. }
  57.  
  58. // ========================================
  59.  
  60. ReactDOM.render(
  61.   <Game />,
  62.   document.getElementById('root')
  63. );
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top