DND: Blog post - Creating chrome extensions with React

## client.jsx
var TabSwitcher = require('./client/tab_switcher.jsx');

React.renderComponent(<TabSwitcher />, document.getElementById('switcher'));

## jsx.jsx
// JSX lets you write this...
render: function() {
  return (
    <p onClick={this.onClick}>
      Hello, <input type="text" placeholder="Your name here" />!
      It is {this.getDate()}.
    </p>
  );
}

// ...instead of this
render: function() {
  return (
    React.DOM.p({onClick: this.onClick},
      " Hello, ", React.DOM.input({type: "text", placeholder: "Your name here"}), "! " +
      "It is ", this.getDate(), ". "
    )
  );
}

## switcher.html
<!doctype html>

<title>Fast Tab Switcher</title>
<style>
  /* ... */
</style>

<div id='switcher'></div>
<script src="../js/vendor/react-0.9.min.js"></script>
<script src='../js/client-bundle.js'></script>

## tab_search_box_eventflow.jsx
// TabSearchBox
module.exports = React.createClass({
  // ...

  render: function() {
    return (
      <input type='text' ref='input' onChange={this.onChange} />
    );
  },

  onChange: function(evt) {
    if (evt.target.value !== this.props.filter)
      this.props.changeFilter(evt.target.value);
  },

  // ...
});

## tab_switcher_eventflow.jsx
// TabSwitcher
module.exports = React.createClass({
  // ...

  changeFilter: function(newFilter) {
    this.setState({filter: newFilter, selected: null});
  },

  // ..
});

## tab_switcher_highlevel.jsx
var TabSearchBox = require('./tab_search_box.jsx');
var TabList = require('./tab_list.jsx');
var StatusBar = require('./status_bar.jsx');

// TabSwitcher
module.exports = React.createClass({
  getInitialState: function() {
    return {
      filter: '',
      selected: null,
      tabs: [],
      searchAllWindows: false
    };
  },

  componentDidMount: function() {
    window.onblur = this.close;
    this.refreshTabs();
  },

  render: function() {
    return (
      <div>
        <TabSearchBox
          filter={this.state.filter}
          exit={this.close}
          changeFilter={this.changeFilter}
          activateSelected={this.activateSelected}
          modifySelected={this.modifySelected} />
        <TabList
          tabs={this.filteredTabs()}
          filter={this.state.filter}
          selectedTab={this.getSelected()}
          changeSelected={this.changeSelected}
          activateSelected={this.activateSelected} />
        <StatusBar
          searchAllWindows={this.state.searchAllWindows}
          changeSearchAllWindows={this.changeSearchAllWindows} />
      </div>
    );
  },

  // ...
});

## tab_switcher_render.jsx
// TabSwitcher
module.exports = React.createClass({
  // ...

  render: function() {
    return (
      <div>
        <TabSearchBox
          filter={this.state.filter}
          exit={this.close}
          changeFilter={this.changeFilter}
          activateSelected={this.activateSelected}
          modifySelected={this.modifySelected} />
        <TabList
          tabs={this.filteredTabs()}
          filter={this.state.filter}
          selectedTab={this.getSelected()}
          changeSelected={this.changeSelected}
          activateSelected={this.activateSelected} />
        <StatusBar
          searchAllWindows={this.state.searchAllWindows}
          changeSearchAllWindows={this.changeSearchAllWindows} />
      </div>
    );
  },

  // ...
});

## tab_switcher_setstate.jsx
// TabSwitcher
module.exports = React.createClass({
  // ...

  refreshTabs: function() {
    tabBroker.query(this.state.searchAllWindows)
    .then(function(tabs) {
      this.setState({tabs: tabs, selected: null});
    }.bind(this));
  },

  // ..
});