Test React

css/style.css

@@ -28,6 +28,11 @@ html, body {
 .launcher .category-header {
   padding: 40px 50px 0;
   font-size: 50px;
+  display: none;
+}
+
+.launcher .category-header.visible {
+  display: block;
 }
 
 .launcher .category-header a.goback {

index.html

@@ -39,20 +39,17 @@
     </script>
 
     <!-- Scripts -->
-    <script type="text/javascript" src="js/dom.js"></script>
-    <script type="text/javascript" src="js/anim.js"></script>
-    <script type="text/javascript" src="js/app.js"></script>
-
-    <!-- Application bootstrapping -->
     <script type="text/javascript">
-      Pitaya.start('#pitaya')
-        .then(function() {
-          console.info('Application started.');
-        })
-        .catch(function(err) {
-          console.error(err.stack ? err.stack : err);
-        })
-      ;
+      // React context detection workaround
+      global.document = global.window.document;
+      global.navigator = global.window.navigator;
+
+      // Auto transform JSX
+      require('node-jsx').install();
+
+      // Launch application
+      require('./js/app.jsx');
+
     </script>
 
   </body>

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

package.json

@@ -21,7 +21,12 @@
     "kiosk": false
   },
   "dependencies": {
+    "glob": "^5.0.14",
     "handlebars": "^3.0.3",
-    "minimist": "^1.1.3"
+    "ini": "^1.3.4",
+    "minimist": "^1.1.3",
+    "node-jsx": "^0.13.3",
+    "r-dom": "^1.3.0",
+    "react": "^0.13.3"
   }
 }