Add sandbox with included React component

app/components/sandbox.hbs

@@ -0,0 +1 @@
+<div {{react this.theReactComponent message=this.message onClick=this.toggle}} />

app/components/sandbox.js

@@ -0,0 +1,18 @@
+import { HelloWorld } from 'react-frontend/hello-world.jsx';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class SandboxComponent extends Component {
+  theReactComponent = HelloWorld;
+
+  @tracked message = 'hello';
+
+  @action toggle() {
+    if (this.message === 'hello') {
+      this.message = 'goodbye';
+    } else {
+      this.message = 'hello';
+    }
+  }
+}

app/modifiers/react.js

@@ -0,0 +1,14 @@
+import Modifier from 'ember-modifier';
+import { createRoot } from 'react-dom/client';
+import { createElement } from 'react';
+import { registerDestructor } from '@ember/destroyable';
+
+export default class ReactModifier extends Modifier {
+  modify(element, [reactComponent], props) {
+    if (!this.root) {
+      this.root = createRoot(element);
+      registerDestructor(this, () => this.root.unmount());
+    }
+    this.root.render(createElement(reactComponent, { ...props }));
+  }
+}

app/router.js

@@ -36,4 +36,5 @@ Router.map(function () {
   });
   this.route('settings');
   this.route('airshow');
+  this.route('sandbox');
 });

app/routes/sandbox.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class SandboxRoute extends Route {}

app/templates/sandbox.hbs

@@ -0,0 +1,4 @@
+{{page-title "Sandbox"}}
+<div class="container">
+    <Sandbox />
+</div>

ember-cli-build.js

@@ -6,6 +6,24 @@ const Funnel = require('broccoli-funnel');
 
 module.exports = function (defaults) {
   const app = new EmberApp(defaults, {
+    autoImport: {
+      webpack: {
+        module: {
+          rules: [
+            {
+              test: /react-frontend\/.*\.jsx/,
+              use: {
+                loader: 'babel-loader',
+                options: {
+                  presets: [['@babel/preset-react', { runtime: 'automatic' }]],
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+
     babel: {
       plugins: [
         // ... any other plugins