reactの学びなおし

はじめに

reactで個人開発をしてるのですが、結構なあなあで開発してる部分も多く、型定義などもしっかりやれていませんでした。
個人開発してるものについては、動くレベルにはなってるので、一度横に置いてreactを学びなおそうとしています。
この記事は、その備忘録になります

環境構築

vscodeの設定

コマンド

mkdir .vscode
touch .vscode/extensions.json
touch .vscode/settings.json

extensions.json

{
  "recommendations": [
    // jsのlinst
    "dbaeumer.vscode-eslint",
    // cssのlint
    "stylelint.vscode-stylelint",
    // コードの自動整形ツール
    "esbenp.prettier-vscode",
    // コード補完
    "VisualStudioExptTeam.vscodeintellicode",
    // インポートのパスを自動補完
    "christian-kohler.path-intellisense",
    // インデントを視認しやすく（好みで）
    "oderwat.indent-rainbow",
    // HTMLの開きタグ閉じタグを連動修正
    "formulahendry.auto-rename-tag",
    // エクスプローラーのアイコン設定
    "vscode-icons-team.vscode-icons",
    // jsonをtypeScriptのインターフェースに変換してくれる
    "MariusAlchimavicius.json-to-ts",
    // モジュールのコストを表示
    "wix.vscode-import-cost"
  ]
}

settings.json

{
  ////////////////////////////////////////////////////////////////
  // editor設定
  ////////////////////////////////////////////////////////////////
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.renderWhitespace": "all",
  "editor.fontSize": 14,
  "editor.fontFamily": "ＭＳ ゴシック",
  "editor.renderLineHighlight": "all",
  "editor.rulers": [40, 80, 120],
  "editor.bracketPairColorization.enabled": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "files.encoding": "utf8",
  "terminal.integrated.fontFamily": "MS Gothic",
  "git.autofetch": true,
  "workbench.tree.indent": 15,
  // ココから拡張機能
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

nodeの設定

前回のrubyの時と同様にasdfでインストールします

asdfのインストールについては以下を参照

プラグインにてnodejsを追加

asdf plugin add nodejs

バージョン確認

asdf list all nodejs

21.6.1が最新のようなので、これをインストールします

asdf install nodejs 21.6.1

ローカルとグローバルのnodejsも同じバージョンにしておきます

asdf local nodejs 21.6.1
asdf global nodejs 21.6.1

yarnなどもついでにインストール

npm install -g yarn typescript ts-node typesync npm-check-updates

reactの環境構築

yarn create vite hello-world --template=react-ts

環境立ち上げ

cd hello-world
yarn install
yarn dev

さいごに

今回は環境設定および環境構築なので簡単な作業でした。
備忘録なので真新しい情報はないですが、自分がやった証拠として記載しました。
これを元に再学習開始！