/clickcounter.html

## clickcounter.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>かんすうがた　くりっく　かうんたー w</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
  </head>
  <body>
    <h1>かんすうがた　くりっく　かうんたー w</h1>
    <p>
      ES6のconstを使っているので、最新のFirefoxとChrome推奨です。
      破壊的代入やArrayの破壊的メソッドは使って無いはず。
    </p>
    <div id="content"></div>
    <script src="https://fb.me/react-0.13.3.min.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
    <script type="text/jsx">
      (function() {
        const ClickCounter = React.createClass({
          getInitialState: function() {
            return {
              data: Array.apply(null, Array(this.props.number)).map(function() {return 0;}),
              total: 0
            };
          },
          handleClick: function(number) {
            const newData = this.state.data.map(function(v, i) {return v + ((number === i) ? 1 : 0)});
            const newTotal = this.state.total + 1;
            this.setState({data: newData, total: newTotal});
          },
          render: function() {
            return (
              <div className="clickCounter">
                <ChildrenCounter data={this.state.data} total={this.state.total} onClick={this.handleClick}/>
              </div>
            );
          }
        });

        const ChildrenCounter = React.createClass({
          render: function() {
            const children = this.props.data.map(function(v, i) {
              return <ChildCounter number={i} count={v} total={this.props.total} onClick={this.props.onClick}/>;
            }, this);
            return (
              <div className="childrenCounter row">
                {children}
              </div>
            );
          }
        });

        const ChildCounter = React.createClass({
          onClick: function() {
            return this.props.onClick(this.props.number);
          },
          render: function() {
            return (
              <div className="childCounter col-sm-3 col-md-2 panel panel-default text-center" onClick={this.onClick}>
                <h3>ばんごう {this.props.number}</h3>
                <p>このわく <span className="badge">{this.props.count}</span></p>
                <p>とーたる <span className="badge">{this.props.total}</span></p>
              </div>
            );
          }
        });

        React.render(<ClickCounter number={4}/>, document.getElementById('content'));
      }).call(this);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>かんすうがた　くりっく　かうんたー w</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
	</head>
	<body>
	<h1>かんすうがた　くりっく　かうんたー w</h1>
	<p>
	ES6のconstを使っているので、最新のFirefoxとChrome推奨です。
	破壊的代入やArrayの破壊的メソッドは使って無いはず。
	</p>
	<div id="content"></div>
	<script src="https://fb.me/react-0.13.3.min.js"></script>
	<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
	<script type="text/jsx">
	(function() {
	const ClickCounter = React.createClass({
	getInitialState: function() {
	return {
	data: Array.apply(null, Array(this.props.number)).map(function() {return 0;}),
	total: 0
	};
	},
	handleClick: function(number) {
	const newData = this.state.data.map(function(v, i) {return v + ((number === i) ? 1 : 0)});
	const newTotal = this.state.total + 1;
	this.setState({data: newData, total: newTotal});
	},
	render: function() {
	return (
	<div className="clickCounter">
	<ChildrenCounter data={this.state.data} total={this.state.total} onClick={this.handleClick}/>
	</div>
	);
	}
	});

	const ChildrenCounter = React.createClass({
	render: function() {
	const children = this.props.data.map(function(v, i) {
	return <ChildCounter number={i} count={v} total={this.props.total} onClick={this.props.onClick}/>;
	}, this);
	return (
	<div className="childrenCounter row">
	{children}
	</div>
	);
	}
	});

	const ChildCounter = React.createClass({
	onClick: function() {
	return this.props.onClick(this.props.number);
	},
	render: function() {
	return (
	<div className="childCounter col-sm-3 col-md-2 panel panel-default text-center" onClick={this.onClick}>
	<h3>ばんごう {this.props.number}</h3>
	<p>このわく <span className="badge">{this.props.count}</span></p>
	<p>とーたる <span className="badge">{this.props.total}</span></p>
	</div>
	);
	}
	});

	React.render(<ClickCounter number={4}/>, document.getElementById('content'));
	}).call(this);
	</script>
	</body>
	</html>