タイトルの通り、新PC(Windows)で新しい開発環境を作ってみました。
やっていることは参考(https://high-career.jp/2022/01/04/vscode-react-dev/ )とほぼ同じです。
全体の流れ
- VSCodeのインストール
- Node.jsのインストール
- VSCodeを起動しReactプロジェクトの作成
- プロジェクトの実行
ざっくり注意
プロジェクト作成時、npmで必要なファイルが見つからなかったらしくエラーが出ました。
もし同じようにエラーが出た場合は提案されたバージョンのnpmにアプデしてみましょう。
VSCodeのインストール
公式サイトからダウンロードしてインストールする。
必要があれば途中の設定は適宜変更してください。
Node.jsのインストール
なんとなくインストールされていないことを確認
コマンドプロンプトを起動し、「node --version」を実行する。
まだ入っていません。
インストール
公式サイトからダウンロードしてインストールする。
VSCodeと同様に、必要があれば設定は適宜変更してください。
nodeとnpmがインストールされたことを確認する
コマンドプロンプトを起動し、「node --version」を実行する。
先程の「なんとなく確認」に使ったコマンドプロンプトでは確認できないため、新しくコマンドプロンプトを起動してください。
v20.18.0がインストールされました。
先にオプションの文字をタイプミスしているのは気にしない。
続けて同じコマンドプロンプトで「npm --version」を実行する。
10.8.2がインストールされました。
VSCodeを起動しReactプロジェクトの作成
VSCodeを起動し、ターミナルを開く
画像ではまたnodeの確認をしています。心配性ですね。
Reactプロジェクトを作成する
必要があればターミナルでcdコマンドを使用し、プロジェクトの作成をするフォルダに移動する。
ターミナルで「npx create-react-app hoge」を実行する。
アプリ名は任意です。
なんかエラーが出たが？
npmの実行に必要そうなファイルが見つからないようです。
npmのバージョンを上げればという提案がされていますが、先にPCの再起動を試してみます。
再起動したためコマンドをもう一度実行します。
ダメだったため素直に最初に提示されたnpmのアプデをしました。
(再起動後は何故かnoticeが表示されなかったためアプデコマンドは手打ちでした)
npmのアップデート後、もう一度プロジェクトを作成
提案された「npm install -g npm@10.9.0」を実行後、再び「npx create-react-app hoge」を実行します。
(npmのアプデのバージョンは表示された通知をもとに適宜変更してください)
確認が始まったのでプロジェクトの作成に成功したようです。
「y」を入力後、Enterを押して少し待ちます。
プロジェクトの作成が完了しました。
プロジェクトの実行
VSCodeのターミナルで「cd hoge」を実行し、プロジェクトフォルダに移動します。
アプリ名の部分は適宜変更してください。
移動後、「npm start」を実行します。
無事アプリが立ち上がるとブラウザが起動し、ページが表示されます。
ページの画像は省略します。
あとはいつものようにアプリを構築していきましょう。
余談
インストール時の設定は何も変えてないのにエラーが出たのは何故なのか。
でもアプデして動いたからヨシ！
参考