Khi phát triển song song ứng dụng web và mobile bằng React, việc duy trì giao diện nhất quán là thách thức lớn. Một Design System được chia sẻ giúp nhóm giảm thiểu trùng lặp code, tăng tốc độ phát triển và đảm bảo trải nghiệm người dùng đồng bộ. **1. Xác định phạm vi và nguyên tắc cốt lõi** - Liệt kê các thành phần UI cần dùng chung: button, input, card, modal, typography, color palette, spacing. - Quy định quy tắc naming (ví dụ: `ButtonPrimary`, `InputDefault`) và props API thống nhất cho cả hai nền tảng. - Chọn cách triển khai: thư viện component riêng (npm package) hoặc monorepo với `yarn workspaces` / `pnpm`. **2. Cấu trúc thư mục gợi ý** ``` design-system/ ├─ src/ │ ├─ components/ # Button, Input, Card… │ ├─ tokens/ # colors, spacing, typography (JSON/TS) │ ├─ hooks/ # useTheme, useMediaQuery │ └─ utils/ # clsx, style helpers ├─ web/ # entry point cho React Web (CSS‑in‑JS, Tailwind…) ├─ native/ # entry point cho React Native (StyleSheet, react‑native‑svg) └─ package.json ``` **3. Chia sẻ design tokens** - Xuất tokens dưới dạng file JSON hoặc TypeScript (`design-tokens.ts`). - Web dùng `styled-components`/`emotion` để đọc tokens; Native dùng `StyleSheet.create` với cùng đối tượng token. - Ví dụ token màu: ```ts export const colors = { primary: '#2563EB', primaryHover: '#1D4ED8', background: '#FFFFFF', textPrimary: '#111827', }; ``` **4. Component cross‑platform** - Viết component logic thuần React (không chứa style cụ thể). - Tách style vào file riêng: `Button.style.web.ts` và `Button.style.native.ts`. - Export component chung qua `index.ts` tự động chọn file phù hợp nhờ `Platform.select` hoặc alias bundler. **5. Storybook / Showcase** - Cài đặt Storybook cho web và `storybook-react-native` cho mobile. - Viết stories một lần, chạy trên cả hai môi trường để QA nhanh. **6. Quy trình phát hành và versioning** - Sử dụng Changesets hoặc conventional commits để bump version tự động. - Publish lên registry nội bộ (npm private, GitHub Packages). - Các dự án consumer chỉ cần `yarn add @myorg/design-system@latest`. **7. Mẹo thực tế** - **Icon**: dùng SVG component chung (`react-native-svg` trên mobile, `<svg>` trên web). - **Responsive**: cung cấp hook `useBreakpoint` trả về `'sm' | 'md' | 'lg'` dựa trên `window.innerWidth` (web) và `Dimensions.get('window').width` (native). - **Testing**: viết unit test cho logic component, snapshot test cho style tokens. - **Documentation**: giữ README với ví dụ sử dụng, migration guide khi breaking change. **Kết luận** Một Design System được xây dựng đúng cách biến việc phát triển đa nền tảng từ "copy‑paste" thành "compose‑reuse". Bắt đầu từ tokens, tách biệt style theo platform, tự động hóa phát hành và kiểm thử liên tục sẽ giúp đội ngũ tập trung vào tính năng thay vì sửa chữa giao diện lặp lại.