tab_selector_react.html

<!DOCTYPE html>
<html>
  <head>
    <script src="js/react.js"></script>
    <script src="js/JSXTransformer.js"></script>
    <link rel="stylesheet" tpe="text/css" href="style.css"/>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/jsx">
      var data = [
        {name: 'Red', value: 'red'},
        {name: 'Blue', value: 'blue'},
        {name: 'Yellow', value: 'yellow'},
        {name: 'Green', value: 'green'},
        {name: 'White', value: 'White'}
      ];

      var TabSelector = React.createClass({
        getInitialState: function() {
          return {selected: this.props.selected};
        },

        handleOnClick: function (evt) {
          this.setState({'selected': evt.target.getAttribute('data-value')})
        },

        render: function() {
          var tabs = this.props.data.map(function (item) {
            var selected = item.value == this.state.selected ? 'selected' : '';
            return <li data-value={item.value}
                className={selected}
                onClick={this.handleOnClick}
              >{item.name}</li>
            ;
          }, this);

          return <div className="tab-selector">
            <label>{this.props.label}</label>
            <ul>
              {tabs}
            </ul>
          </div>
          ;
        }
      });

      React.render(
        TabSelector({label: 'Color', data: data, selected: null}),
        document.getElementById('container')
      );
    </script>
  </body>
</html>