Windows11でReactプロジェクトを作成して実行してみる
はじめに
今まで個人開発や勉強ではmac環境が主だったため、今回はwindows環境でReactアプリを立ち上げるところまでやってみる。
Windowsで一連の環境構築を行った備忘録。
所感
始める前のふんわりとしたイメージ
・macで普段Linuxコマンドを使うのに慣れてしまっているため、コマンドプロンプトにやや抵抗がある。
・WSL2の導入は難しい/複雑なイメージがある。
実践
Node.jsのインストール
まずは実行環境を準備するため、Node.jsのインストールから始める。
公式サイトからダウンロード可能なため、こちらはmacと特に変わらず、ダウンロードして手順通りに進める。
下記から左の推奨版をインストールする。
Node.jsの確認
Node.jsがインストールされたことを確認する。
コマンドプロンプトで以下のコマンドを入力してバージョン確認。
node -v
>>> v18.16.1
短いコマンドで意外と簡単に確認できた。（この段階で少し詰まるかと身構えていた）
npmがインストールされていることも確認しておく。
npm -v
>>> 9.5.1
こちらも問題なくインストールできている。
Reactプロジェクトを作成
早速Reactプロジェクトの作成に取り掛かる。
まず適当なフォルダに移動しようとしたところ、フォルダ移動コマンドがコマンドプロンプトだとmacと違うことを思い出す。
→調べてみたところ、標準搭載のWindows Power Shellを使えば、"cd","ls"などのコマンドが使えそう。
実際にやってみたところ違和感なく使えたので、早速Reactプロジェクトのひな形を作成する。
Windows Power Shellで以下コマンドを入力して実行
npx create-react-app@latest react-sample-app --template typescript
実行したところこんなエラーが発生
身構えたが、単純にnpm installでバージョン更新すれば直りそう。
以下を実行する。
npm install -g npm@9.8.0
これで問題なく作成完了！
Reactプロジェクト実行
早速動作確認してみる。
プロジェクト内に入り、起動コマンドを実行。
cd react-sample-app
npm run start
localhost:3000にアクセス。
問題なくできた！
実際にやってみて
ネットの影響か、Windowsで環境構築をすることに難しいイメージがあったが、今回の範囲では全く難しいことはなかった。
→今回Dockerや仮想環境も使っていないため、特に詰まらなかったのかもしれない。
JavaのJDKのインストールのように、環境変数にパスを通したりする場合は少しややこしいかも？
ぼんやりとWSL2使わないとかなぁ。。と思っていたが、Windows Power Shellのおかげでサクサク進められた。
Discussion