Use hydrate instead of render.

plentico · Oct 6, 2019 · 22db5dc · 22db5dc
1 parent 1524507
commit 22db5dc
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/defaults/templates.go b/defaults/templates.go
@@ -4,10 +4,24 @@ var Templates = map[string][]byte{
 	"/templates/layouts/html.js": []byte(`import React from 'react';
 import ReactDOM from 'react-dom';
 
-const title = "You've enabled React with Webpack and Babel!";
-ReactDOM.render(
-  <div>{title}</div>,
-  document.getElementById('app')
+const title = "Home | Plenti";
+const heading = "Welcome to plenti!";
+const desc = "Your HTML page has been hydrated and you've enabled React with Webpack and Babel!";
+
+ReactDOM.hydrate(
+  <html>
+    <head>
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width" />
+      <title>{title}</title>
+    </head>
+    <body>
+      <h1>{heading}</h1>
+      <p>{desc}</p>
+      <p><a href="/about">About us</a>.</p>
+    </body>
+  </html>,
+	document.getElementsByName('html')[0].value
 );`),
 	"/templates/layouts/head.js": []byte(`<Thing>
 	Placeholder..