app,create-app: update to use app.createRoot()

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/shy-birds-hammer.md

@@ -2,7 +2,7 @@
 '@backstage/create-app': patch
 ---
 
-Updated the app template to use the new `AppRouter` component instead of `app.getRouter()`.
+Updated the app template to use the new `AppRouter` component instead of `app.getRouter()`, as well as `app.createRoot()` instead of `app.getProvider()`.
 
 To apply this change to an existing app, make the following change to `packages/app/src/App.tsx`:
 
@@ -12,6 +12,37 @@ To apply this change to an existing app, make the following change to `packages/
 
  ...
 
- const AppProvider = app.getProvider();
+-const AppProvider = app.getProvider();
 -const AppRouter = app.getRouter();
+
+ ...
+
+-const App = () => (
++export default app.createRoot(
+-  <AppProvider>
++  <>
+     <AlertDisplay />
+     <OAuthRequestDialog />
+     <AppRouter>
+       <Root>{routes}</Root>
+     </AppRouter>
+-  </AppProvider>
++  </>,
+ );
 ```
+
+The final export step should end up looking something like this:
+
+```tsx
+export default app.createRoot(
+  <>
+    <AlertDisplay />
+    <OAuthRequestDialog />
+    <AppRouter>
+      <Root>{routes}</Root>
+    </AppRouter>
+  </>,
+);
+```
+
+Note that `app.createRoot()` accepts a React element, rather than a component.