finally react-ing

app/app.html

@@ -40,6 +40,9 @@ <h3>User</h3>
                 <div class="table-header-items">Type</div>
                 <div class="table-header-items">Date modified</div>
             </div>
+            <div id="files-container">
+
+            </div>
         </div>
     </div>
 </body>

app/app.js

@@ -1,4 +1,22 @@
-var os = require('os');
+var fs = require('fs');
+var shell = require('shell');
+var React = require('react');
+
+import { FilesLayout } from './client/components';
+var isWindows = process.platform === 'win32'
 
 // window.env contains data from config/env_XXX.json file.
 var envName = window.env.name;
+
+var getHome = function() {
+  return ( isWindows ? process.env.USERPROFILE: process.env.HOME);
+}
+
+var files = fs.readdirSync(getHome());
+
+// files.map(function(file){
+// 	if(file.substring(0, 1) !== '.')
+// 		document.write(file + '<br>');
+// });
+
+React.render(<FilesLayout />, document.getElementById('files-container'));

app/client/components.js

@@ -0,0 +1,43 @@
+var React = require('react');
+
+var singleFile = {
+    fileName: "Example",
+    fileSize: "20kb",
+    fileType: "JPEG Image",
+    fileModified: "Today 11:21pm"
+};
+
+var filesList = [];
+var i = 0;
+while(i++ < 8) {
+	filesList.push(singleFile);
+}
+
+var File = React.createClass({
+	render: function(){
+		return (
+			<div className="files">
+	            <div className="filename">{this.props.fileName}</div>
+	            <div className="filesize">{this.props.fileSize}</div>
+	            <div className="filetype">{this.props.fileType}</div>
+	            <div className="filemodified">{this.props.fileModified}</div>
+	        </div>
+		)
+	}
+});
+
+export var FilesLayout = React.createClass({
+	getInitialState: function(){
+		return {files: filesList};
+	},
+	render: function() {
+		var files = this.state.files.map(function(fileInfo){
+			return <File {...fileInfo} />
+		});
+		return (
+			<div id="files-container">
+				{files}
+			</div>		
+		)
+	}
+});

app/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "fs-jetpack": "^0.6.4",
-    "normalize.css": "^3.0.3"
+    "normalize.css": "^3.0.3",
+    "react": "^0.13.3"
   }
 }

app/stylesheets/main.scss

@@ -88,5 +88,21 @@ a {
             flex: 4;
         }
     }
-
+    #files-container {
+        .files {
+            display: flex;
+            padding: 10px 0;
+            div {
+                flex: 1;
+                overflow: hidden;
+                padding-left: 10px;
+            }
+            div:nth-of-type(1) {
+                flex: 4;
+            }
+            &:hover {
+                background-color: $grey;
+            }
+        }
+    }
 }

package.json

@@ -4,6 +4,7 @@
     "esperanto": "^0.7.0",
     "fs-jetpack": "^0.6.4",
     "gulp": "^3.8.11",
+    "gulp-react": "^3.0.1",
     "gulp-sass": "^2.0.1",
     "gulp-util": "^3.0.4",
     "q": "^1.4.1",

tasks/build.js

@@ -5,6 +5,7 @@ var sass = require('gulp-sass');
 var esperanto = require('esperanto');
 var map = require('vinyl-map');
 var jetpack = require('fs-jetpack');
+var react= require('gulp-react');
 
 var utils = require('./utils');
 
@@ -55,6 +56,7 @@ gulp.task('copy-watch', copyTask);
 
 var transpileTask = function() {
     return gulp.src(paths.jsCodeToTranspile)
+        .pipe(react({harmony: true, es6module: true}))
         .pipe(map(function(code, filename) {
             var transpiled = esperanto.toAmd(code.toString(), {
                 strict: true