環境
Mac：Catalina
docker: 19.03.13
docker desktop for mac
Dockerはインストール済みとする。
環境準備
拡張機能である、Remote-Containersを入れる
VSCodeを起動
適当な加フォルダでVSCodeを開きます（中身はからっぽでOK）
開発コンテナ設定ファイルの作成
表示 > コマンドパレットを開く
Remote-Containers: Addまで打ち込んだら表示される、Remote-Containers: Add Development Container Configuration Files... を選択します。
Show All Definitions...を選択します。
検索BOXにnode と入力し、Node.js & Typescriptを選択します。
バージョンは現時点最新の14を選択しときます
これで設定ファイルが追加されました。
React設定の追加
Dockerfile
Dockerfileの17行目あたりにcreate-react-appのインストールを追加する
# [Optional] Uncomment if you want to install more global node packages
# RUN sudo -u node npm install -g <your-package-list -here>
RUN sudo -u node npm install -g create-react-app
devcontainer.json
ポートフォワードの設定を行う。
23行目あたりのポートフォワードのコメントを外して3000と入力する。
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [3000],
Dockerの有効化
左下のアイコンをクリックし、
コマンドパレットに表示されたContainers:Rebuild and Reopen in Containerを選択する。
react app の作成と実行
作成
ターミナルにて以下を打ち込む
npx create-react-app my-app
しばらく待つとreact appの雛形が作成される。
（初回はかなり待たされる）
Happy hacking!が表示されたら完了
実行
環境作成が完了したら、ターミナルにて以下を打ち込む
cd my-app
npm start
しばらく待つと起動します。
ブラウザにて http://localhost:3000 にアクセス！
以下の画面が表示されればOK
Happy hacking!
おまけ
Terminalにwarning: setlocale: LC_CTYPE: cannot change locale (ja_JP.UTF-8)と表示されるときは
Dockerfileに以下を追加することで解決します
RUN localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
参考
How to use Visual Studio Code Remote Containers to develop Microsoft Teams apps · Garry Trinder