React: counter

App.jsx

import React from "react";

import Message from "./Message";
import Button from "./Button";

class Appblah extends React.Component {
    constructor(props) {
      super(props);
      this.state = { changeNumber: 1 }
      this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
      let changeNumber = this.state.changeNumber;
      changeNumber += 1;
      this.setState({changeNumber:changeNumber});
    }

    render() {
      return (
          <div>
              <Message text={this.state.changeNumber} />
              <Button text="Add One" onClick={this.handleClick} />
          </div>
      );
    }
}

Button.jsx

import React from "react";

const Button = ({text, onClick}) => (
    <button onClick={onClick}>{text}</button>
);

Button.propTypes = {
    text: React.PropTypes.string.isRequired,
    onClick: React.PropTypes.func.isRequired
};

export default Button;

index.jsx

import React, { Component } from 'react';

import Appblah from "./components/";

class Main extends Component {
  render() {
    return (
      <div className="App">
        <Appblah />
      </div>
    );
  }
}

export default Main;

Message.jsx

import React from "react";

const Message = ({text}) => (
    <div>{text}</div>
);

Message.propTypes = {
    text: React.PropTypes.number.isRequired
};

export default Message;