モダンJSの基本から始めるReact実践の教科書:React v18でrenderを書き直してみた

www.sbcr.jp

でReactの学習をしてます。サンプルコードはReact v17で書かれているようで、renderでエラーが出るので、React v18でエラーが出ないように書き直してみました。

環境　React 18.2.0

サンプルコード

//src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

上記の通りに書くと、

react-dom.development.js:86 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 のアプリを出力する render の方法が React v18 から変更になっているからです。

React v18 からは createRoot を使ってオブジェクトを作成する必要があります。 import するのも react-dom から react-dom/client になっています。

//src/index.js
import React from "react";
import {createRoot} from 'react-dom/client';
import { App } from "./App";

const root = createRoot(document.getElementById('root'))
root.render(<App/>)

これでエラーが無くなりました🤗

参考：How to Upgrade to React 18