'Using ReachDOMClient from a simple CDN static page

On a simple static web page (no server-side rendering, no bundler), I access react and react-dom using

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

I can access parts of the API like this:

const {
  useMemo
} = React;

const {
  createRoot
} = ReactDOM;

This works great, but with the latest version of React@18, you need to import "react-dom/client"

How do you do this in a simple single-page static app?

There doesn't appear to be a way to get "ReactDOMClient" or just "Client" out of the ReactDOM API object.



Solution 1:[1]

CDN's ReactDOM has createRoot function.

const html_root = document.getElementById('root');
ReactDOM.createRoot(html_root).render(<App/>);

But this way happens warning message.
Because this way isn't fully completed the migration. Best way is import ReactDOM from "react-dom/client";
https://github.com/reactwg/react-18/discussions/5#discussioncomment-798304

Solution 2:[2]

The warning will be fixed in the next 18.1. See https://github.com/facebook/react/issues/24292

Solution 3:[3]

We can continue coding with these CDN https://unpkg.com/react@18/umd/react.development.js, https://unpkg.com/react-dom@18/umd/react-dom.development.js without breaking errors by ignoring the warning until this warning is fixed by react org

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ryo
Solution 2 uniho
Solution 3 Hashani