Frontend Architecture

Best practices trong việc tổ chức code và architecture cho frontend projects.

Project Structure

src/
├── components/
│   ├── common/        # Reusable components
│   ├── features/      # Feature-specific
│   └── layouts/       # Layout components
├── hooks/             # Custom hooks (React)
├── composables/       # Composables (Vue)
├── utils/             # Utility functions
├── services/          # API calls
├── stores/            # State management
├── types/             # TypeScript types
├── styles/            # Global styles
└── App.jsx

State Management

Local State

Component state với useState/ref

Global State

React: Zustand, Redux Toolkit, Jotai
Vue: Pinia

// Zustand example
import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

Data Fetching

React Query / TanStack Query

import { useQuery } from "@tanstack/react-query";

function Users() {
  const { data, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: () => fetch("/api/users").then((r) => r.json()),
  });
}

Patterns

Container/Presentational - Logic vs UI separation
Compound Components - Components work together
Render Props - Share code via props
HOC - Higher-Order Components