フレームワークに触れてこなかったフロント民がReact環境を用意する

前提

これをやろうとした人

• 実務で基本的なフロントエンドコーディングはできる
• 環境構築やバックエンドはかなり雰囲気
• ものぐさ

この記事の着地点

• VSCodeでReactをいじれて、それが見れるようにする

流れ

1. Node.jsとnpmをインストールする
   (必要かも)… VSCodeでコマンドを使えるようにする
2. ViteなるReact開発補助ツールもインストールする
3. Reactの初期構築をポチポチする

1. Node.jsとnpmをインストールする

公式サイトからインストールする
Node.js
Node.jsをインストールできるとnpmも一緒に入ってくれる

コマンドプロンプトを起動しnode -vとnpm -vを実行すると
それぞれインストールされたバージョン番号が表示されるので、出たらOK

〇< よく聞く２つだけどよく知らないから、この手順が心理的に一番負荷が高かった

VSCodeでターミナルを使えるようにする

これ以降はコマンドもといVSCodeのターミナルを実行するが、設定の都合で実行権限がない可能性がある
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
で解決。今のユーザーを許可するみたいな感じだったが気になるなら要確認

〇< 会社のPCでやる時はレギュレーション気を付けてね

2. ViteなるReact開発補助ツールもインストールする

適当にデスクトップでやり始めると後々面倒なので、フォルダを用意してVSCodeで開いておくとヨシ

ViteのインストールはVSCodeのターミナルから実行する
上記リンクにコマンドがあるのでそのまま実行
npm create vite@latest

最初は作っていいか？のようなノリで同意を求められるのでYesの意のyを入力

3. Reactの初期構築をポチポチする

その後はターミナル上で対話式に進めるので、気合で英語を読みながら進める
簡単に用意する場合は

1. Project name ⇒ .（なんでもいい）
   （これ以降は方向キーで選べる）
2. Select a framework ⇒ React
3. Select a variant ⇒ Javascript
4. Which linter to use? ⇒ ESLint（お好み）
5. Install with npm and start now? ⇒ Yes

参考

│
◇  Project name:
│  .
│
◇  Package name:
│  react-practice
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  JavaScript
│
◇  Which linter to use?
│  ESLint
│
◇  Install with npm and start now?
│  Yes

その後localhostのURLが出てくるので、それをクリックするとあら素敵
Reactの初期画面が表示され、晴れて初期構築が完了した

localhostは定期的に落ちるので、ターミナルでnpm run devを実行すると再起動できる

余談

React圏の命名ルールが馴染みがなかったので
大文字小文字のミスを多々したので、普段のルールが違う人はぜひ気を付けて