Khi bạn phát triển ứng dụng React trên cả web và thiết bị di động, việc trùng lặp mã thành phần UI là điều rất phổ biến. Việc tạo một thư viện thành phần dùng chung giúp bạn tiết kiệm thời gian, đảm bảo tính nhất quán và đơn giản hóa quá trình bảo trì. Dưới đây là hướng dẫn thực tế để xây dựng thư viện có thể tái sử dụng cho cả React Web và React Native. **1. Xác định phạm vi và thiết kế các token** Trước tiên, hãy xác định các thành phần cốt lõi bạn muốn chia sẻ (ví dụ: Button, Input, Card). Xác định các thiết kế cơ bản như màu sắc, khoảng cách và phông chữ dưới dạng các token CSS hoặc JSON. Việc sử dụng các token giúp giao diện của ứng dụng web và ứng dụng di động luôn đồng bộ ngay cả khi chúng có các quy tắc tạo kiểu khác nhau. **2. Thiết lập dự án riêng biệt** Tạo một gói npm riêng (thường là "@myorg/ui") với các tệp cấu hình dành riêng cho TypeScript, ESLint và Prettier. Sử dụng thư mục "src/lib" để lưu trữ mã nguồn, trong khi thư mục "src/demo" có thể được sử dụng để phát triển giao diện người dùng. **3. Viết các thành phần một cách tương thích** - **Cấu trúc thành phần**: Sử dụng cấu trúc tệp index.ts để tái xuất, chẳng hạn như ./Button, ./Input. - **Tạo kiểu**: Đối với React Web, sử dụng styled-components hoặc Emotion. Đối với React Native, sử dụng StyleSheet từ React Native. Sử dụng các helper tạo kiểu có tên để ánh xạ các token một cách tự động. - **Props**: Xác định một interface TypeScript chung. Đối với các props chỉ dành riêng cho nền tảng (ví dụ: "multiline" cho TextInput), hãy sử dụng union type và các kiểm tra isPlatform để loại bỏ các props không cần thiết ở phía còn lại. **4. Tận dụng các hook tùy chỉnh** Tạo các hook dùng chung cho các tác vụ phổ biến như focus, kiểm tra giá trị và xử lý sự kiện. Ví dụ: hook useFocusAwareEffect có thể được sử dụng trong cả hai nền tảng mà không cần thay đổi mã. **5. Thiết lập quy trình kiểm thử** - **Kiểm thử đơn vị**: Sử dụng Jest và React Testing Library. Đối với React Native, bạn có thể sử dụng các thư viện kiểm thử tương thích. - **Kiểm thử tích hợp**: Sử dụng Storybook với các addon "@storybook/react" và "@storybook/react-native". Tạo các câu chuyện riêng biệt cho từng nền tảng để trực quan hóa các thay đổi giao diện. - **Kiểm thử tự động**: Thêm các bước kiểm tra vào CI (ví dụ: GitHub Actions) để đảm bảo rằng các kiểm thử thành phần vượt qua trước khi triển khai. **6. Xây dựng hệ thống tài liệu** Sử dụng các ghi chú Storybook hoặc hệ thống tài liệu dựa trên MDX. Bao gồm các mô tả về props, các trường hợp sử dụng phổ biến và các ghi chú về các khác biệt giữa các nền tảng (nếu có). **7. Quản lý phiên bản và phát hành** Sử dụng quy trình phát hành theo semver. Bắt đầu bằng cách sử dụng các thẻ phạm vi (feat, fix) để tự động tạo changelog. Triển khai thư viện lên npm (hoặc một registry nội bộ) và nhập nó vào cả hai dự án người dùng bằng lệnh "npm i @myorg/ui". **8. Lặp lại và mở rộng** Thu thập phản hồi từ cả nhóm phát triển web và di động. Thêm các thành phần mới dựa trên nhu cầu, đồng thời đảm bảo rằng các token thiết kế được cập nhật để duy trì sự đồng bộ giữa các nền tảng. Bằng cách tuân thủ các bước trên, bạn sẽ có một thư viện thành phần mạnh mẽ, có thể tái sử dụng, giúp giảm thiểu công sức trùng lặp, cải thiện tính nhất quán về giao diện và tăng tốc độ phát triển sản phẩm trên nhiều nền tảng React.