updated React templates to use react 18 new root api

templates/react-with-storybook/example/index.tsx

@@ -1,6 +1,6 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Thing } from '../.';
 
 const App = () => {
@@ -11,4 +11,6 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(<App />);

templates/react-with-storybook/test/index.test.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot, unmountComponentAtNode } from 'react-dom/client';
 import { Default as Thing } from '../stories/Thing.stories';
 
 describe('Thing', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<Thing />, div);
-    ReactDOM.unmountComponentAtNode(div);
+    const root = createRoot(div!);
+    root.render(<Thing />);
+    root.unmount(div);
   });
 });

templates/react/example/index.tsx

@@ -1,6 +1,6 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Thing } from '../.';
 
 const App = () => {
@@ -11,4 +11,6 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(<App />);

templates/react/test/index.test.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Thing } from '../src';
 
 describe('Thing', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<Thing />, div);
-    ReactDOM.unmountComponentAtNode(div);
+    const root = createRoot(div!);
+    root.render(<Thing />);
+    root.unmount(div);
   });
 });