Build template for react layout

The individual components are defined in this commit. The Canvas and ShapeBar
components are positioned for the sake of getting the hang of CSS in JSX.

app/components/Canvas.js

@@ -0,0 +1,15 @@
+// @flow
+import React, { Component } from 'react';
+var ReactDOM = require('react-dom');
+var electron = require('electron');
+
+// const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
+
+export default class Canvas extends Component {
+  render() {
+    return (
+      <div style={{position: 'absolute', backgroundColor: 'blue', width: '100%', height: '90%', margin: 0, padding: 0, top: '10%'}}>
+        <div></div>
+      </div>);
+  }
+}

app/components/Diagram.js

@@ -0,0 +1,24 @@
+// @flow
+import React, { Component } from 'react';
+var ReactDOM = require('react-dom');
+var electron = require('electron');
+
+// const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
+
+export default class App extends Component {
+  props: {
+    children: HTMLElement;
+  };
+
+  constructor(props) {
+    super(props);
+  };
+
+
+  render() {
+    return (
+      <div style={{position: 'absolute', backgroundColor: 'green', width: '100%', height: '100%', margin: 0, padding: 0}}>
+        <div></div>
+      </div>);
+  }
+}

app/components/DotGrid.js

@@ -0,0 +1,24 @@
+// @flow
+import React, { Component } from 'react';
+var ReactDOM = require('react-dom');
+var electron = require('electron');
+
+// const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
+
+export default class App extends Component {
+  props: {
+    children: HTMLElement;
+  };
+
+  constructor(props) {
+    super(props);
+  };
+
+
+  render() {
+    return (
+      <div style={{position: 'absolute', backgroundColor: 'green', width: '100%', height: '100%', margin: 0, padding: 0}}>
+        <div></div>
+      </div>);
+  }
+}

app/components/ShapeBar.js

@@ -0,0 +1,15 @@
+// @flow
+import React, { Component } from 'react';
+var ReactDOM = require('react-dom');
+var electron = require('electron');
+
+// const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
+
+export default class Canvas extends Component {
+  render() {
+    return (
+      <div style={{position: 'absolute', backgroundColor: 'red', width: '100%', height: '10%', margin: 0, padding: 0}}>
+        <div></div>
+      </div>);
+  }
+}

app/containers/App.js

@@ -3,6 +3,8 @@ import React, { Component } from 'react';
 var ReactDOM = require('react-dom');
 var electron = require('electron');
 
+import Canvas from '../components/Canvas'; 
+import ShapeBar from '../components/ShapeBar';
 
 // const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
 
@@ -19,7 +21,8 @@ export default class App extends Component {
   render() {
     return (
       <div style={{position: 'absolute', backgroundColor: 'green', width: '100%', height: '100%', margin: 0, padding: 0}}>
-        <div></div>
+        <ShapeBar />
+        <Canvas />
       </div>);
   }
 }