React 4 NoJSX

Four in a row, coded in React.js without JSX

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.js"></script>
<div id="container"></div>

CSS

table { background-color: blue }
td {
    background-color: white;
    border-radius: 50px;
    width: 50px;
    height: 50px;
}
.joueur1 { background-color: red; }
.joueur2 { background-color: yellow; }

JavaScript

n0/*
  Ce composant représente une case du plateau.
  
  Il est sans état, et a trois propriétés:
  
  - couleur (0, 1, 2): la couleur du pion.
  - columnIndex (int): l'indice de la colonne où se trove la case.
  - handleClick (int -> ()): une callback appelée lorsque 
    la case est cliquée
*/
var Piece = React.createClass({
    handleClick: function () {
        // la seule action qu'on fait lors d'un click, c'est
        // de communiquer le click au parent, en passant l'indice
        // de la colonne.
        this.props.handleClick(this.props.columnIndex);
    },

    render: function () {
        var couleur = {
            0: "",
            1: "joueur1",
            2: "joueur2"
        }[this.props.couleur];

        return React.DOM.td({
            className: couleur,
            onClick: this.handleClick
        });
    }
});

/*
  Ce composant représente une ligne du plateau.
  
  Il est sans état, et a deux propriétés:
  
  - pieces (list): liste contenant la couleur des cases de la ligne.
  - handleClick (int -> ()): une callback appelée lorsque 
    une case de la ligne a été cliquée.
*/
var Row = React.createClass({
    render: function () {
        // On crée une pièce pour chauqe case de la ligne
        var pieces = this.props.pieces.map(function (couleur, i) {
            return React.createElement(Piece, {
                handleClick: this.props.handleClick,
                columnIndex: i,
                couleur: couleur
            })
        },
        // Il est important d'attacher correctement `this` dans
        // la fonction anonyme passée à `map` (voir binding de this).
        this);

        return React.DOM.tr({}, pieces);
    }
});

/*
  Ce composant représente un plateau de Puissance 4.
  
  Il a deux propriétés, `width` et `height`, déterminant le nombre
  de lignes et de colonnes.
  
  Son état est composé de
  
  - plateau (list): une liste bi-dimensionnelle, de dimensions
    `width × height`. Les cases peuvent prendre les...