React - onClick event not firing or updating

Question

I am new to React. I have downloaded and installed code from this "CSS Modules and React" tutorial:-

Tutorial: https://css-tricks.com/css-modules-part-3-react/

Code: https://github.com/robinrendle/react-css-modules-boilerplate

The downloaded code is basically working as far as I can tell but I'm unable to get simple onClick events working inside Components.

I've tried all suggestions I can find on internet but none of the solutions have worked for me. Could you please help me get this working. Thank you.

package.json:-

{
  "name": "css-tricks-modules",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --progress --colors",
    "start": "webpack && npm run dev"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "browser-sync": "^2.12.8",
    "browser-sync-webpack-plugin": "^1.0.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "react": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-router": "^2.4.0",
    "static-site-generator-webpack-plugin": "^2.0.1",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": ""
}

webpack.config.js:-

var ExtractTextPlugin = require('extract-text-webpack-plugin'),
    StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin'),
    BrowserSyncPlugin = require('browser-sync-webpack-plugin'),
    data = require('./data.js'),
    path = require('path');

module.exports = {
    entry: './src/router',
    output: {
        path: './build',
        filename: 'bundle.js',
        libraryTarget: 'umd',
        publicPath: '/'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                // include: __dirname + '/src',
                include: path.join(__dirname,'src'),
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),
                // include: __dirname + '/src'
                include: path.join(__dirname,'src')
            }
        ],
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
        new StaticSiteGeneratorPlugin('main', data.routes, data),
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            proxy: 'http://localhost:8080/'
        })
    ]
};

Home.js:-

import React from 'react'
import CoolButton from '../components/Button/Button'
import Counter from '../components/counter'
import App from '../components/app'
import App2 from '../components/app2'
import SayHello from '../components/sayHello'

export default class Home extends React.Component {
  render() {
    return (
        <div>
            <h1>Home page</h1>
            <p>This is a home page</p>
            <App />
            <App2 />
            <SayHello />
            <CoolButton text='A super cool button'/>
        </div>
    )
  }
}

sayHello.js (onClick event is not working):-

import React from 'react'

export default class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log("Hello!!!");
    alert("Hello!!!!");
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

app.js (onClick event not working):-

import React from 'react'

export default class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);

   };

   updateState() {
      this.setState({data: 'Data updated!!!'})
   }

   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}

app2.js (onClick event not working):-

import React from 'react';

export default class App2 extends React.Component {

  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

The code compiles without errors and in Components "SayHello" and "App2" their initial state text is rendered but their onClick event isn't occurring or the data isn't updating. I think most likely the event isn't firing but I'm not sure.

I'd much appreciate advice on where/why the problem is occurring and how to fix. Thanks.