⭐️

reactのインストールの備忘録(vite)

に公開

はじめに

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

本記事でわかること

  • Reactのインストール方法
  • 各種コマンドの豆知識情報

Reactのインストール

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

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

bun

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

npm

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

yarn

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のバージョンが古い可能性があります。
このエラーが出てしまったので、最新のバージョンをインストールしました。

下記の記事にインストール方法を記載
https://zenn.dev/devken/articles/nodejs-install

ついでにコマンドで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のままインストールしなおしました。

上から順に実行します。

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

Discussion