Rendering the chess board with React

app/application.js

@@ -1,18 +1,19 @@
 "use strict";
 
-import Vue from "vue";
+import React from "react";
+import ReactDOM from "react-dom";
 
-import App from 'components/app';
+import ChessBoard from "components/chess-board";
-import store from "store";
 
-class Main {
+class App extends React.Component {
-  constructor() {
+  render() {
-    new Vue({
+    return (
-      el: '#app',
+      <ChessBoard />
-      store,
+    );
-      render: h => h(App)
-    });
   }
-};
+}
 
-export default new Main;
+ReactDOM.render(
+  <App />,
+  document.getElementById('app')
+);

app/components/app.vue

@@ -1,14 +0,0 @@
-<template>
-  <div id="app">
-    <chess-board></chess-board>
-  </div>
-</template>
-
-<script>
-import ChessBoard from './chess-board';
-import ChessPiece from "./chess-piece";
-
-export default {
-  components: { ChessBoard, ChessPiece }
-};
-</script>

app/components/chess-board-square.js

@@ -0,0 +1,27 @@
+import React from "react";
+import classNames from "classnames";
+
+class ChessBoardSquare extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    if (this.props.square == undefined) {
+      var squareClass = classNames(
+        "board-square",
+      )
+    }
+    else {
+      var squareClass = classNames(
+        "board-square",
+        this.props.square.type,
+        this.props.square.colour,
+      )
+    }
+
+    return <div className={squareClass} />
+  }
+}
+
+export default ChessBoardSquare;

app/components/chess-board.js

@@ -0,0 +1,30 @@
+import React from "react";
+
+import defaultState from "store/default_state";
+
+import ChessBoardSquare from "components/chess-board-square";
+
+class ChessBoard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = defaultState;
+  }
+
+  chessBoardRow(row) {
+    return (
+      <div className="board-row">
+        {row.map((square) => <ChessBoardSquare square={square} />)}
+      </div>
+    )
+  }
+
+  render() {
+    return (
+      <div className="board">
+        {this.state.board.map((row) => this.chessBoardRow(row))}
+      </div>
+    );
+  }
+}
+
+export default ChessBoard;

app/components/chess-board.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="board">
-    <div v-for="row in board" class="board-row">
-      <chess-piece v-for="piece in row" :piece="piece"></chess-piece>
-    </div>
-  </div>
-</template>
-
-<script>
-import ChessPiece from "./chess-piece";
-
-export default {
-  components: { ChessPiece },
-
-  computed: {
-    board() {
-      return this.$store.state.board;
-    }
-  },
-
-  methods: {
-    selectSquare: () => {
-    }
-  }
-};
-</script>

app/components/chess-piece.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="board-square" :class="classes(piece)"
-    v-on:click="selectSquare">
-  </div>
-</template>
-
-<script>
-export default {
-  methods: {
-    classes: (piece) => {
-      if (piece != null) {
-        return [piece.type, piece.colour];
-      }
-    },
-    selectSquare: () => {
-      console.log("Clicked square");
-    }
-  },
-
-  props: ["piece"]
-};
-</script>

app/reducers/chess-board.js

@@ -0,0 +1,9 @@
+import { defaultState } from "store/default_state";
+
+export const chessBoard = (state = defaultState, action) => {
+  switch (action.type) {
+    default:
+      return state;
+  }
+}
+

app/store.js

@@ -1,63 +0,0 @@
-import Vue from "vue";
-import Vuex from "vuex";
-
-Vue.use(Vuex);
-
-const store = new Vuex.Store({
-  state: {
-    board: [
-      [
-        { type: "rook",   colour: "black" },
-        { type: "knight", colour: "black" },
-        { type: "bishop", colour: "black" },
-        { type: "queen",  colour: "black" },
-        { type: "king",   colour: "black" },
-        { type: "bishop", colour: "black" },
-        { type: "knight", colour: "black" },
-        { type: "rook",   colour: "black" },
-      ],
-      [
-        { type: "pawn", colour: "black" },
-        { type: "pawn", colour: "black" },
-        { type: "pawn", colour: "black" },
-        { type: "pawn", colour: "black" },
-        { type: "pawn", colour: "black" },
-        { type: "pawn", colour: "black" },
-        { type: "pawn", colour: "black" },
-        { type: "pawn", colour: "black" },
-      ],
-      [null, null, null, null, null, null, null, null],
-      [null, null, null, null, null, null, null, null],
-      [null, null, null, null, null, null, null, null],
-      [null, null, null, null, null, null, null, null],
-      [
-        { type: "pawn", colour: "white" },
-        { type: "pawn", colour: "white" },
-        { type: "pawn", colour: "white" },
-        { type: "pawn", colour: "white" },
-        { type: "pawn", colour: "white" },
-        { type: "pawn", colour: "white" },
-        { type: "pawn", colour: "white" },
-        { type: "pawn", colour: "white" },
-      ],
-      [
-        { type: "rook",   colour: "white" },
-        { type: "knight", colour: "white" },
-        { type: "bishop", colour: "white" },
-        { type: "queen",  colour: "white" },
-        { type: "king",   colour: "white" },
-        { type: "bishop", colour: "white" },
-        { type: "knight", colour: "white" },
-        { type: "rook",   colour: "white" },
-      ],
-    ],
-  },
-  getters: {
-    chessBoard: state => {
-    },
-  },
-  mutations: {
-  }
-});
-
-export default store;

app/store/default_state.js

@@ -0,0 +1,50 @@
+const defaultState = {
+  board: [
+    [
+      { type: "rook",   colour: "black" },
+      { type: "knight", colour: "black" },
+      { type: "bishop", colour: "black" },
+      { type: "queen",  colour: "black" },
+      { type: "king",   colour: "black" },
+      { type: "bishop", colour: "black" },
+      { type: "knight", colour: "black" },
+      { type: "rook",   colour: "black" },
+    ],
+    [
+      { type: "pawn", colour: "black" },
+      { type: "pawn", colour: "black" },
+      { type: "pawn", colour: "black" },
+      { type: "pawn", colour: "black" },
+      { type: "pawn", colour: "black" },
+      { type: "pawn", colour: "black" },
+      { type: "pawn", colour: "black" },
+      { type: "pawn", colour: "black" },
+    ],
+    [null, null, null, null, null, null, null, null],
+    [null, null, null, null, null, null, null, null],
+    [null, null, null, null, null, null, null, null],
+    [null, null, null, null, null, null, null, null],
+    [
+      { type: "pawn", colour: "white" },
+      { type: "pawn", colour: "white" },
+      { type: "pawn", colour: "white" },
+      { type: "pawn", colour: "white" },
+      { type: "pawn", colour: "white" },
+      { type: "pawn", colour: "white" },
+      { type: "pawn", colour: "white" },
+      { type: "pawn", colour: "white" },
+    ],
+    [
+      { type: "rook",   colour: "white" },
+      { type: "knight", colour: "white" },
+      { type: "bishop", colour: "white" },
+      { type: "queen",  colour: "white" },
+      { type: "king",   colour: "white" },
+      { type: "bishop", colour: "white" },
+      { type: "knight", colour: "white" },
+      { type: "rook",   colour: "white" },
+    ],
+  ],
+};
+
+export default defaultState;

brunch-config.js

@@ -12,7 +12,7 @@ module.exports = {
   },
   plugins: {
     babel: {
-      presets: ['es2015', 'es2016']
+      presets: ['es2015', 'es2016', 'react']
     }
   }
 }

package.json

@@ -5,11 +5,17 @@
   "devDependencies": {
     "babel-brunch": "^6.0.6",
     "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-react": "^6.16.0",
     "brunch": "^2.9.1",
     "javascript-brunch": "^2.0.0",
-    "sass-brunch": "^2.7.0",
+    "sass-brunch": "^2.7.0"
-    "vue": "^2.0.5",
+  },
-    "vue-brunch": "^1.2.3",
+  "dependencies": {
-    "vuex": "^2.0.0"
+    "classnames": "^2.2.5",
+    "lodash": "^4.17.2",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1",
+    "react-redux": "^4.4.6",
+    "redux": "^3.6.0"
   }
 }