⭐️

reactのインストールの備忘録（vite）

2025/07/16に公開

はじめに

Reactのインストール方法について残しておきたかったので、ここで記述してきます。

まずは、インストール方法をドキュメントから確認します。
https://ja.react.dev/learn/installation

こちらの公式ドキュメントから方法を拝借。
とりあえず今回は、Viteでインストールして進めていきます。

bun create vite my-app -- --template react

npm create vite@latest my-app -- --template react

yarn create vite my-app --template react

bunでインストールを進めていきます。

せっかくなのでインストールコマンドをちょっと噛み砕いて残しておきます。

cmd	説明	追加情報
bun create	新しいプロジェクトを作成
vite	Viteを使用する（Viteでは最新になる）
my-app	プロジェクト名（ディレクトリ名）
--template react	Reactのテンプレートを使用する typescriptを合わせてインストールする方法	react-tsにする
その他	"--"	これはnpmでviteとオプションを区切るため

インストールが完了しました。
インストールが完了すると下記の指示がでます。

cd my-app
bun install
bun run dev

下記のエラーが出たら、nodeのバージョンが古い可能性があります。
このエラーが出てしまったので、最新のバージョンをインストールしました。

ついでにコマンドでbunでインストールした関連ファイルを削除する方法

rm -rf node_modules bun.lock # bunの場合
rm -rf node_modules package-lock.json #npmの場合

上記のコマンドの意味

cmd	説明	追加情報
rm	ファイルや、ディレクトリを削除するコマンド
-r	再帰的削除（ディレクトリとその中身を削除）	再帰的とは中のディレクトリなども削除しないといけないので、ディレクトリの中にディレクトリがあったりした場合は、それも削除できるように繰り返し行うことをいう。らしい。
-f	強制削除（確認なしで削除、エラーは無視）
node_modules	bunやnpmの依存関係が格納されているディレクトリ
bun_lock	bunのロックファイル

さらについでにディレクトリ内をコマンドで見る方法

ls

結局エラーが解消できたので、bunのままインストールしなおしました。

上から順に実行します。

この画面が表示されれば完了です！