Would you like to clone this notebook?

When you clone a notebook you are able to make changes without affecting the original notebook.

Cancel

React + ReactDOM in a tweet

node v10.23.3
version: 1.0.0
endpointsharetweet
// paste into react.jsbin.com // remove scripts loading the actual react lib if any // https://react.jsbin.com/godotur/1/edit?js,output // React + ReactDOM.render (no virtual DOM) function Co(p){this.props=p}A='appendChild',g=a=>a.map?a.flatMap(g):[a] React={[C='createElement']:(t,p,...c)=>t.bind?new t(p):(e=document[C](t),(()=>{for(n in p)e[n]=p[n]})(),g(c).map(a=>e[A](a.tagName?a:new Text(a))),e)} render=(r,h)=>(r.h=h,h[A](r.render())) // the correct one // function Co(p){this.props=p}A='appendChild',g=a=>(a||'').map?a.flatMap(g):[a||''] // React={[C='createElement']:(t,p,...c)=>t.bind?new t(p):(e=document[C](t),(()=>{for(n in p)e[n]=p[n]})(),g(c).map(a=>e[A](a.tagName?a:new Text(a))),e)} // render=(r,h)=>(r.h=h,h[A](r.render())) // Additional plugin, if you also want setState Co.prototype.setState=function(s){ this.state={...this.state,...s} this.h.innerHTML='' render(this,this.h) } // Usage class App extends Co { constructor(){super();this.state={count:0}} handleClick() {this.setState({count:this.state.count+1})} render() { return (<div onclick={this.handleClick.bind(this)} style="color:green;font-weight:bold;">Count: {this.state.count}</div>); } } render( <App/>, document.getElementById('container') );
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="errors" style=" background: #c00; color: #fff; display: none; margin: -20px -20px 20px; padding: 20px; white-space: pre-wrap; "></div> <div id="root"></div> <script> window.addEventListener('mousedown', function(e) { document.body.classList.add('mouse-navigation'); document.body.classList.remove('kbd-navigation'); }); window.addEventListener('keydown', function(e) { if (e.keyCode === 9) { document.body.classList.add('kbd-navigation'); document.body.classList.remove('mouse-navigation'); } }); window.addEventListener('click', function(e) { if (e.target.tagName === 'A' && e.target.getAttribute('href') === '#') { e.preventDefault(); } }); window.onerror = function(message, source, line, col, error) { var text = error ? error.stack || error : message + ' (at ' + source + ':' + line + ':' + col + ')'; errors.textContent += text + '\n'; errors.style.display = ''; }; console.error = (function(old) { return function error() { errors.textContent += Array.prototype.slice.call(arguments).join(' ') + '\n'; errors.style.display = ''; old.apply(this, arguments); } })(console.error); </script> </body> </html>
body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px; } .board-row:after { clear: both; content: ""; display: table; } .status { margin-bottom: 10px; } .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; } .kbd-navigation .square:focus { background: #ddd; } .game { display: flex; flex-direction: row; } .game-info { margin-left: 20px; }
A = 'appendChild' g = a => ( // console.log('g', a), a = a || [], a.map ? a.flatMap(g) : [a] ) React = { Component: function(p) { this.props = p }, [C = 'createElement']: (t, p, ...c) => ( // console.log('createElement', '\n>>', t, '\n>>', p, '\n>>', c, '\n'), t.bind ? new t(p) : ( e = document[C](t), (() => { for (n in p) e[n] = p[n] })(), g(c).map(a => ( // (!e || !e[A]) && console.log('tpc', t, p, c), e[A]( a.props ? a.render() : a.part ? a : new Text(a) ) )), // console.log('e',e), e ) ) } // Additional ReactDOM plugin ReactDOM = { render: (r, h) => ( r.h = h, // (!h || !h[A]) && console.log('rh', r, h), h[A](r.render()) ) } // Additional plugin, if you also want setState React.Component.prototype.setState=function(s){ this.state={...this.state,...s}; !this.h && console.log('setState', this, this.h); this.h.innerHTML=''; ReactDOM.render(this,this.h) } function Square(props) { return ( <button className="square" onclick={props.onClick}> {props.value} </button> ); } class Board extends React.Component { renderSquare(i) { return ( <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} /> ); } render() { return ( <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 { constructor(props) { super(props); this.state = { history: [ { squares: Array(9).fill(null) } ], stepNumber: 0, xIsNext: true }; } handleClick(i) { console.log('handleClick', i); const history = this.state.history.slice(0, this.state.stepNumber + 1); const current = history[history.length - 1]; const squares = current.squares.slice(); if (calculateWinner(squares) || squares[i]) { return; } squares[i] = this.state.xIsNext ? "X" : "O"; this.setState({ history: history.concat([ { squares: squares } ]), stepNumber: history.length, xIsNext: !this.state.xIsNext }); } jumpTo(step) { this.setState({ stepNumber: step, xIsNext: (step % 2) === 0 }); } render() { const history = this.state.history; const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares); const moves = history.map((step, move) => { const desc = move ? 'Go to move #' + move : 'Go to game start'; return ( <li key={move}> <button onclick={() => this.jumpTo(move)}>{desc}</button> </li> ); }); let status; if (winner) { status = "Winner: " + winner; } else { status = "Next player: " + (this.state.xIsNext ? "X" : "O"); } return ( <div className="game"> <div className="game-board"> <Board squares={current.squares} onClick={i => this.handleClick(i)} /> </div> <div className="game-info"> <div>{status}</div> <ol>{moves}</ol> </div> </div> ); } } // ======================================== ReactDOM.render(<Game />, document.getElementById("root")); console.log('✓') function calculateWinner(squares) { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; for (let i = 0; i < lines.length; i++) { const [a, b, c] = lines[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } } return null; }
Loading…

no comments

    sign in to comment