Goal
ใช้ React สร้าง web applications ด้วย component-based architecture, virtual DOM, และ hooks
Scope
ใช้สำหรับสร้าง UI และ web applications ด้วย React library
Execute
- ติดตั้ง React ด้วย
bun add react react-dom - อ่าน
guide/installation.mdสำหรับการติดตั้งและ setup - อ่าน
guide/quick-start.mdสำหรับเริ่มต้นใช้งาน - ใช้
workflows/setup-react-project.mdสำหรับ setup project ใหม่ - อ่าน
guide/key-concept.mdสำหรับแนวคิดหลัก - อ่าน
guide/how-it-works.mdสำหรับวิธีการทำงาน - อ่าน
key-concepts/สำหรับแนวคิดเฉพาะทาง - อ่าน
guide/features.mdสำหรับ features ที่มี - อ่าน
workflows/use-react-hooks.mdสำหรับการใช้ hooks - ใช้ hooks สำหรับ state management และ side effects
- อ่าน
guide/patterns.mdสำหรับ patterns ทั่วไป - อ่าน
guide/best-practices.mdสำหรับ best practices - ใช้ component-based architecture
- อ่าน
guide/performance.mdสำหรับ performance optimization - อ่าน
workflows/optimize-react-app.mdสำหรับ optimization - ใช้ React best practices สำหรับ performance
- อ่าน
guide/integration.mdสำหรับ ecosystem integration - อ่าน
guide/ecosystem.mdสำหรับ React ecosystem - อ่าน
guide/architecture.mdสำหรับ system architecture - อ่าน
guide/troubleshooting.mdสำหรับปัญหาทั่วไป - อ่าน
references/api.mdสำหรับ API reference - อ่าน
workflows/migrate-to-react-18.mdสำหรับ migration
Rules
- ใช้
bun add react react-domสำหรับ installation - ใช้
bun add -D @types/react @types/react-domสำหรับ TypeScript - ใช้ Vite สำหรับ development server
- ใช้ backticks สำหรับ
useState(),useEffect(), commands - ใช้ code blocks สำหรับ component examples
- ใช้ ansi markdown diagrams สำหรับ flow และ architecture
- ใช้ functional components เสมอ
- ใช้ hooks สำหรับ state และ side effects
- ใช้ proper component composition
- ใช้
useMemo()สำหรับ expensive computations - ใช้
useCallback()สำหรับ function references - หลีกเลี่ยง unnecessary re-renders
Expected Outcome
- Components ที่ reusable และ maintainable
- Code ที่ follows React best practices
- Performance ที่ optimized
- Integration ที่ smooth กับ React ecosystem