๐ React + TypeScript + Vite ๅฎๆด้็ผๆๅ
ๅจ็พไปฃๅ็ซฏ้็ผไธญ，React + TypeScript + Vite ๅทฒๆ็บไธปๆต็ตๅ。 ๆฌ็ฏๅฐๅพ ็ฐๅขๅปบ็ฝฎ → ๆถๆง่จญ่จ → ๅๅฅ็ฎก็ → ๆ่ฝๅชๅ ๅ จ้ข่งฃๆ， ๅนซๅฉไฝ ๅปบ็ซไธๅฅ้ซๆ、ๅฏ็ถญ่ญท、ๅ ทๅๆดๅฑๆง็ๅ็ซฏ้็ผๆต็จ。
๐งฑ ไธ、้็ผ็ฐๅข่จญๅฎ
1️⃣ ๅปบ็ซๅฐๆก
npm create vite@latest my-app
cd my-app
npm install
npm run dev้ธๆ React + TypeScript ็ฏๆฌ，ๅณๅฏๅฟซ้ๅปบ็ซๅฐๆก。
2️⃣ ๅฟ ๅๅฅไปถ
npm install -D eslint prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin3️⃣ TypeScript ่จญๅฎ้้ป
{
"compilerOptions": {
"strict": true,
"jsx": "react-jsx"
}
}๐ ไบ、ๅฐๆก็ตๆง่จญ่จ
src/
├── assets/
├── components/
├── pages/
├── features/
├── hooks/
├── utils/
└── App.tsx
- ไพ「ๅ่ฝ」ๆๅ่ณๆๅคพ（Feature-based）
- ๆฏๅๆจก็ตไฝฟ็จ
index.ts็ตฑไธๅบๅฃ - ้ฟๅ ๅฎไธๅคงๅๅ ไปถ（็ถญๆไฝ่ฆๅ）
⚛️ ไธ、React ้็ผๆไฝณๅฏฆ่ธ
Hooks ไฝฟ็จ
useState：ๅบๆฌ็ๆ ็ฎก็useEffect：ๅฏไฝ็จ่็useContext：่ทจๅ ไปถๅ ฑไบซ่ณๆ
่ชๅฎ็พฉ Hook ็ฏไพ
function useFetch(url: string) {
const [data, setData] = useState(null)
useEffect(() => {
fetch(url).then(res => res.json()).then(setData)
}, [url])
return data
}ๆ่ฝๅชๅ
React.memo้ฟๅ ้่คๆธฒๆuseCallback/useMemoๆงๅถๅฝๆธ่่จ็ฎ- ๅคงๅๅ่กจไฝฟ็จ key + ๅ้
๐ง ๅ、TypeScript ๅๅฅ่จญ่จ
Props ๅๅฅ
type Props = {
title: string
count?: number
}
const Card = ({ title, count }: Props) => {
return <div>{title} - {count}</div>
}Union Type
type Status = 'idle' | 'loading' | 'success'Discriminated Union
type State =
| { status: 'loading' }
| { status: 'success'; data: string }⚡ ไบ、Vite ้ ็ฝฎๅชๅ
vite.config.ts ็ฏไพ
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 3000
}
})- ๅฟซ้ HMR（็ฑๆดๆฐ）
- ่ชๅ Code Splitting
- ่ผ้ๅๆๅ
๐ ๅ ญ、ๆ่ฝๅชๅ็ญ็ฅ
Lazy Loading
const Page = React.lazy(() => import('./Page'))ๅ็ๅชๅ
- ไฝฟ็จ vite-plugin-imagemin
- ้ฟๅ ๅคงๅ็ดๆฅ่ผๅ ฅ
Web Worker
- ่็ๅคง้่จ็ฎ้ฟๅ ๅก UI
๐ฆ ไธ、็ๆ ็ฎก็้ธๆ
| ๅทฅๅ ท | ้ฉ็จๆ ๅข |
|---|---|
| Context | ๅฐๅๅฐๆก |
| Redux Toolkit | ๅคงๅๅฐๆก |
| Zustand | ่ผ้ๅ ฑไบซ็ๆ |
๐งช ๅ ซ、ๆธฌ่ฉฆ็ญ็ฅ
- Jest + Testing Library：ๅฎๅ ๆธฌ่ฉฆ
- Cypress / Playwright：E2E ๆธฌ่ฉฆ
๐ ไน、้จ็ฝฒ่ CI/CD
- GitHub Actions ่ชๅๅปบ็ฝฎ
- ่ผธๅบ่ณ
dist/ - ้จ็ฝฒ่ณ Vercel / Netlify
♿ ๅ、ๅฏ็ถญ่ญทๆง่ๆไฝณๅฏฆๅ
- ไฝฟ็จ semantic HTML
- ้ตๅพช ARIA ่ฆ็ฏ
- ๆฐๅฏซๆธ ๆฐ commit message
๐ ็ธฝ็ต
React + TypeScript + Vite ๆไพไบไธๅฅ็พไปฃๅไธ้ซๆ็็ๅ็ซฏ้็ผ้ซ้ฉ。 ้้่ฏๅฅฝ็ๆถๆง่จญ่จ่ๆ่ฝๅชๅ็ญ็ฅ，ๅฏไปฅๅคงๅน ๆๅ้็ผๆ็่็ณป็ตฑ็ฉฉๅฎๆง。
๐ฌ ไฝ ็ฎๅๆฏไฝฟ็จๅชไธ็จฎๅ็ซฏๆถๆง？ๆๆฒๆ่ธฉ้ไป้บผๅ？ๆญก่ฟ็่จไบคๆต！
ๆฒๆ็่จ:
ๅผต่ฒผ็่จ