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

この記事は下記の記事のTypeScript版です。

前提

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

または

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

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

手順

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",
     "@types/jest": "^26.0.24",
     "@types/node": "^12.20.45",
     "@types/react": "^16.14.23",
     "@types/react-dom": "^16.9.14",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
     "typescript": "^4.5.5"
   },
   

2. package-lock.json及びnode_modulesを削除後、yarn installを実行する。
3. index.tsxを下記の通りに書き換える。(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として動くようになると思います。