create the apps react 18 style

src/Gallery.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import { NoProps, NoState } from 'lang/react'
-import { BattleGoal, officialBattleGoals, satireGamingBattleGoals } from 'battlegoals/battleGoals'
 import BattleGoalCard from 'battlegoals/BattleGoalCard'
+import { BattleGoal, officialBattleGoals, satireGamingBattleGoals } from 'battlegoals/battleGoals'
+import { NoProps, NoState } from 'lang/react'
+import * as React from 'react'
 import { CSSProperties } from 'react'
+import { createRoot } from 'react-dom/client'
 import './style.css'
 
 interface ScanFilenameLookupTable {
@@ -75,4 +75,8 @@ class Gallery extends React.Component<NoProps, NoState> {
   }
 }
 
-ReactDOM.render(<Gallery />, document.getElementById('root'))
+const container = document.getElementById('root')
+if (container === null) {
+  throw new Error('root element not found')
+}
+createRoot(container).render(<Gallery />)

src/StagingRoom.tsx

@@ -1,7 +1,10 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
 import { PartyBattleGoals } from 'battlegoals/PartyBattleGoals'
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
 import './style.css'
 
-let app = <PartyBattleGoals />
-ReactDOM.render(app, document.getElementById('root'))
+const container = document.getElementById('root')
+if (container === null) {
+  throw new Error('root element not found')
+}
+createRoot(container).render(<PartyBattleGoals />)

src/index.tsx

@@ -4,10 +4,8 @@ import { createRoot } from 'react-dom/client'
 import './style.css'
 
 const initialCardStacks = App.initializeStacksFromLocalStorage()
-const app = <App initialCardStacks={initialCardStacks} />
-
 const container = document.getElementById('root')
 if (container === null) {
   throw new Error('root element not found')
 }
-createRoot(container).render(app)
+createRoot(container).render(<App initialCardStacks={initialCardStacks} />)