[WIP]: try adding react to hugo

assets/js/like.jsx

@@ -0,0 +1,27 @@
+// // Note: We're using the CDN in "production".
+// import * as React from 'react'
+// import * as ReactDOM from 'react-dom';
+
+// // A simple React JSX component.
+// class LikeButton extends React.Component {
+//     constructor(props) {
+//       super(props);
+//       this.state = { liked: false };
+//     }
+
+//     render() {
+//       if (this.state.liked) {
+//         return 'You liked this!';
+//       }
+
+//       return (
+//         <button onClick={() => this.setState({ liked: true }) }>
+//           Like
+//         </button>
+//       );
+//     }
+//   }
+
+
+// const domContainer = document.querySelector('#like_button_container');
+// ReactDOM.render(<LikeButton />, domContainer);

assets/js/main.js

@@ -0,0 +1,38 @@
+//// From mod1, but hello1 get its data from mod2.
+import { hello1, hello2 } from 'core/util';
+// From mod2
+import * as data from 'core/util/data.json';
+// hello3, hello6 lives in mod2 which also have a index.js in util.
+// But doing import from 'core/util' you will get the index.js file from mod1
+// (higher up in the import list), so we need to be explicit:
+import { hello3, hello6 } from 'core/util/hello3';
+
+// From main
+import { hello4 } from './lib';
+// From the Hugo template.
+import * as params from '@params';
+
+var worker = new Worker(params.myworker);
+
+worker.addEventListener(
+	'message',
+	function(e) {
+		console.log('Worker said: ', e.data);
+	},
+	false
+);
+
+worker.postMessage('Hello Worker');
+
+// https://github.com/gohugoio/hugo/issues/7948
+// TODO(bep) make this work in Hugo integration tests import { helloNodeModules } from 'mynodemod';
+
+window.hello1 = hello1;
+window.hello2 = hello2;
+window.hello3 = hello3;
+window.hello4 = hello4;
+window.hello6 = hello6;
+window.cwd = process.cwd; // Shim injected
+// TODO(bep) make this work in Hugo integration tests window.helloNodeModules = helloNodeModules;
+window.data = data;
+window.params = params;

assets/js/myworker.js

@@ -0,0 +1,7 @@
+self.addEventListener(
+	'message',
+	function(e) {
+		self.postMessage('Echo From Worker: ' + e.data);
+	},
+	false
+);

assets/js/scripts/app.jsx

@@ -0,0 +1,14 @@
+function Example() {
+    const [count, setCount] = React.useState(0);
+
+    return (
+      <div>
+        <p>You clicked {count} times</p>
+        <button onClick={() => setCount(count + 1)}>
+          Click me
+        </button>
+      </div>
+    );
+  }
+ReactDOM.render(React.createElement(Example),
+    document.getElementById("app"));

assets/js/shims/process.js

@@ -0,0 +1,3 @@
+export let process = {
+	cwd: () => 'shim cwd'
+};

assets/js/shims/react-dom.js

@@ -0,0 +1 @@
+module.exports = window.ReactDOM;

assets/js/shims/react.js

@@ -0,0 +1 @@
+module.exports = window.React;

assets/js/test.jsx

@@ -0,0 +1,3 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom';
+

assets/lib/index.js

@@ -0,0 +1,3 @@
+export function hello4() {
+	return 'Hello from lib in the main project!!';
+}