Test React

js/app.jsx

@@ -0,0 +1,29 @@
+var React = require('react');
+var CategoryHeader = require('./components/category-header.jsx');
+var AppList = require('./components/app-list.jsx');
+
+var App = React.createClass({
+
+  getInitialState: function() {
+    return {
+      currentItem: null
+    };
+  },
+
+  componentDidMount: function() {
+
+  },
+
+  render: function() {
+    return (
+      <div className="launcher">
+        <CategoryHeader currentItem={this.state.currentItem} />
+        <AppList />
+      </div>
+    );
+  }
+
+});
+
+var rootEl = document.getElementById('pitaya');
+React.render(<App />, rootEl);

js/components/app-list.jsx

@@ -0,0 +1,12 @@
+var React = require('react');
+
+module.exports = React.createClass({
+
+  render: function() {
+    return (
+      <ul className="apps-list">
+      </ul>
+    );
+  }
+
+});

js/components/category-header.jsx

@@ -0,0 +1,19 @@
+var React = require('react');
+
+module.exports = React.createClass({
+
+  render: function() {
+
+    var classes = 'category-header' + (this.props.currentItem ? 'visible' : '');
+    var itemLabel = this.props.currentItem ? this.props.currentItem.label : '';
+
+    return (
+      <div className={classes}>
+        <a href="#" className="goback">&#9668;</a>
+        <span className="category-label">{itemLabel}</span>
+      </div>
+    );
+
+  }
+
+});