React環境構築メモ

基本環境構築方法

最初の行の npx は打ち間違いではなく、npm 5.2 から利用できるパッケージランナーツール

npx create-react-app <作成アプリ名>

TypeScripの場合

npx create-react-app <作成アプリ名> --template typescript

create-react-appなどを使用してアプリを

作成後にReactなどのバージョンを変更する方法 （例：React v18.0.0→v17.0.2）

1. /package.jsonの内容を修正

これを

"react": "^18.0.0"
"react-dom": "^18.0.0"

こう変える

"react": "^17.0.2"
"react-dom": "^17.0.2"

2. index.jsの内容を修正

これを

import ReactDOM from 'react-dom/client'

こう変える

import ReactDOM from 'react-dom';

これを

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

こう変える

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

3. node_modules フォルダを削除

4. コマンドで以下の内容を実行

npm/npxの場合

npm install

yarnの場合

yarn install

5. 以下のコマンドを実行し、エラーなくページが開けば完了

npm/npxの場合

npm start

yarnの場合

yarn start

参考

How to use create-react-app with an older React version?

create-react-appで簡単にReactアプリの環境構築してみる – システムエンジニアのITブログ – 株式会社スミリオン

新しい React アプリを作る – React

インストールするライブラリのバージョンを指定する方法

npm install <インストールするライブラリ名>@<バージョン>

参考

react-router-domでSwitchが使えずエラーが起きた話