# React

> แนวทางการพัฒนา React ตาม best practices สำหรับ JavaScript library สำหรับสร้าง UI ที่มี...

- Skill: `newkub/react` (Agent Skill, multi-file: 63 files)
- Install (CLI): `npx skillmds@latest add newkub/react`
- Raw SKILL.md: https://api.skillmd.com/api/skills/newkub/react/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: newkub (https://skillmd.com/u/newkub)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/newkub/react

---

## 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