frontend-rules

Frontend Development Rules

Tech Stack

• React 18+
• TypeScript 5+
• Tailwind CSS
• React Router v6
• React Query / SWR

---

Component Standards

Component Structure

ComponentName/
├── index.tsx          # Component entry
├── ComponentName.tsx  # Component implementation
├── styles.css         # Style file
├── types.ts           # Type definitions
├── hooks.ts           # Component Hooks
└── __tests__/         # Test files
    └── ComponentName.test.tsx

Component Template

import { FC } from 'react';

interface ComponentNameProps {
  title: string;
  onClick?: () => void;
}

export const ComponentName: FC<ComponentNameProps> = ({
  title,
  onClick
}) => {
  return (
    <div className="component-container" onClick={onClick}>
      <h1>{title}</h1>
    </div>
  );
};

Component Principles

• Single responsibility principle
• Appropriate component granularity
• Clear Props types
• Reasonable default values

---

State Management

Local State

// Simple state
const [count, setCount] = useState(0);

// Complex state
const [state, dispatch] = useReducer(reducer, initialState);

Global State

• Use Zustand for global state
• Use React Query for server state
• Avoid overusing global state

State Selectors

// Use selectors for performance optimization
const user = useUserStore(state => state.user);
const isLoading = useUserStore(state => state.isLoading);

---

Style Standards

Tailwind CSS

// Recommended approach
<div className="flex items-center justify-between p-4 bg-white rounded-lg shadow-md">
  {/* content */}
</div>

// Extract complex styles as components
const Card = ({ children }) => (
  <div className="p-4 bg-white rounded-lg shadow-md">
    {children}
  </div>
);

CSS Variables

:root {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --spacing-md: 1rem;
}

Responsive Design

// Mobile-first principle
<div className="w-full md:w-1/2 lg:w-1/3">
  {/* content */}
</div>