## Tại sao cần một hệ thống component dùng chung? Khi phát triển ứng dụng web và ứng dụng di động bằng React, nhiều nhóm thường tái tạo các thành phần giao diện người dùng tương tự trên cả hai nền tảng. Điều này không chỉ dẫn đến công sức trùng lặp mà còn làm tăng nguy cơ sai lệch giao diện người dùng và cản trở khả năng mở rộng. Bằng cách tạo một hệ thống component dùng chung được xây dựng bằng TypeScript và được tài liệu hóa bằng Storybook, bạn có thể đạt được sự đồng bộ giao diện người dùng, rút ngắn thời gian phát triển và đảm bảo chất lượng mã nguồn trên cả React Web và React Native. ## Lợi ích chính - **Giao diện người dùng đồng bộ** – Các component có kiểu dáng và hoạt động giống nhau, bất kể chúng được render trên trình duyệt hay thiết bị di động. - **Viết mã một lần, sử dụng ở mọi nơi** – Các component có thể được tái sử dụng trong các thư mục dự án web và di động, giảm thời gian bảo trì. - **Tài liệu và thử nghiệm được cải thiện** – Storybook cung cấp một không gian làm việc riêng biệt để trình diễn, thử nghiệm và ghi lại các component, giúp các nhà phát triển và người dùng cuối dễ dàng khám phá chức năng của chúng. - **Hỗ trợ TypeScript trên cả hai nền tảng** – Các khai báo kiểu dữ liệu nghiêm ngặt giúp phát hiện lỗi sớm và cung cấp cho IDE thông tin tự động hoàn thành chính xác. ## Thiết lập hệ thống ### 1. Tạo một thư mục chung Tạo một thư mục riêng (ví dụ: `shared-components`) không phụ thuộc vào bất kỳ nền tảng nào. Lưu trữ tất cả các component, kiểu dữ liệu và tài liệu ở đó. ### 2. Sử dụng TypeScript với các kiểu dữ liệu chung Tạo một tệp `src/types/index.ts` chung để định nghĩa các kiểu dữ liệu được chia sẻ như `Size`, `ColorTheme` hoặc các kiểu dữ liệu liên quan đến phương tiện truyền thông. ```ts // src/types/index.ts export type Size = 'small' | 'medium' | 'large'; export type ColorTheme = 'light' | 'dark'; ``` ### 3. Xây dựng các component Tạo một component nút có thể tái sử dụng hoạt động trên cả hai nền tảng, chỉ sử dụng các API chung của React. ```ts // src/components/Button.tsx import React from 'react'; import { Size, ColorTheme } from '../types'; interface ButtonProps { label: string; size?: Size; theme?: ColorTheme; onPress: () => void; } const Button: React.FC<ButtonProps> = ({ label, size = 'medium', theme = 'light', onPress }) => { const sizeClass = size === 'large' ? 'text-lg px-6' : 'text-sm px-4'; const themeClass = theme === 'dark' ? 'bg-gray-800 text-white' : 'bg-white text-gray-800 border'; return ( <button className={`rounded ${sizeClass} ${themeClass}`} onClick={onPress}> {label} </button> ); }; export default Button; ``` ### 4. Tích hợp với React Native Trong thư mục di động, bạn có thể import cùng một component và sử dụng một bộ style phù hợp. Ví dụ: `src/native/Button.tsx` có thể mở rộng component gốc với các style native-specific. ```ts // src/native/Button.tsx import React from 'react'; import Button from '../components/Button'; import { TouchableOpacity, Text, StyleSheet } from 'react-native'; const NativeButton = (props: any) => ( <TouchableOpacity style={styles.container} onPress={props.onPress}> <Text style={styles.text}>{props.label}</Text> </TouchableOpacity> ); const styles = StyleSheet.create({ container: { padding: 10, backgroundColor: '#007bff', borderRadius: 5 }, text: { color: '#fff', fontSize: 16 }, }); export default NativeButton; ``` ### 5. Tài liệu hóa các component bằng Storybook Tạo một thư mục `stories` và thêm một tệp `.mdx` hoặc `.stories.tsx`. Storybook sẽ render các component web và di động trong các tab riêng biệt, giúp người dùng xem trước giao diện người dùng trên cả hai nền tảng. ## Lời khuyên thực tế - **Tách riêng các style** – Sử dụng styled-components hoặc emotion với các style được xác định rõ ràng theo từng nền tảng (`.web.ts` và `.native.ts`) để tránh xung đột. - **Sử dụng các hook tùy chỉnh** – Các hook như `useResponsiveSize` có thể được chia sẻ, trong khi vẫn sử dụng các hook gốc của React Native khi cần thiết. - **Tự động hóa kiểm tra kiểu dữ liệu** – Thêm `tsc` vào quy trình CI để đảm bảo không có lỗi kiểu dữ liệu trên bất kỳ nền tảng nào. - **Phân nhánh hệ thống component** – Khi ứng dụng phát triển, hãy thêm các story mới, ghi lại các phiên bản và duy trì một danh sách các component đã được phê duyệt. ## Kết luận Một hệ thống component được thiết kế cẩn thận, được hỗ trợ bởi TypeScript và được tài liệu hóa bằng Storybook sẽ đơn giản hóa quá trình phát triển đa nền tảng. Bằng cách đầu tư thời gian vào việc thiết lập cơ sở ngay từ đầu, các nhóm có thể duy trì giao diện người dùng đồng bộ, đẩy nhanh quá trình phát hành và giữ cho mã nguồn sạch sẽ và dễ bảo trì.