Khi phát triển các ứng dụng React trên nhiều nền tảng, việc duy trì thiết kế nhất quán và tái sử dụng mã là một thách thức phổ biến. Xây dựng một hệ thống thành phần giao diện người dùng (UI) chung cho React Web và React Native không chỉ giúp tiết kiệm thời gian mà còn đảm bảo trải nghiệm người dùng mượt mà trên cả hai nền tảng. Dưới đây là hướng dẫn từng bước với các ví dụ thực tế, cấu trúc rõ ràng và các lời khuyên có thể áp dụng ngay. **1. Xác định các nguyên tắc thiết kế cốt lõi** Bắt đầu bằng cách xác định các yếu tố trực quan cơ bản: bảng màu, kiểu chữ, khoảng cách và các thành phần nguyên tử (ví dụ: Button, Input, Card). Tài liệu các quy tắc này trong một tệp thiết kế đơn giản. Việc sử dụng cùng một ngôn ngữ thiết kế (design tokens) giúp các nhà phát triển dễ dàng áp dụng các thay đổi trên toàn bộ hệ thống mà không cần chỉnh sửa từng thành phần. **2. Tạo một thư viện component chia sẻ** Sử dụng một gói Node.js duy nhất (ví dụ: `@myorg/ui-components`) để lưu trữ tất cả các thành phần. Tận dụng ES6 modules và export type từ TypeScript để đảm bảo tính nhất quán giữa các nền tảng. ```javascript // @myorg/ui-components/src/Button.tsx export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: 'primary' | 'secondary'; } export const Button = ({ variant = 'primary', children, ...props }: ButtonProps) => ( <button className={`btn btn-${variant}`} {...props}>{children}</button> ); ``` **3. Tận dụng các mã thông báo thiết kế chung** Xuất các mã thông báo thiết kế từ một tệp duy nhất và tham chiếu đến chúng trong cả React Web và React Native. Ví dụ: ```javascript // design-tokens.js export const colors = { primary: '#0d6efd', secondary: '#6c757d', }; ``` **4. Xây dựng lớp bao bọc nền tảng** Tạo một lớp wrapper mỏng cho từng nền tảng (ví dụ: `web/` và `native/`). Lớp wrapper này sẽ ánh xạ các thuộc tính của thành phần chung sang API cụ thể của từng nền tảng. ```javascript // web/Button.tsx import { Button as SharedButton } from '@myorg/ui-components'; export const Button = (props) => <SharedButton {...props} />; ``` **5. Triển khai hooks tùy chỉnh cho các tác vụ phổ biến** Sử dụng hooks tùy chỉnh để xử lý các tác vụ như xử lý form, validation và quản lý trạng thái. Việc chia sẻ hooks giúp giảm thiểu sự trùng lặp trong logic. ```javascript // hooks/useForm.ts export const useForm = (initialValues) => { ... }; ``` **6. Thiết lập quy trình thử nghiệm liên tục** Thêm các kịch bản kiểm tra giao diện người dùng tự động cho từng nền tảng (ví dụ: Cypress cho web, React Native Testing Library cho ứng dụng di động). Việc chạy thử nghiệm thường xuyên giúp phát hiện sớm các sự cố về giao diện người dùng. **7. Tài liệu và hướng dẫn sử dụng** Sử dụng Storybook để tạo các câu chuyện cho từng thành phần. Việc tách biệt các câu chuyện theo nền tảng giúp các nhà phát triển xem trước giao diện người dùng trên cả web và thiết bị di động. **Lời khuyên thực tế** - **Tái sử dụng các hooks**: Các hooks quản lý trạng thái (ví dụ: `useLocalStorage`) hoạt động trên cả hai nền tảng, do đó hãy chia sẻ chúng. - **Tránh các thành phần phụ thuộc nền tảng**: Nếu một thành phần chỉ hoạt động trên web (ví dụ: sử dụng `window`), hãy bọc nó trong một thành phần thay thế an toàn cho React Native. - **Tận dụng các công cụ xây dựng được chia sẻ**: Sử dụng Webpack hoặc Metro với một cấu hình duy nhất để biên dịch mã của thư viện, giúp giảm thời gian thiết lập. - **Kiểm tra chéo thường xuyên**: Sau mỗi lần thay đổi giao diện người dùng, hãy chạy thử nghiệm trên cả hai nền tảng để đảm bảo giao diện người dùng vẫn đồng bộ. Bằng cách tuân theo các bước này, nhóm của bạn có thể xây dựng một hệ thống thành phần giao diện người dùng chung, giúp đẩy nhanh quá trình phát triển và duy trì giao diện người dùng ứng dụng React trên web và di động đồng nhất và dễ bảo trì.