fix: resolve react-dom import warning

Author: KManolov3

packages/scratch-gui/src/playground/blocks-only.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDomClient from 'react-dom/client';
 import {connect} from 'react-redux';
 
 import Controls from '../containers/controls.jsx';
@@ -32,5 +32,5 @@ const App = AppStateHOC(HashParserHOC(BlocksOnly));
 const appTarget = document.createElement('div');
 document.body.appendChild(appTarget);
 
-const root = ReactDOM.createRoot(appTarget);
+const root = ReactDomClient.createRoot(appTarget);
 root.render(<App />);

packages/scratch-gui/src/playground/compatibility-testing.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDomClient from 'react-dom/client';
 
 import GUI from '../containers/gui.jsx';
 import HashParserHOC from '../lib/hash-parser-hoc.jsx';
@@ -53,5 +53,5 @@ class Player extends React.Component {
 const appTarget = document.createElement('div');
 document.body.appendChild(appTarget);
 
-const root = ReactDOM.createRoot(appTarget);
+const root = ReactDomClient.createRoot(appTarget);
 root.render(<Player />);

packages/scratch-gui/src/playground/index.jsx

@@ -5,7 +5,7 @@ import 'core-js/fn/promise/finally';
 import 'intl'; // For Safari 9
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDomClient from 'react-dom/client';
 
 import AppStateHOC from '../lib/app-state-hoc.jsx';
 import BrowserModalComponent from '../components/browser-modal/browser-modal.jsx';
@@ -26,7 +26,7 @@ if (supportedBrowser()) {
     BrowserModalComponent.setAppElement(appTarget);
     const WrappedBrowserModalComponent = AppStateHOC(BrowserModalComponent, true /* localesOnly */);
     const handleBack = () => {};
-    const root = ReactDOM.createRoot(appTarget);
+    const root = ReactDomClient.createRoot(appTarget);
     // eslint-disable-next-line react/jsx-no-bind
     root.render(<WrappedBrowserModalComponent onBack={handleBack} />);
 }

packages/scratch-gui/src/playground/player.jsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDomClient from 'react-dom/client';
 import {connect} from 'react-redux';
 import {compose} from 'redux';
 
@@ -61,5 +61,5 @@ const WrappedPlayer = compose(
 const appTarget = document.createElement('div');
 document.body.appendChild(appTarget);
 
-const root = ReactDOM.createRoot(appTarget);
+const root = ReactDomClient.createRoot(appTarget);
 root.render(<WrappedPlayer isPlayerOnly />);

packages/scratch-gui/src/playground/render-gui.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDomClient from 'react-dom/client';
 import {compose} from 'redux';
 
 import AppStateHOC from '../lib/app-state-hoc.jsx';
@@ -62,7 +62,7 @@ export default appTarget => {
         window.onbeforeunload = () => true;
     }
 
-    const root = ReactDOM.createRoot(appTarget);
+    const root = ReactDomClient.createRoot(appTarget);
 
     root.render(
         // important: this is checking whether `simulateScratchDesktop` is truthy, not just defined!