⭐️
reactのインストールの備忘録(vite)
はじめに
Reactのインストール方法について残しておきたかったので、ここで記述してきます。
本記事でわかること
- Reactのインストール方法
- 各種コマンドの豆知識情報
Reactのインストール
まずは、インストール方法をドキュメントから確認します。
こちらの公式ドキュメントから方法を拝借。
とりあえず今回は、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のバージョンが古い可能性があります。
このエラーが出てしまったので、最新のバージョンをインストールしました。
下記の記事にインストール方法を記載
ついでにコマンドで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