'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 |
