init ControlPanel and Counter

Author: mocheng

chapter-02/demo/src/App.css

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import Counter from './Counter.js';
+
+const style = {
+  margin: '20px'
+};
+
+class ControlPanel extends Component {
+
+  render() {
+    return (
+      <div style={style}>
+        <Counter caption="First" initValue={0} />
+        <Counter caption="Second" initValue={10} />
+        <Counter caption="Third" initValue={20} />
+      </div>
+    );
+  }
+}
+
+export default ControlPanel;
+

chapter-02/demo/src/App.js

@@ -0,0 +1,41 @@
+import React, { Component, PropTypes } from 'react';
+
+const buttonStyle = {
+  margin: '10px'
+};
+
+class Counter extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.onClickIncrementButton = this.onClickIncrementButton.bind(this);
+    this.onClickDecrementButton = this.onClickDecrementButton.bind(this);
+
+    this.state = {
+      count: props.initValue || 0
+    }
+  }
+
+  onClickIncrementButton() {
+    this.setState({count: this.state.count + 1});
+  }
+
+  onClickDecrementButton() {
+    this.setState({count: this.state.count - 1});
+  }
+
+  render() {
+    const {caption} = this.props;
+    return (
+      <div>
+        <button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button>
+        <button style={buttonStyle} onClick={this.onClickDecrementButton}>-</button>
+        <span>{caption} count: {this.state.count}</span>
+      </div>
+    );
+  }
+}
+
+export default Counter;
+

chapter-02/demo/src/App.test.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-//import App from './App';
-import ClickCounter from './ClickCounter';
+import ControlPanel from './ControlPanel';
 import './index.css';
 
 ReactDOM.render(
-  <ClickCounter/>,
+  <ControlPanel/>,
   document.getElementById('root')
 );