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

by Hieu Nguyen
1 comment 172 views

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.
[email protected] 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.
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.
[email protected] 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

[email protected] 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/*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.

Styleguidist server với react-docgen

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.

1 comment
11

1 comment

Duc Nguyen March 2, 2020 - 10:25 PM

Bài hay quá a

Reply

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.

You may also like

%d bloggers like this: