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