Component Naming

Components

// PascalCase
function UserProfile() {
  return <div>User Profile</div>;
}

// ❌ ควรหลีกเลี่ยง
function userProfile() {
  return <div>User Profile</div>;
}

Naming Conventions Table

Category	Naming Rule	Usage Example	Notes
Component Files	PascalCase (.tsx)	UserProfile.tsx	ไฟล์ component ต้องใช้ .tsx
Component Names	PascalCase	<UserProfile />	ใช้ทั้งการประกาศและเรียกใช้
Props	camelCase	userData={data}	ใช้ทั้งใน interface และ JSX
Custom Hooks	camelCase (useXxx)	useUserData()	ต้องขึ้นต้นด้วย "use"
Context	PascalCase	UserContext	รวมทั้ง Provider และ Hook
Variables	camelCase	const userData = ...	ใช้ทั้งใน component และ hook
Type/Interface	PascalCase	interface UserData	ใช้สำหรับ TypeScript types
Constants	UPPER_CASE	MAX_ITEMS = 10	ใช้สำหรับค่าคงที่
Test Files	.test.tsx	UserProfile.test.tsx	ใช้สำหรับไฟล์ทดสอบ

Props

// camelCase
<UserCard 
  userName="john_doe" 
  isVerified={true}
  onClick={handleClick}
/>

// ❌ ควรหลีกเลี่ยง
<UserCard 
  UserName="john_doe"
  is_verified={true}
  on_click={handleClick}
/>

Hooks

// ขึ้นต้นด้วย use
function useFetchData() {
  const [data, setData] = useState(null);
  // ...
}

// ❌ ควรหลีกเลี่ยง
function fetchData() {
  const [data, setData] = useState(null);
  // ...
}

Variables

// camelCase
const userList = [];
let isLoading = true;

// ❌ ควรหลีกเลี่ยง
const user_list = [];
let is_loading = true;

Constants

// UPPER_CASE
const API_URL = "https://api.example.com";
const MAX_RETRIES = 3.;

// ❌ ควรหลีกเลี่ยง
const apiUrl = "https://api.example.com";
const maxRetries = 3;

Interfaces/Types

// PascalCase
interface UserProfile {
  name: string;
  age: number;
}

type ApiResponse = {
  data: any;
  status: number;
};

// ❌ ควรหลีกเลี่ยง
interface user_profile {
  name: string;
  age: number;
}