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));
  },

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

	React.renderComponent(<TabSwitcher />, document.getElementById('switcher'));
	// 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(), ". "
	)
	);
	}
	<!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>
	// 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);
	},

	// ...
	});
	// TabSwitcher
	module.exports = React.createClass({
	// ...

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

	// ..
	});
	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>
	);
	},

	// ...
	});