[React 18] ReactDOM.render
通常のように、CRAを使用してReactプロジェクトを作成し、
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
読んでみましたが、新しいreact 18ではreactDOMです.renderではなくcreateRootを使用する必要があります.
React公式文書を参照して、より前に作成された 変更後
npm run start
を行います.コンソールウィンドウにこれらのエラーメッセージが表示されます.🤔Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
読んでみましたが、新しいreact 18ではreactDOMです.renderではなくcreateRootを使用する必要があります.
React公式文書を参照して、
index.js
を次のように変更します.import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const rootNode = document.getElementById("root");
ReactDOM.createRoot(rootNode).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
import ReactDOM
部、createRoot(rootNode)
部が置換されている.Reference
この問題について([React 18] ReactDOM.render), 我々は、より多くの情報をここで見つけました https://velog.io/@sana0803/React-18-ReactDOM.renderテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol