cloud9でReactの環境構築

※こちらは既にAWSに登録、またCloud9の環境作成完了していることを前提に
　手順を掲載しております。

1.Node.js、npm(Node Package Manager)のバージョン確認

cloud9の「Open IDE」をクリックし、開発環境を表示

ターミナルで以下コマンドを入力
それぞれバージョンが表示されればOK

node -v
ec2-user:~/environment/react $ node -v
v10.24.1

ec2-user:~/environment/react $ npm -v
6.14.12

2.yarnのインストール

yarnとは...node.jsのパッケージマネージャ
既にnpmがデフォルトで入っていますが、こちらではnpmより高速で信頼性も高いyarnを利用します。
※より詳しくyarnの利用するメリットについて知りたい方は以下の記事をご参考にして下さい。

ec2-user:~/environment/react $ npm i -g yarn

> yarn@1.22.17 preinstall /home/ec2-user/.nvm/versions/node/v10.24.1/lib/node_modules/yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)

/home/ec2-user/.nvm/versions/node/v10.24.1/bin/yarn -> /home/ec2-user/.nvm/versions/node/v10.24.1/lib/node_modules/yarn/bin/yarn.js
/home/ec2-user/.nvm/versions/node/v10.24.1/bin/yarnpkg -> /home/ec2-user/.nvm/versions/node/v10.24.1/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.22.17
added 1 package in 0.86s

バージョン確認

ec2-user:~/environment/react $ yarn -v
1.22.17
ec2-user:~/environment/react $ 

3.create-react-app(コマンドラインツール)のインストール

yarnを使用しグローバルにcreate-react-appのインストールを行う。

ec2-user:~/environment/react $ yarn global add create-react-app                                                                           
yarn global v1.22.17
[1/4] Resolving packages...
warning create-react-app > tar-pack > tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-react-app@4.0.3" with binaries:
      - create-react-app
Done in 3.49s.

4.アプリの作成

「アプリ名」の部分に任意のアプリ名を入力し、以下コマンドでアプリを作成

yarn create-react-app アプリ名

以上