feat: wip add react

Author: Alan Shaw

package-lock.json

@@ -9,9 +9,12 @@
     "ipfs": "^0.35.0",
     "ipfs-css": "^0.12.0",
     "parcel": "^1.12.3",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "tachyons": "^4.11.1"
   },
   "devDependencies": {
+    "babel-eslint": "^10.0.1",
     "standard": "^12.0.1"
   },
   "scripts": {
@@ -33,5 +36,8 @@
   "license": "MIT",
   "browserslist": [
     "last 2 Chrome versions"
-  ]
+  ],
+  "standard": {
+    "parser": "babel-eslint"
+  }
 }

package.json

@@ -12,7 +12,8 @@
       </a>
       <h1 class="w-50 ma0 tr f3 fw2 montserrat aqua">DAG builder</h1>
     </header>
-    <section class="flex-none pa3 bg-white">
+    <main></main>
+    <!--section class="flex-none pa3 bg-white">
       <input type="file" id="file" style="visibility:hidden" class="input avenir" />
       <select id="chunker">
         <option value="size-32">32 byte chunks</option>
@@ -37,7 +38,7 @@ <h1 class="w-50 ma0 tr f3 fw2 montserrat aqua">DAG builder</h1>
         <option value="16">16 layer repeats</option>
       </select>
     </section>
-    <div class="flex-auto" id="root" style="background: pink;"></div>
+    <div class="flex-auto" id="root" style="background: pink;"></div-->
     <script src="./index.js" ></script>
   </body>
 </html>

src/index.html

@@ -4,6 +4,18 @@ import IPFS, { Buffer } from 'ipfs'
 import cytoscape from 'cytoscape'
 import dagre from 'cytoscape-dagre'
 import unixfs from 'ipfs-unixfs'
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+
+class HelloMessage extends Component {
+  render () {
+    return <div>Hello {this.props.name}</div>
+  }
+}
+
+ReactDOM.render(<HelloMessage name='Jane' />, document.querySelector('main'))
+
+/*
 
 cytoscape.use(dagre)
 
@@ -182,3 +194,4 @@ ipfs.on('ready', () => {
     fileReader.readAsArrayBuffer(file)
   })
 })
+*/