💭

Reactのプロジェクト名を変更したい！

2024/11/01に公開

はじめに

Reactを勉強している時に途中で「プロジェクト名を変更したいなー」と思うことがありました。
ざっと調べた限り日本語のブログでReactのプロジェクト名変更方法を記載しているものが少なかったので本記事を執筆しました。

以下のようなコマンドを実行し、Reactプロジェクトを作成したのですが、
プロジェクト内のコードの内容とプロジェクト名が合っていなかったため変更したいと思いました。

npx create-react-app xxx
補足：上記のコマンド実行でxxxプロジェクト（ディレクトリ）が作成される想定

※Reactバージョン18で実行

npx create-react-app xxxでReactプロジェクトを作成した場合、
上記のコマンドを実行したディレクトリ直下にxxxという親ディレクトリが作成されているはずです。
まずその親ディレクトリをリネームします。

mv xxx yyy
補足：xxxからyyyにリネーム

リネーム後のyyyディレクトリ配下にpackage.jsonとpackage-lock.jsonという2つのフォイルが存在するはずです。2つのファイルに以下のように"name"属性にリネーム前のプロジェクト名がセットされていると思います。

//修正前
{
"name":"xxx"
//省略
}

上記を以下のように、リネーム前のプロジェクト名をリネーム後のプロジェクト名に修正します。

//修正後
{
"name":"yyy"
//省略
}

Step1とStep2でコードの変更は完了です。
プロジェクト名をリネームしても正常に動いているかを確認するためにnpm startをターミナルで実行し画面が正常に動いているかを確認してください。