Set up the Advantage page to mount a React app

build.js

@@ -20,6 +20,7 @@ let entries = {
   productSelector: "./static/js/src/advantage/subscribe/product-selector.js",
   openstackChart: "./static/js/src/openstack-chart.js",
   uaSubscribe: "./static/js/src/advantage/subscribe/react/app.jsx",
+  uaSubscriptions: "./static/js/src/advantage/react/app.tsx",
   "cloud-price-slider": "./static/js/src/cloud-price-slider.js",
 };
 

static/js/src/advantage/react/app.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactQueryDevtools } from "react-query/devtools";
+
+const oneHour = 1000 * 60 * 60;
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      staleTime: oneHour,
+      retryOnMount: false,
+    },
+  },
+});
+
+const App = () => (
+  <QueryClientProvider client={queryClient}>
+    <section className="p-strip is-shallow">
+      <div className="row">
+        <div className="col-12">Content</div>
+      </div>
+    </section>
+    <ReactQueryDevtools initialIsOpen={false} />
+  </QueryClientProvider>
+);
+
+ReactDOM.render(<App />, document.getElementById("react-root"));