yuumi3/react_book

hello_react/src/index.js 4:1 error ReactDOM.render is deprecated since React 18.0.0, use createRoot instead,

Opened this issue · 2 comments

kazurayam commented

インストール手順 Mac編をやりました。エラーが出ました。

スクリーンショット 2024-01-25 10 03 37

package.jsonの中を見ると

{
  "name": "hello_react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
...

たしかにreactのバージョンが18.2.0になっている。eslintのメッセージは ReactDOM.render( ではなくて ReactDOM.createRoot( を使えと言っている。そこで

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

を

ReactDOM.createRoot(document.getElementById('root'));

と書き換えた。ReactDOM.createRootのAPIドキュメントを参考にした。その結果、esLintのエラーは消えた。だが <h1>Hello, world!</h1> の居場所が無くなってしまった。それならばと public/index.htmlを書き換えた。

<!DOCTYPE html>
<html>
    <head>
        <meta charaset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
        <title>React App</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <div id="root"></div>
        <script type="text/javascript" src="js/app.js" charset="utf-8"></script>
    </body>
</html>

以上、React v18に対応するために必要だったことの報告です。

yuumi3 commented

@kazurayamさま

たいへん丁寧なエラー報告と対応方法のレポートありがとうございます。🙇‍♀️

対応ファイルを修正します

kazurayam commented

hello_react/src/index.jsを以下のように直してみました。これでも動きました。

import React from 'react'
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(
    document.getElementById('root')
);
root.render(
    <React.StrictMode>
        <h1>Hello, world!</h1>
        <root />
    </React.StrictMode>
);