zxiest/index.html

## index.html
<!-- https://facebook.github.io/react/docs/getting-started.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" title="no title" charset="utf-8" />

    <!-- Material Design Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Roboto Font -->
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script type="text/babel">
      const IconButton = function(props) {
       let className = 'btn btn-default'

       if (props.type) {
        className = 'btn btn-' + props.type;
       }

       let icon = null

       if (props.icon) {
        icon = <i className='material-icons'>{props.icon}</i>
       }

       return (
        <button className={className} onClick={props.onClick}>
         {icon}
         {props.label}
        </button>
       )
      }

      const List = function(props) {
        const list_items = props.data.map( function(e, i) {
          var span = null;
          if (e.badge) {
            span = <span className='badge'>{e.badge}</span>
          }

          return <li className='list-group-item' key={i}>{e.label}{span}</li>
        });

        return (
          <ul className='list-group'>
            {list_items}
          </ul>
        )
      }

      const list_data = [
        {
          label: 'Nodejs',
          badge: 3
        },
        {
          label: <IconButton label='React' type='success' icon='star' />
        },
        {
          label: 'Angular'
        }
      ]

      const Panel = function(props) {
        return (
          <div className="panel panel-default">
            <div className="panel-heading">
              <h3 className="panel-title">{props.title}</h3>
            </div>
            <div className="panel-body">
              {props.children}
            </div>
          </div>
        )
      }

      var Counter = React.createClass({
        getInitialState: function() {
          return {
            count: 0
          }
        },

        add: function() {
          console.log("clicked")
          this.setState({
            count: this.state.count + 1
          })
        },

        subtract: function() {
          this.setState({
            count: this.state.count - 1
          })
        },

        render: function() {
          return (
            <div>
              <h1>React Counter</h1>
              <h2>{this.state.count}</h2>
              <button className='btn btn-default' onClick={this.add}>+</button>
              <button className='btn btn-default' onClick={this.subtract}>-</button>
              <IconButton icon="add" onClick={this.add} />
              <IconButton icon="close" onClick={this.subtract} />
            </div>
          )
        }
      })

      ReactDOM.render(
        <div className='container'>

          <div className='jumbotron'>
            <h1>Hello React!</h1>
          </div>

          <div className='row'>
            <div className='col-xs-12'>
              <h2>Our &lt;IconButton /&gt; Component</h2>
              <ul className='list-inline'>
                <li><IconButton label="New Button" type='success' icon='star' /></li>
                <li><IconButton label="New Button" type='danger' icon='favorite' /></li>
                <li><IconButton label="New Button" type='warning' icon='warning'/></li>
                <li><IconButton label="New Button" type='default' /></li>
              </ul>
            </div>
          </div>
          <div className='row'>
            <div className='col-xs-12'>
              <h2>Our &lt;List /&gt; Component</h2>
              <List data={list_data} />
            </div>
          </div>

          <Panel title='React resources'>
            <h3>React's props.children</h3>
          </Panel>

          <Counter />
        </div>
      , document.getElementById('myDiv'));
    </script>
  </head>
  <body>
    <div id="myDiv">
    </div>
  </body>
</html>
	<!-- https://facebook.github.io/react/docs/getting-started.html -->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Hello React!</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" title="no title" charset="utf-8" />
	<link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" title="no title" charset="utf-8" />

	<!-- Material Design Icons -->
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

	<!-- Roboto Font -->
	<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

	<script src="build/react.js"></script>
	<script src="build/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
	<script type="text/babel">
	const IconButton = function(props) {
	let className = 'btn btn-default'

	if (props.type) {
	className = 'btn btn-' + props.type;
	}

	let icon = null

	if (props.icon) {
	icon = <i className='material-icons'>{props.icon}</i>
	}

	return (
	<button className={className} onClick={props.onClick}>
	{icon}
	{props.label}
	</button>
	)
	}

	const List = function(props) {
	const list_items = props.data.map( function(e, i) {
	var span = null;
	if (e.badge) {
	span = <span className='badge'>{e.badge}</span>
	}

	return <li className='list-group-item' key={i}>{e.label}{span}</li>
	});

	return (
	<ul className='list-group'>
	{list_items}
	</ul>
	)
	}

	const list_data = [
	{
	label: 'Nodejs',
	badge: 3
	},
	{
	label: <IconButton label='React' type='success' icon='star' />
	},
	{
	label: 'Angular'
	}
	]

	const Panel = function(props) {
	return (
	<div className="panel panel-default">
	<div className="panel-heading">
	<h3 className="panel-title">{props.title}</h3>
	</div>
	<div className="panel-body">
	{props.children}
	</div>
	</div>
	)
	}

	var Counter = React.createClass({
	getInitialState: function() {
	return {
	count: 0
	}
	},

	add: function() {
	console.log("clicked")
	this.setState({
	count: this.state.count + 1
	})
	},

	subtract: function() {
	this.setState({
	count: this.state.count - 1
	})
	},

	render: function() {
	return (
	<div>
	<h1>React Counter</h1>
	<h2>{this.state.count}</h2>
	<button className='btn btn-default' onClick={this.add}>+</button>
	<button className='btn btn-default' onClick={this.subtract}>-</button>
	<IconButton icon="add" onClick={this.add} />
	<IconButton icon="close" onClick={this.subtract} />
	</div>
	)
	}
	})

	ReactDOM.render(
	<div className='container'>

	<div className='jumbotron'>
	<h1>Hello React!</h1>
	</div>

	<div className='row'>
	<div className='col-xs-12'>
	<h2>Our <IconButton /> Component</h2>
	<ul className='list-inline'>
	<li><IconButton label="New Button" type='success' icon='star' /></li>
	<li><IconButton label="New Button" type='danger' icon='favorite' /></li>
	<li><IconButton label="New Button" type='warning' icon='warning'/></li>
	<li><IconButton label="New Button" type='default' /></li>
	</ul>
	</div>
	</div>
	<div className='row'>
	<div className='col-xs-12'>
	<h2>Our <List /> Component</h2>
	<List data={list_data} />
	</div>
	</div>

	<Panel title='React resources'>
	<h3>React's props.children</h3>
	</Panel>

	<Counter />
	</div>
	, document.getElementById('myDiv'));
	</script>
	</head>
	<body>
	<div id="myDiv">
	</div>
	</body>
	</html>