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を書き換える
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