Create a gist now

Instantly share code, notes, and snippets.

@BinaryMuse /client.jsx Secret
Last active Sep 6, 2016

What would you like to do?
DND: Blog post - Creating chrome extensions with React
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>
);
},
// ...
});
// 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>
);
},
// ...
});
// TabSwitcher
module.exports = React.createClass({
// ...
refreshTabs: function() {
tabBroker.query(this.state.searchAllWindows)
.then(function(tabs) {
this.setState({tabs: tabs, selected: null});
}.bind(this));
},
// ..
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment