React 18 - ReactDOM.render & createRoot


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
  • 応答バージョン18使用時npm起動時コンソールエラー
  • 公式文書を反映:
    https://ko.reactjs.org/docs/concurrent-mode-reference.html#createroot
    以下に示すように、応答式ドキュメント、変更コード
  • を参照してください.
    /*  React17  */
    
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    
    ReactDOM.render(
      <React.StrictMode>
          <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
    
    /* React18 */
    import React from "react";
    import ReactDOM from "react-dom/client";
    import "./index.css";
    import App from "./App";
    
    const rootNode = document.getElementById("root");
    
    ReactDOM.createRoot(rootNode).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
    
  • ReactDOMのインポートは変更され、CreateRoot(RootNode)はReactDOMとRenderの間の