New top-level React root: <App />

ts/components/BackboneHost.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useRef } from 'react';
+import * as Backbone from 'backbone';
+
+type PropsType = {
+  View: typeof Backbone.View;
+  className?: string;
+};
+
+export const BackboneHost = ({ View, className }: PropsType): JSX.Element => {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const viewRef = useRef<Backbone.View | undefined>(undefined);
+
+  useEffect(() => {
+    const view = new View({
+      el: hostRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      if (!viewRef || !viewRef.current) {
+        return;
+      }
+
+      viewRef.current.remove();
+      viewRef.current = undefined;
+    };
+  }, [View]);
+
+  return (
+    <div>
+      <div className={className} ref={hostRef} />
+    </div>
+  );
+};