untitled notebook

node v6.12.2
version: 2.0.0
endpointsharetweet
const React = require("react"); const { renderToString } = require("react-dom/server"); `<div id="root"></div> <script src="https://unpkg.com/react@15.6.2/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.6.2/dist/react-dom.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script type="text/babel"> class Square extends React.Component { constructor() { super(); this.state = { value: null, }; } render() { return ( <button className="square" onClick={() => this.setState({value: 'X'})}> {this.state.value} </button> ); } } class Board extends React.Component { renderSquare(i) { return <Square />; } 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> ); } } ReactDOM.render( <Game />, document.getElementById('root') ); </script> `
Loading…

no comments

    sign in to comment