対象環境

• macOS
• Node.js 20〜
  • LinuxやWindowsの方は自分でnodeとnpmをインストールできれば後は同じです

Node.js

• nodeとnpmのバージョン確認

  ❯ node -v
  v20.13.1
  
  ❯ npm -v
  10.5.1
  

コードエディタ

• VisualStudio Code, neovim, emacsなどプログラミング支援機能が使えるもの

Chrome 拡張機能 React Developer Tools

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja

新しいReactプロジェクトの作成

1. Viteを使って初期化

   ❯ npm create vite
   

2. プロジェクト名を入力し、React とTypeScript + SWCを選択してください

   

3. Linter

   • インストール済み

4. コードフォーマッターのインストール

   npm install --save-dev prettier
   

npm run dev で開発用サーバ起動

• http://localhost:5173 をブラウザで開く