create-react-appで、設定されるReactのバージョンを指定したい

Question

実現したいこと

Reactの環境構築を、create-react-appで実施する際に、インストールされるReactのバージョンを指定したい。

環境

• OS

macOS Monterey 12.12.1

• Node

v16.14.2

• npx create-react-app --version

v5.0.0

内容

Reactの環境構築をする際に特に意識せずにnpx create-react-app my-projectを実行すると
18.0.0のReactで環境が構築されます。

aki@MacBook-Air my-project % npm list --depth=0           
chatbot-@0.1.0 /Users/aki/myproject/chatbot-
├── @testing-library/jest-dom@5.16.3
├── @testing-library/react@12.1.4
├── @testing-library/user-event@13.5.0
├── react-dom@18.0.0
├── react-scripts@5.0.0
├── react@18.0.0
└── web-vitals@2.1.4

Reactのバージョンを指定(17.0.0)して環境構築を行いたいです。
ググってもcreate-react-appのバージョンを指定する方法ばかりでReactを指定する方法が私では見つけられませんでした。

お忙しいところ恐縮ですが、ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。

Comments

[hoshi-takanori]

package.json の react と react-dom を 17 に書き換えちゃうとか…。

[toyokiti]

御回答ありがとうございます。
create-react-appを実行したあとに、package.jsonが生成されると思います。
生成されたあとのpackage.jsonを書き換えるイメージでしょうか？
もしそれでしたら試してみましだが、Reactのバージョンは変わらないままでした。。。

[hoshi-takanori]

package.json を書き換えたら npm install しましよう。

Answer 1

下記のように編集してみたらどうでしょうか？

1. package.json の下記を18から17に修正

"react": "^17.0.0",
"react-dom": "^17.0.0",

2.下記を実行

npm install

3.index.js を下記ファイルに修正

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();