• 投稿日:2023年09月11日 15時04分57秒
  • 更新日:2023年09月13日 11時33分12秒
React環境をサクッと構築

React環境をサクッと構築

詳細

WSL2のUbuntuを想定してます。

環境構築

Dockerfile

FROM node:20-alpine
WORKDIR /usr/app

nodeのバージョンはこちらを見てください。

docker-compose.yml

version: '3'

services:
  app:
    build: ./
    volumes:
      - ./src:/usr/app
    command: sh -c "yarn start"
    ports:
      - "3000:3000"

portsは好きなものに変更してください。

Reactプロジェクトを作成

JSX

docker-compose run --rm app sh -c "npm install -g create-react-app && create-react-app ."

Tyepscript

docker-compose run --rm app sh -c "npx create-react-app . --template=typescript"

有用なパッケージ

#ルーティング用
docker-compose run --rm app sh -c "npm install react-router-dom"

#非同期通信用
docker-compose run --rm app sh -c "npm install axios"

#Material UI
docker-compose run --rm app sh -c "npm install @mui/material @mui/icons-material @emotion/react @emotion/styled"

dockerを起動

docker-compose up -d

これでブラウザから見れればOK。http://localhost:3000/

SPECIAL THANKS

  1. WSL2+DockerでReactの環境を簡単に作る -Zenn-
React環境をサクッと構築
Laravel Sailでサクッと環境構築
Ubuntuからインストーラを使ってインストールしたNode.jsを削除する
WSL2を使ってDcoker/Ubuntu環境を構築する
WLS-Ubuntuにdockerをインストールする
親のstateを子で変更する
MUIのブレイクポイントについて
setStateに配列を指定したときにレンダリングが実行されない問題