createRoot (React 18)

Reactのバージョンは18です.
(参照)非符号化デコーダのReact 18コアクリーンアップビデオ-https://youtu.be/7mkQi0TlJQo
現在、個人でTypescriptとReactを使ったToyプロジェクトを行っています.React 18バージョンがCRAにアップグレードされた後、Dev Toolコンソールウィンドウの警告メッセージの表示と解決方法を記録し、共有します.

1. So, What the warning is?

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
ReactDOM.renderはReact 18バージョンではサポートされていないため、createRootを使用する必要があります.最初にCRAに設定した後、package.jsonでREACT 18バージョンと確認されても、この警告を解決しなければREACT 17バージョンのように動作します.解決策は、今回の18バージョンで提供された新しいRoot APIを使用して作成することです.

2. Then, how to solve the problem!?

修正が必要なコードはindex.jsファイルに書かれています.正式な書類参照で修正しました.

// Before

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './Router';

ReactDOM.render(<Router />, document.getElementById('root'));

// After

import React from 'react';
import { createRoot } from 'react-dom/client';
import Router from './Router';

const container = document.getElementById('root');

// create a root
const root = createRoot(container!);
// createRoot(container!) if you use TypeScript

// render app to root
root.render(<Router />);

上記の公式ファイルの例を参照して作成しますが、Vscode端末で警告が見つかりました.react-dom/clientモジュールの宣言が見つからず、Typescriptを使用しているため、Typescript関連ライブラリをインストールする必要があります.
幸いなことに、警告行にカーソルを置き、必要なライブラリのインストールをダニー・ブリヴィーで支援するリンクが作成されました.

インストールが完了すると、package.jsonとpackage-lock.jsonはライブラリが正常にインストールされていることを確認し、ブラウザDev Toolのコンソールでもアラームが消えていることを確認します.