get react working inside of hugo

babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+  api.cache(true);
+  const presets = [['@babel/preset-react']];
+  const plugins = [];
+  return {
+    presets,
+    plugins,
+  };
+};

package.json

@@ -32,6 +32,8 @@
     "@babel/preset-react": "^7.12.13",
     "axios": "^0.21.1",
     "babel-loader": "^8.2.2",
-    "lunr": "^2.3.9"
+    "lunr": "^2.3.9",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }

themes/arlmediaTheme/assets/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

themes/arlmediaTheme/assets/js/app.js.LICENSE.txt

@@ -1,3 +1,9 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
 /*!
  * lunr.Builder
  * Copyright (C) 2020 Oliver Nightingale
@@ -59,3 +65,30 @@
  * Copyright (C) 2020 Oliver Nightingale
  * @license MIT
  */
+
+/** @license React v0.20.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.1
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.1
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

themes/arlmediaTheme/assets/js/index.js

@@ -1,6 +1,7 @@
-import axios from 'axios';
-import lunr from 'lunr';
+import axios from "axios";
+import lunr from "lunr";
+import React, { useEffect } from "react";
+import ReactDOM from "react-dom";
+import Main from "./main";
 
-axios.get('https://api.kanye.rest').then((res) => {
-  console.log(res.data);
-});
+ReactDOM.render(<Main />, document.getElementById("app"));

themes/arlmediaTheme/assets/js/main.js

@@ -0,0 +1,19 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
+export default function main() {
+  const [quote, setQuote] = useState("");
+
+  useEffect(() => {
+    axios.get("https://api.kanye.rest").then((res) => {
+      setQuote(res.data.quote);
+    });
+  }, []);
+
+  return (
+    <div>
+      <h1>Hello</h1>
+      <p>{quote}</p>
+    </div>
+  );
+}

themes/arlmediaTheme/layouts/index.html

@@ -8,5 +8,6 @@ <h2>Full Stack Developer & Videographer</h2>
   {{ $js := resources.Get "js/app.js" | minify | fingerprint }}
   <div id="app"></div>
   <script src="{{ $js.RelPermalink }}"></script>
+  <div id="app"></div>
 </div>
 {{ end }}

webpack.config.js

@@ -6,4 +6,35 @@ module.exports = {
     filename: 'app.js',
     path: path.resolve(__dirname, 'themes', 'arlmediaTheme', 'assets', 'js'),
   },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        test: /\.html$/,
+        use: [
+          {
+            loader: 'html-loader',
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+        include: /flexboxgrid/,
+      },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        use: ['file-loader'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
 };