[React 18] ReactDOM.render


通常のように、CRAを使用して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)部が置換されている.