Skip to content

Instantly share code, notes, and snippets.



Last active Aug 29, 2015
What would you like to do?
ReactTicTacToe - 40 digits code review
* @jsx React.DOM
//the top part is absolutely necessary dont erase, its for the jsx compiler
//wrapped the game functionality in an iife
(function() {
//the game board
var Board = React.createClass({
getInitialState: function() {
return {
//Initial state of the game board.
tiles: [
'', '', '',
'', '', '',
'', '', ''
turn: 'o'
tileClick: function(position, player) {
var tiles = this.state.tiles;
//If the selected position is already filled, return to prevent it being replaced.
if ( (tiles[position] === 'x' || tiles[position] === 'o') ) return;
tiles[position] = player;
this.setState({tiles: tiles, turn: player === 'o' ? 'x' : 'o'});
render: function() {
return <div>
<div id='board'>
return (
<Tile status={tile} id={position} turn={this.state.turn} tileClick={this.tileClick} />
}, this) }
<Menu turn={this.state.turn} />
//next we make the tiles
var Tile = React.createClass({
//The method to handle when a user clicks on the tile, calls the tileClick method on the parent component that is referenced in the props object.
clickHandler: function() {
this.props.tileClick(, this.props.turn);
render: function() {
return <div className={this.props.status === '' ? 'tile' : 'tile status-' + this.props.status} onClick={this .clickHandler}>{this.props.status}</div>;
//next the freaking menu
var Menu = React.createClass({
render: function() {
return <div id='menu'>
<h3>Player {this.props.turn}s turn.</h3>
<Board />,
/*This is a simple tic tac toe game written in OOP style, which from what I gather is slightly different from conventional OOP due to the React.js framework convention. */
//the view
<!DOCTYPE html>
<title>Tic Tac React</title>
<link type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css"href="css/main.css">
<script src=""></script>
<script src="jquery.js"></script>
<script src='bower_components/react/react.js'></script>
<script src='bower_components/react/JSXtransformer.js'></script>
<script type="text/jsx" src='app.jsx'></script>
<h1>miguel solano <a href=""><span>about</span></a></h1>
<div id="container"></div>
<div class="container">
<div class="row-centered">
<div class="col-md-3">
<p>The letter X is used more in math than
it is in english. But I'm willing to bet
its used more in tic-tac-toe.</p>
<div class="col-md-3">
<p>Don't really have an interesting fact
for you about the letter o. Aside from
the fact that it derived its shape from
<div class="col-md-3">
<h3>React Tac Toe</h3>
<p>React.js. A powerful micro-framework that
boost speed to unbelieveable power. Not to be
used for your first project.</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.