#5 - The App component is now the main entry point and renders to the…

… page
murt · Apr 26, 2017 · 7841027 · 7841027
1 parent 763d7dd
commit 7841027
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/src/main/pug/index.pug b/src/main/pug/index.pug
@@ -4,13 +4,10 @@ html(lang="en")
         title mop
         link(rel="stylesheet", type="text/css", href="style.css")
     body
-        nav.nav.has-shadow
-            div.nav-left
-                a#mop-logo.nav-item MOP
-
-        div.container.is-fluid
-            div.notification
-                | This is the main mop container
+        div#content
 
         script(type="text/javascript").
-            require('./app.js');
+            const React = require('react');
+            const reactDOM = require('react-dom');
+            const { App } = require('./app.js');
+            reactDOM.render(React.createElement(App), document.getElementById('content'));
diff --git a/src/main/ts/app.tsx b/src/main/ts/app.tsx
@@ -2,11 +2,22 @@ import * as React from 'react';
 
 interface AppProps {}
 
-export default class App extends React.Component<AppProps, {}> {
+export class App extends React.Component<AppProps, {}> {
 
   render () {
     return (
-      <span>Application Code</span>
+      <div>
+        <nav className="nav has-shadow">
+          <div className="nav-left">
+            <a id="mop-logo" className="nav-item">MOP</a>
+          </div>
+        </nav>
+        <div className="container is-fluid">
+          <div className="notification">
+            This is the main mop container created by react
+          </div>
+        </div>
+      </div>
     );
   }
 

diff --git a/src/main/ts/main.ts b/src/main/ts/main.ts
@@ -18,10 +18,8 @@ function createWindow ({width=800, height=600}:{width?:number, height?:number}={
   }));
 
   if (true) {
-    //require('devtron').install();
-    // TODO: Get details of windows in the specs and check if ANY of them have coverage
-    // otherwise the dev tools window will be counted
-    //win.webContents.openDevTools();
+    require('devtron').install();
+    win.webContents.openDevTools();
   }
 
   win.on('closed', () => {