LoginSignup
1

More than 5 years have passed since last update.

Bash on Ubuntu on WindowsでReact.js

Last updated at Posted at 2018-04-22

はじめに

Bash on WindowsでReact.jsを入れるとこまで備忘録も兼ねて書きました

手順

  1. Bash on Windowsのインストール
  2. nodejsのインストール
  3. Yarnのインストール
  4. create-react-appのインストール
  5. パスを通す
  6. tmuxのインストール

Bash on Windowsのインストール

Microsoft store->検索->ubuntu->インストール
どっかでしくじったりしたらアンインストールして再インストールすればまっさらな環境から再スタートできます

タイトルバー(ウインドウの一番上のやつ)を右クリック->プロパティ からフォントや不透明度などを設定できます。

nodejsのインストール

[最先端から] WindowsでRuby/node環境 [逃げない]
を参考に

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt install nodejs
node -v
v8.11.1

Yarnのインストール

Yarn公式の手順に従う

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
yarn -v
1.6.0

create-react-appのインストール

yarn global add create-react-app

パスを通す

上記のみだとパスが通らなかったので、

create-react-app:command not found

と出た。

を参考に、~/.profile

PATH="$PATH:`yarn global bin`"

を追加して

source ~/.profile

[2018/12/16追記]
bash on ubuntu on windows起動時に~/.profileが読み込まれない問題
ここを参考に、
bash on ubuntu on windowsのアイコンを右クリック-> プロパティ -> 「ショートカット」タブの「リンク先」の欄に--loginを追記して適用
すると起動時に~/.profileを読み込んでくれる

tmuxのインストール

ローカルサーバー起動しつつファイル編集するために複数窓を扱えるtmuxを入れます。

sudo apt install tmux

開発開始!!

create-react-app my-app
cd my-app
yarn start

最後に

tmux入れると複数窓扱えて便利です

参考にしたとこ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1