Added good readme for boilerplate

README.md

@@ -1,7 +1,28 @@
-# React Desktop Starter
+# react-desktop-starter
 
-To run:
+**Clone and run for a quick way to see NodeGUI React Desktop in action.**
 
-`npm install`
+## To Use
 
-`npm start`
+To clone and run this repository you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:
+
+```bash
+# Clone this repository
+git clone https://github.com/nodegui/react-desktop-starter
+# Go into the repository
+cd react-desktop-starter
+# Install dependencies
+npm install
+# Run the app
+npm start
+```
+
+Note: If you're using Linux Bash for Windows, [see this guide](https://www.howtogeek.com/261575/how-to-run-graphical-linux-desktop-applications-from-windows-10s-bash-shell/) or use `node` from the command prompt.
+
+## Resources for Learning NodeGUI/React Desktop
+
+- [nodegui.github.io/nodegui](https://nodegui.github.io/nodegui) - all of NodeGui and React Desktop's documentation
+
+## License
+
+MIT

package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@nodegui/nodegui": {
-      "version": "0.0.12",
+      "version": "0.0.13",
-      "resolved": "https://registry.npmjs.org/@nodegui/nodegui/-/nodegui-0.0.12.tgz",
+      "resolved": "https://registry.npmjs.org/@nodegui/nodegui/-/nodegui-0.0.13.tgz",
-      "integrity": "sha512-tfms3FzX8jDY3jxwCNuxFGkYkjonn3menLaS9bxYa3i0ye+XEyc3OyJdDS00UqcT2yLfDFTuq9A90JG09Y6o3A==",
+      "integrity": "sha512-gXk1TM76fAKHfEp1nfg0kQoxEdAx1R65jKr+b577ln8Z4/Pnj8MpjKU09sG/n/XQ+T33Hn5GRmMK1ELEqJ1KnA==",
       "requires": {
         "@nodegui/test": "^0.0.10",
         "bindings": "^1.5.0",
@@ -18,9 +18,9 @@
       }
     },
     "@nodegui/react-desktop": {
-      "version": "0.0.6",
+      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/@nodegui/react-desktop/-/react-desktop-0.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/@nodegui/react-desktop/-/react-desktop-0.0.7.tgz",
-      "integrity": "sha512-WNcYh0T7OpmanbvwWppPNpe7XCE0ZyNy+cxMfZMpKB3MY60gNL1V6slHpVJO1/PHRmgQlBsl8dYjQsh0t6hePA==",
+      "integrity": "sha512-GqF2r+WV1oMNZWSdntglo8WUgyh8cdy6t+5x5asUv5pOuZXxOuwK/cfNWG2r/F3xInYfaddCds0dxOy72SRkcA==",
       "requires": {
         "react-reconciler": "^0.20.4"
       }

package.json

@@ -9,9 +9,9 @@
     "start": "tsc && qode ./dist/index.js"
   },
   "dependencies": {
-    "@nodegui/nodegui": "^0.0.12",
+    "@nodegui/nodegui": "0.0.13",
-    "@nodegui/react-desktop": "0.0.6",
+    "@nodegui/react-desktop": "0.0.7",
-    "react": "^16.8.6"
+    "react": "^16.9.0"
   },
   "devDependencies": {
     "@types/node": "^12.6.8",

src/index.tsx

@@ -1,24 +1,44 @@
-import { Renderer, View, Text, Button, Window } from "@nodegui/react-desktop";
+import {
+  Renderer,
+  View,
+  Text,
+  Button,
+  Window,
+  Image,
+  useEventHandler
+} from "@nodegui/react-desktop";
 import React, { useState } from "react";
+import path from "path";
+import { AspectRatioMode } from "@nodegui/nodegui";
 
+const imageUrl = path.resolve(__dirname, "../assets/sample.jpg");
+const fixedSize = { width: 500, height: 500 };
 const App = () => {
   const [time, setTime] = useState(new Date());
+  const btnHandler = useEventHandler(
+    { clicked: () => setTime(new Date()) },
+    []
+  );
   return (
-    <Window minSize={{ width: 500, height: 200 }} styleSheet={styleSheet}>
+    <Window minSize={fixedSize} maxSize={fixedSize} styleSheet={styleSheet}>
       <View id="container">
-        <Button
+        <Button text="Update Time" on={btnHandler} />
-          text="Update Time"
-          on={{
-            clicked: () => setTime(new Date())
-          }}
-        />
         <Text id="result">{`${time}`}</Text>
         <Text id="result">{`Time in epoc: ${time.getTime()}`}</Text>
+        <Image
+          style={imageStyle}
+          src={imageUrl}
+          aspectRatioMode={AspectRatioMode.KeepAspectRatio}
+        />
       </View>
     </Window>
   );
 };
 
+const imageStyle = `
+  height: "70%";
+`;
+
 const styleSheet = `
   #container {
     flex: 1;