Reactを試す。とりあえず公式チュートリアルの三目並べをやる。開発環境はVisual Studio Codeが提供しているコンテナで開発できるDev Containersを使う。とりあえずただTutorialやるだけなので、開発環境構築までを備忘録として残すことにする。

目次

  1. 開発環境構築
  2. Reactインストール

1.環境構築

vscodeの開発コンテナ?にて環境を構築した。Dokerfileと起動オプション周りを記載するdevcontainer.jsonを用意すれば利用できる。nodeが使えればいいのでnodeがインストールされたコンテナと、devcontainer.jsonに使用するDokerfile名を指定した。

ディレクトリ構成
.
├── .devcontainer
│   ├── Dockerfile
│   └── devcontainer.json
Dockerfile

reactのtutorialはnode:18なため素直にいれた。version support的には切れてそうだけど。。。流石にメジャーバーション変えると別で詰まりそうなので18で進める。

FROM node:18-slim

ENV TZ Asia/Tokyo
devcontainer.json

特に追加したいものは無いため、使用するDokerfile名だけ指定した。

{
   "name": "hello react-hook-form",
   "dockerFile": "Dockerfile"
}

2. Reactインストール

Dev Containersにてコンテナを立ち上げ、node:18がちゃんと入っていることを確認

# node -v
v18.20.2

あとはtoutorialチュートリアルのセットアップ に則りcodeをダウンロード、インストール後node(?)を立ち上げる。終わり！

# npm install
✔ What is your project named? … hello-react-hook-form
✔ Would you like to use TypeScript? … No
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No