Update ReactDOM render to use createRoot (#148)

react 18 new API

dev/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { serverFunctions } from '../src/client/utils/serverFunctions.ts';
 
 const { FILENAME, PORT } = process.env;
@@ -58,4 +58,6 @@ const DevServer = () => {
   );
 };
 
-ReactDOM.render(<DevServer />, document.getElementById('index'));
+const container = document.getElementById('index');
+const root = createRoot(container);
+root.render(<DevServer />);

src/client/dialog-demo-bootstrap/index.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import SheetEditor from './components/SheetEditor';
 
 import './styles.css';
 
-ReactDOM.render(<SheetEditor />, document.getElementById('index'));
+const container = document.getElementById('index');
+const root = createRoot(container);
+root.render(<SheetEditor />);

src/client/dialog-demo/index.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import SheetEditor from './components/SheetEditor';
 
 import './styles.css';
 
-ReactDOM.render(<SheetEditor />, document.getElementById('index'));
+const container = document.getElementById('index');
+const root = createRoot(container);
+root.render(<SheetEditor />);

src/client/sidebar-about-page/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import About from './components/About';
 
-ReactDOM.render(<About />, document.getElementById('index'));
+const container = document.getElementById('index');
+const root = createRoot(container);
+root.render(<About />);