rails初心者が好奇心でreactに手を出してみる

フロント側も触ってみたいとおもったので、react.jsで簡単なアプリを作っていくことにしたので、環境構築について備忘録も兼ねてアウトプットしておく。

(cloud9で開発を始めたのですが、バージョン指定等で若干ハマりました。)

node.jsをインストールするのあたってhomebrewが必要になるくさいので、インストール。

$ sh -c "$(curl -fsSL https://raw.githubusercontent.com/Linuxbrew/install/master/install.sh)"

このままだとパスが通ってないと警告されるので、通します。

$ test -d ~/.linuxbrew && PATH="$HOME/.linuxbrew/bin:$HOME/.linuxbrew/sbin:$PATH"
$ test -d /home/linuxbrew/.linuxbrew && PATH="/home/linuxbrew/.linuxbrew/bin:/home/linuxbrew/.linuxbrew/sbin:$PATH"
$ test -r ~/.bash_profile && echo "export PATH='$(brew --prefix)/bin:$(brew --prefix)/sbin'":'"$PATH"' >>~/.bash_profile
$ echo "export PATH='$(brew --prefix)/bin:$(brew --prefix)/sbin'":'"$PATH"' >>~/.profile

これでOK。
パス通すって原理はわかるんだけど、コードの意味ちゃんと理解できてるかと聞かれるとアブないんだよな、調べとこう。

（参考：https://qiita.com/nasuvitz/items/5eec6ab9444cff8e9467）

homebrewがインストールできたら、node.jsをインストールしましょう。

$ brew install node

続いて、node.jsのバージョンを指定したいのですが、cloud9では標準で
nvm(Node Version Manager)がインストールされているようなので
(もしインストールされてなかったら、公式ドキュメントを参考に：https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/sample-nodejs.html)
こちらを利用してバージョン指定をします。

$ nvm install バージョン

これでOK。node -v　と指定して

$ node -v
vバージョン

と表示されれば完了です。

次はJavaScriptのパッケージマネージャであるyarnをインストールします。Rubyでいうところのbundler(?)。

$ brew install yarn --ignore-dependencies

以前はオプションに --without-node　というものを使用していたみたいですが、そちらを参照したところ「知らないオプションなのでシカトします！」ってバッサリいかれたので記述を変えました。
（参考：http://babababand.hatenablog.com/entry/2019/04/06/071534）
エラーメッセージってたまに面白いのあるからいいですよね。ふふってなる。

$ yarn --vesion
yarn install v1.22.4
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 0.12s.

みたいなのが返ってくればOK。

新しいディレクトリを作成して、webpack等をインストールします。

$ mkdir React_TO_DO
$ cd React_TO_DO
$ git init
$ yarn init
question name (React_TO_DO): 
question version (1.0.0): 
question description: 
question entry point (index.js): 
question repository url: 
question author: 
question license (MIT): 
question private: 

yarn initの後に出てくるものは、全部エンターでOKです。
次のコードでwebpack等をインストールします。

$ yarn add --dev webpack webpack-cli 

とりあえずこれで開発は進めていけそうかなぁ。