前置き

こんにちわぐ
windowsでreact等のローカル環境を構築するのって正直面倒くさいですよね。
そういえば、wslなるものをwindowsに入れたよねってことで今回はwslを使ってreactの開発環境を構築しようと言うお話。

環境構築

node.jsの確認

まずは、node.jsがインストールされているかの確認をしよう。
下記のコマンドでバージョンが表示されればインストールされている。

node -v

node?そんなもんねぇよって言われたら、下記のコマンドでインストール。

sudo apt-get install -y nodejs npm

再度、インストールされているかの確認

node -v
npm -v

次にnode.jsをバージョン管理できるようにnパッケージをインストール。

sudo npm install -g n

node.jsの安定板をインストール。

sudo n stable

※最新版の場合

sudo n latest

nコマンドでインストールされてるnode.jsのリストを確認

sudo n

node.jsのバージョンを切り替えるには下記のコマンドで可能になる。

sudo n 9.3.0

react.jsのインストール

facebookが公式で出しているcliのツールをインストールする。

npm install -g create-react-app

react.jsのプロジェクトを作成する。

create-react-app test-app

プロジェクトの作成完了まで多少時間がかかります。

サーバーの起動

cd test-app
nom start

下記のページが表示されれば正常に起動している。

まとめ

react.jsの開発環境の構築がすごい楽になりました。
wslを使えば完全ローカル環境が構築できそうですね。
それでは、またの機会に。
サラダバー