create-react-appでReact18がインストールされた後にReact17へ戻す方法(JavaScript編)

先日、React18がリリースされてCRAもReact18に対応しました。
しかし、react-beautiful-dndなどのライブラリがまだこのバージョンに対応してなくて動かないことがあるため、前バージョン(17.0.2)に戻す方法を紹介します。

前提

npx create-react-app <プロジェクト名>

または

yarn create react-app <プロジェクト名>

でReact18がインストール済みである。

手順

1. package.jsonの"dependencies"を下記の通りに書き換える。

   "dependencies": {
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
     "web-vitals": "^0.2.4"
   },
   

2. package-lock.json及びnode_modulesを削除後、yarn installを実行する。
3. index.jsを下記の通りに書き換える。(React18での記述が変わっているため。)

   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')
   );
   

これで、React17として動くようになると思います。

TypeScriptの場合について