Tự tạo một react component và publish lên NPM

Tự tạo một react component và publish lên NPM

Chắc hẳn tất cả mọi người khi làm việc với React JS đều phải biết tới NPM, đây thật sự là một công cụ tuyệt vời để quản lý các thư viện mã nguồn mở trong thế giới Javascript nói chung và React JS nói riêng. Vậy làm thế nào để publish một component của riêng mình lên NPM?

Việc chia tách một ứng dụng lớn thành những component nhỏ hơn sẽ giúp chúng ta quản lý code được tốt hơn, cũng như có thể tái sử dụng lại được nhiều lần. Đặc biệt là trong React JS thì việc này lại càng thật sự cần thiết, cách thông thường chúng ta hay làm là sẽ copy code của các component hay sử dụng đi sử dụng lại vào cất ở đâu đó và khi cần thì copy ra xài. Thay vì phải thực hiện thủ công như vậy thì chúng ta có 1 cách khác hay hơn là đóng gói component đó lại và publish nó lên NPM để khi cần chỉ cần 1 lệnh install là xong!

Chúng ta có thể publish lên NPM ở chế độ private để chỉ có mình sử dụng thôi hoặc chế độ public để chia sẻ cho cộng đồng cùng sử dụng. Sau khi tìm hiểu qua một số hướng dẫn trên internet thì tôi thấy có một thư viện hỗ trợ thực hiện việc này khá tốt và cũng dễ sử dụng. Thư viện đó tên là create-react-library, nó là một CLI nhỏ gọn giúp chúng ta dễ dàng tạo ra một React component có thể tái sử dụng thông qua NPM.

Cách sử dụng

Để publish một package mới lên NPM trước tiên chúng ta cần truy cập vào đường dẫn https://www.npmjs.com/ và search thử tên package mà chúng ta định publish có trùng với ai khác chưa, nếu có thì hãy chọn 1 tên khác.

Tiếp theo ta mở terminal lên và sử dụng lệnh sau để khởi tạo một React component

1
npx create-react-library <your-package-name>

Ví dụ trong bài hướng dẫn này tôi sẽ tạo một Flashcard component, vì vậy tôi sẽ khởi tạo như sau:

1
npx create-react-library react-flashcard

Chúng ta tiến hành nhập vào các thông tin cần thiết để khởi tạo package để publish lên NPM. Sau khi nhập đầy đủ các thông tin theo yêu cầu thì một thư mục react-flashcard được sinh ra tự động từ create-react-library, đây chính là cấu trúc thư mục được tạo sẵn để chúng ta viết React component và đóng gói theo đúng chuẩn của NPM.

Tiếp theo chúng ta mở 2 cửa sổ terminal lên, một bên sẽ để chạy lệnh sau để theo dõi sự thay đổi code trong thư mục src và rebuild lại mỗi khi chúng ta lập trình cho React component này.

1
cd react-flashcard && npm start

Và cửa sổ còn lại sẽ chạy một ứng dụng React với component mà chúng ta đang viết được nhúng sẵn vào trong đó.

1
2
cd react-flashcard
cd example && npm start

Đây là code mẫu cho package react-flashcard của tôi: https://github.com/ozuit/react-flashcard

Publish lên NPM

Sau khi đã hoàn tất component React của mình rồi thì chúng ta cần login vào npm từ terminal của mình để có thể publish lên cloud bằng cách chạy câu lệnh sau:

1
npm adduser

Login vào bằng tài khoản NPM của mình (click vào đây để đăng ký nếu chưa có tài khoản). Sau khi login thành công thì chỉ cần chạy tiếp lệnh bên dứoi để publish package của mình lên NPM ở chế độ private

1
npm publish

hoặc chạy lệnh sau để publish lên NPM ở chế độ public

1
npm publish --access=public

Đây là package của tôi sau khi được publish lên NPM: https://www.npmjs.com/package/react-flashcard

Deploy demo

Một điểm thú vị nữa ở thư viện create-react-library là nó cho phép chúng ta có thể deploy nhanh một demo cho React component mà chúng ta vừa tạo lên Github page thông qua câu lệnh bên dưới:

1
npm run deploy

Đây là demo Flashcard component của tôi: https://ozuit.github.io/react-flashcard/

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×