Open2024/04/08にコメント追加21

フロントエンドを学ぶ

https://typescriptbook.jp/

TypeScript の背景から React, Next.js を用いたアプリ開発までスムーズに学習できる。
Vercel, Jest, Prettier, ESLint 等の開発体験を向上させるためのツールも紹介されていて良い。
Vercel のデプロイ楽すぎる...

npm, npx, yarn とは？違いは？

https://ja.vitejs.dev/guide/

色々記事を見ていると Vite を使っている人が多いので調べてみる。

Webpack 等のバンドルツールと比較して、高速に開発サーバを起動できる仕組みが備わっているらしい。プロダクションのビルドは Rollup という従来ツールを使用する。

Webpack とは？Vite と Webpack の違いは？

React with Vite の環境構築。prettier, eslint の設定で詰まらなくなるのでとても助かる。

まとめて実行できるシェルスクリプト（雑）

#!/bin/sh

if [ -d react-setup-2024/ ]; then
    cd react-setup-2024/
    git pull origin main
    cd ..
else
    git clone git@github.com:nomnomnonono/react-setup-2024.git
fi

npm create vite@latest $1 -- --template react-ts
cd $1
npm install

npm install -D vite-tsconfig-paths

npm install -D \
  vitest \
  happy-dom \
  @vitest/coverage-v8 \
  @testing-library/react \
  @testing-library/user-event \
  @testing-library/jest-dom \
  msw

npm install -D \
  eslint-plugin-react \
  eslint-plugin-vitest \
  eslint-plugin-import \
  prettier \
  eslint-config-prettier \
  npm-run-all

git init
npm install --save-dev husky lint-staged
npx husky init
echo "npx lint-staged" > .husky/pre-commit

for file in ../react-setup-2024/*
do
  cp ../react-setup-2024/$file .
done
cp -r ../react-setup-2024/.github/ .github/
node postscript-package.js && rm -rf postscript-package.js
npm install

React Hooks を理解する。

useState: 状態を記憶する
useContext: propsのバケツリレーをせずに親要素から情報を取得する
useRef: レンダリングに用いない情報（DOMノード等）を保持する
useEffect: コンポーネントを外部システムに接続・同期させる

useEffect の理解を深める。

React x TypeScript x Vite で作った Todo アプリ。

タスクを追加した後にinputにフォーカスさせる。

event.targetとevent.currentTargetの違い。

eventの型で怒られたとき用。

TailwindCSS のインストール方法。

Vite のときはこっち。

Tailwind CSS の応用、カスタマイズ。

Tailwind CSS のチートシート。

React x TypeScript x TailwindCSS x Vite で作った Trello-like アプリ。

https://docs.dndkit.com/

react-beautiful-dnd はメンテナンスされていないため dnd kit を採用。

dnd kit の動かせる様でクリックイベントが動くようにする。

レンダリング方法の違いについて。

Firebase を活用した開発。