first react view up

src/js/app/index.js

@@ -1,10 +1,12 @@
 var _ = require('underscore');
 var Backbone = require('backbone');
+var React = require('react');
 
 var util = require('../util');
 var intl = require('../intl');
 var LocaleStore = require('../stores/LocaleStore');
 var LocaleActions = require('../actions/LocaleActions');
+var Dialog = require('../react_views/TestView.jsx').Dialog;
 
 /**
  * Globals
@@ -214,6 +216,12 @@ var initDemo = function(sandbox) {
       "levels"
     ];
   }
+  if (params.hasOwnProperty('STARTREACT')) {
+    React.render(
+      React.createElement(Dialog, {}),
+      document.getElementById(params['STARTREACT'])
+    );
+  }
   if (commands) {
     sandbox.mainVis.customEvents.on('gitEngineReady', function() {
       eventBaton.trigger('commandSubmitted', commands.join(''));

src/js/react_views/TestView.jsx

@@ -1,11 +1,71 @@
 var React = require('react');
 
-var MyComponent = React.createClass({
+var reactUtil = require('../util/reactUtil');
+var keyMirror = require('react/lib/keyMirror');
+
+var STATUSES = keyMirror({
+  IN_QUEUE: null,
+  PROCESSING: null,
+  FINISHED: null
+});
+
+var STATUS_TO_CLASS = {};
+STATUS_TO_CLASS[STATUSES.IN_QUEUE] = 'inqueue';
+STATUS_TO_CLASS[STATUSES.PROCESSING] = 'processing';
+STATUS_TO_CLASS[STATUSES.FINISHED] = 'finished';
+
+var CommandView = React.createClass({
+
+  getInitialState: function() {
+    return {
+      status: STATUSES.IN_QUEUE,
+      rawStr: 'git commit',
+      resultType: '',
+      result: '',
+      formattedWarnings: ''
+    };
+  },
+
   render: function() {
+    var commandClass = reactUtil.joinClasses([
+      STATUS_TO_CLASS[this.state.status],
+      'commandLine',
+      'transitionBackground'
+    ]);
+
+    // TODO add 0px 5px margin to icons
+
     return (
-      <p>Howdy</p>
+      <div className="reactCommandView">
+        <p className={commandClass}>
+          <span className="prompt">{'$'}</span>
+          {' ' + this.state.rawStr}
+          <span className="icons transitionAllSlow">
+            <i className="icon-exclamation-sign"></i>
+            <i className="icon-check-empty"></i>
+            <i className="icon-retweet"></i>
+            <i className="icon-check"></i>
+          </span>
+        </p>
+
+        <div className={'commandLineResult ' + this.state.resultType}>
+          {this.state.result}
+        </div>
+
+        <div className="commandLineWarnings">
+          {this.state.formattedWarnings}
+        </div>
+      </div>
     );
   }
 });
 
-module.exports = MyComponent;
+var Dialog = React.createClass({
+  render: function() {
+    return (
+      <CommandView />
+    );
+  }
+});
+
+exports.Dialog = Dialog;

src/js/util/reactUtil.js

@@ -0,0 +1,5 @@
+var joinClasses = function(classes) {
+  return classes.join(' ');
+};
+
+exports.joinClasses = joinClasses;

src/style/main.css

@@ -443,6 +443,10 @@ div.controls div.box.flex1 div.plus {
 
 /* Command Line */
 
+div.reactCommandView p.commandLine i {
+  margin: 0 5px;
+}
+
 p.commandLine,
 div.commandLineResult {
   opacity: 1;
@@ -482,6 +486,12 @@ p.commandLine span.icons i:first-child {
   margin-left: 5px;
 }
 
+div.reactCommandView p.commandLine span.icons i:first-child {
+  margin-left: 4px;
+  position: relative;
+  left: 1px;
+}
+
 p.commandLine span.icons i {
   opacity: 0;
 }

src/template.index.html

@@ -473,6 +473,8 @@
     </li>
   </script>
 
+  <div id="reactMount" />
+
   <!-- The compiled and minified build file (that actually does everything) is below.
        For a much easier time perusing the source, see the individual files at:
           https://github.com/pcottle/learnGitBranching