[React] Tôi đã tạo thư viện React Component như thế nào

Trong bài viết này tôi sẽ hướng dẫn các bạn tạo ra một thư viện component của riêng mình. Bạn cũng có thể public thư viện nếu thích. Nhiều bạn sẽ tự hỏi rằng có nhiều thư viện lắm rồi thì viết thêm làm chi. Mục đích mình viết bài này để có thể tự tạo ra một package gồm những common component có thể sử dụng lại được. Kết hợp với việc dùng mono repository gồm nhiều packages trong yarn workspaces, các bạn có thể tách code của mình thành các package cho dễ quản lý. Chúng ta cùng bắt đầu nhé.

Thêm các dependencies cần thiết

• react & react-dom React component mà nên cần 2 thư viện này là đương nhiên rồi.

hieunv@HieuNV uikit % yarn add react react-dom
yarn add v1.22.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
├─ [email protected]
└─ [email protected]
info All dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 7.91s.

• react-styleguidist

yarn add v1.22.0
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
✨  Done in 15.05s.

• react-scripts

hieunv@HieuNV uikit % yarn add react-scripts -D
yarn add v1.22.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
✨  Done in 41.42s.

Chúng ta sẽ sử dụng webpack config đã được config trong react-scripts

Cấu hình styleguidist

styleguidist.config.js

module.exports = {
  propsParser: require('react-docgen').parse,
  webpackConfig: require('react-scripts/config/webpack.config')
};

Thêm script run styleguidist

package.json

{
  "name": "uikit",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "npx styleguidist server"
  },
  "devDependencies": {
    "react-scripts": "^3.4.0",
    "react-styleguidist": "^10.6.2"
  },
  "dependencies": {
    "react": "^16.13.0",
    "react-dom": "^16.13.0"
  }
}

Khởi động dev server thôi nào

hieunv@HieuNV uikit % yarn dev
yarn run v1.22.0
$ npx styleguidist server
Loading webpack config from:
/Users/hieunv/Projects/hieunv/uikit/node_modules/react-scripts/config/webpack.config.js

ℹ ｢wds｣: Project is running at http://localhost:6060/
ℹ ｢wds｣: webpack output is served from undefined
ℹ ｢wds｣: Content not from webpack is served from /Users/hieunv/Projects/hieunv/uikit
You can now view your style guide in the browser:

  Local:            http://localhost:6060/
  On your network:  http://192.168.1.11:6060/

Sau khi khởi động server xong các bạn truy cập và link http://192.168.1.11:6060/

Do chưa có component nào được định nghĩa nên các bạn sẽ nhận được thông báo như trên.

Bắt đầu viết component đầu tiên thôi nào

styleguidist sẽ tự động đọc các components trong thư mục src/components/* và README.md trong thư mục component tương ứng để generate ra document sử dụng react-docgen trên styleguidist server

src/component/Button/Button.jsx

module.exports = {
  propsParser: require('react-docgen').parse,
  webpackConfig: require('react-scripts/config/webpack.config')
};

src/component/Button/README.md

<Button>Test Button</Button>

Chúng ta truy cập lại vào http://192.168.1.11:6060/ sẽ thấy component được sử dụng để test và có cả document nữa luôn.

Export component ra bên ngoài để có thể sử dụng ở package khác

src/index.js

export * from './components/Button/Button';

Cám ơn các bạn đã theo dõi bài viết. Hy vọng bài viết sẽ giúp ích cho các dự án của bạn.