VMのLinux mint上にReact環境を構築する

自宅PCのVM上に開発環境を構築する自分用の手順書です。
※　2019/12/13更新

環境

OS:Linux mint 19.2
VM:Oracle VM VirtualBox 6.0.14

apt update & upgrade

$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo reboot

npm インストール

$ sudo apt-get install npm -y
$ npm -v
6.12.1

#nodejs インストール

npmを使って最新版のnodejsをインストールします。

$ sudo npm install n -g
$ sudo n stable
$ node -v
v12.13.1

yarn インストール

※npmのみでも実行可能であるが、参考にしたサイトではyarn推奨

$ sudo npm install yarn -g

create-react-app　インストール

※バージョン変更により、テンプレートが作成出来ない不具合が発生する可能性があるためインストールはしない方がいいです。

こちらは飛ばして次の項目へ進んでください。

$ sudo npm install create-react-app -g
$ create-react-app --version
3.2.0

#React アプリ作成
以下の3つのどれかを実行して下さい。

$ npx create-react-app my-app
$ npm init react-app my-app
$ yarn create react-app my-app

Hello Worldを表示するため /src/idenx.jsを書き換える

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

-ReactDOM.render(<App />, document.getElementById('root'));
+var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');
+ReactDOM.render(element, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

TCP/3000番ポートを開放する

$ sudo ufw allow 3000
$ shutdown -h now

※ポート開放後にVirtualBoxのポートフォワーディングを設定するため一度シャットダウンする

VirtulBoxマネージャー画面から使用しているVMを選択し
設定 -> ネットワーク(NAT) -> 高度(D) -> ポートフォワーディング(P)
ルールを追加し以下のように設定する

名前	プロトコル	ホストIP	ホストポート	ゲストIP	ゲストポート
Rule1	TCP		3000		3000

Hello World表示

create-react-appで作成したフォルダに移動してnpm or yarnでstart

$ cd my-app
$ npm start
or
$ yarn start

ブラウザからhttp://localhost:3000/にアクセス

参考サイト

https://jitaku.work/it/react/
https://qiita.com/y_ohr/items/8afd0852b24356059f2b

追記（2019/12/13）

$ sudo npm install create-react-app -g

上記でcreate-react-appをインストールしている方は、バージョンが変わりテンプレートのインストールが出来なくなる可能性があります。
create-react-app --versionで確認し、3.3.0よりも古いバージョンはテンプレートが作成されません。

以下のコマンドを実行してアンインストールして下さい。

$ npm uninstall -g create-react-app
$ which create-react-app
/usr/local/bin/create-react-app
sudo rm -rf /usr/local/bin/create-react-app

以下の3つのどれかを実行して下さい。

$ npx create-react-app my-app
$ npm init react-app my-app
$ yarn create react-app my-app