Xin chào mọi người, ắt hẳn mọi người khi làm việc với React đã quá quen thuộc với việc cài đặt một component nào đó vào trong project hiện tại của mình. Vậy sẽ như thế nào nếu chúng ta tự tay làm 1 React component riêng của chúng ta và publish nó lên npm để mọi người có thể sử dụng.
Bài viết hôm nay của mình sẽ hướng dẫn cho các bạn cách tạo ra một React component của riêng mình.
Let’s Do It Yourself!

Trước khi bắt đầu, chúng ta cần lưu ý một số điều sau:

Bạn cần có kiến thức cơ bản về React để có thể hiểu được bài này
Để tạo và publish 1 React component bạn cần 3 bước sau:
- Tạo ra Component đó
- Tạo một project mà tại đó bạn có thể test component ở trên
- Publish nó lên npm

1. Tạo ra component và Test project

Ví dụ

Để bắt đầu, mình sẽ lấy ví dụ bằng việc là tạo ra 1 Component vô cùng đơn giản với tên là MyFancyButton. Như cái tên của nó, Component này sẽ tạo ra 1 Button mà bạn có thể custom giao diện thông bằng cách truyền Props vào trong nó.

Khởi tạo

Sau khi đã có ý tưởng, chúng ta sẽ bắt đầu bằng việc tạo project cho MyFancyButton bằng thư viện sau: create-react-library tại đây
Tải nó về máy bạn:

npm install -g create-react-library

Sau khi cài xong thì bạn sẽ dùng lệnh create-react-library <tên package> để tiến hành cài

create-react-library my-fancy-button

Tiếp theo bạn điền các câu trả lời để có thể tạo ra package tương ứng

Sau khi cài đặt xong bạn di chuyển vào thư mục vừa tạo (ở đây là my-fancy-button) bạn sẽ thấy các thư mục chính sau:

Trong đó:

src: là thư mục chứa source code của component
example: là thư mục chứa test project để bạn có thể test component của mình
rollup.config.js: là file chứa config để bạn build ra component.

Link component vào test project

Tiếp theo, sau khi tạo xong component và test project bạn cần link chúng lại với nhau để test project có thể import được component của bạn vào. Chúng ta cần làm 2 bước sau:

Bước 1: Tại thư mục gốc ta chạy lệnh npm run link hoặc yarn link
Bước 2: Di chuyển vào thư mục example và chạy lệnh npm link my-fancy-button. Lưu ý là tên package phải được lấy trong package.json của component chứ không phải tên của thư mục nhé.
Sau khi link thành công chúng ta kiểm tra bằng cách vào thư mục example và chạy lệnh npm run start. Mở http://localhost:3000/my-fancy-button, nếu thấy kết quả như sau thì bạn đã thành công và có thể tiếp tục.

Đây chính là UI mặc định khi khởi tạo component bằng create-react-library

Main part - Coding

Để làm cho thuận tiện mình sẽ mở 2 tab terminal, 1 tab là ở thư mục gốc và 1 tab cho thư mục của test project (ở đây là thư mục example)
Trong thư mục gốc, vào file src/index.js và sửa lại tên component của bạn như sau:

import React from 'react' import styles from './styles.module.css' export const MyFancyButton = ({ text }) => { return <div className={styles.test}>Example Component: {text} </div> }

Sau đó chạy lệnh npm run start để build component
Như đã nói ban đầu, component của mình là MyFancyButton nên mình sẽ đổi tên tương ứng. Tiếp đó ta chuyển qua test project, trong src/App.js ta sửa lại như sau

import React from 'react' import { MyFancyButton } from 'my-fancy-button' import 'my-fancy-button/dist/index.css' const App = () => { return <MyFancyButton text="Create React Library Example 😄" /> } export default App

Sau đó kiểm tra lại localhost thấy build bình thường là đã xong.
Đến lúc này bạn có thể thoải mái tạo ra component cho mình và export ra cho test project hiển thị là được.
Link cụ thể mình để tại đây cho các bạn tham khảo.
Như vậy là mình đã tiến hành xong phần coding và chạy thử. Các bạn có thể bổ sung thêm unit test và tiến hành cài đặt thêm CI-CD với travis-ci hoặc Circle CI nếu muốn. Những phần này nằm ngoài phạm vi của bài viết nên mình để cho các bạn tự tìm hiểu.

2. Publish lên npm

Sau khi đã hoàn thành xong Component thì mình bạn có thể tiến hành publish nó lên npm để mọi người có thể tải về dùng.
Các bước để làm như sau:

Bước 1: Đảm bảo rằng bạn đã tạo tài khoản trên npm. Nếu chưa có bạn có thể tạo tại đây
Bước 2: Login tại khoản npm của bạn bằng lệnh npm login
Bước 3: Tiến hành publish component bằng npm publish. Chờ process hoàn thành là bạn đã có publish component thành công trên npm

Kết

Mình vừa trình bày xong với các bạn cách để tạo ra một React component cho riêng mình. Hi vọng qua bài viết này bạn có thể tạo ra nhiều open-source component hữu ích và đóng góp cho cộng đồng.
Nếu các bạn thấy bài viết hay và hữu ích hãy chia sẻ cho mọi người. Nếu có ý kiến đóng góp thì đừng ngần ngại để lại comment bên dưới nhé.
Thanks.

Julian Dong

Do It Yourself - Tự tạo một React package đơn giản của bạn