สร้าง Component แรกด้วย Bit

ในบทความที่แล้ว เราได้ทำความรู้จักกับ Bit และ Storybook ซึ่งเป็น Component Framework ที่ช่วยให้การพัฒนา UI Component เป็นเรื่องง่ายและมีประสิทธิภาพ ในบทความนี้ เราจะมาลงมือสร้าง Component แรกด้วย Bit พร้อมทั้งเรียนรู้วิธีการ publish Component ไปยัง Bit Cloud เพื่อให้ Component ของเราสามารถนำไปใช้ซ้ำได้ในหลายโปรเจกต์

การติดตั้ง Bit

ก่อนอื่น เราต้องติดตั้ง Bit CLI (Command Line Interface) ก่อน ซึ่งสามารถทำได้ง่ายๆ ผ่าน npm หรือ yarn

npm install -g @teambit/cli
# หรือ
yarn global add @teambit/cli

หลังจากติดตั้งเสร็จแล้ว ให้ตรวจสอบว่า Bit ทำงานได้ถูกต้องโดยการรันคำสั่ง:

bit --version

หากแสดงเวอร์ชันของ Bit แสดงว่าการติดตั้งสำเร็จเรียบร้อย

ข้อผิดพลาดที่พบบ่อย:

command not found: bit: ตรวจสอบให้แน่ใจว่า npm หรือ yarn ถูกตั้งค่าให้เพิ่ม node_modules/.bin ลงใน PATH environment variable แล้ว หรือลองรีสตาร์ท terminal
Permission errors: บางครั้งการติดตั้ง global package อาจต้องใช้สิทธิ์ administrator (sudo บน Linux/macOS)

การสร้าง Workspace และ Component

Bit ทำงานโดยอาศัยสิ่งที่เรียกว่า "Workspace" ซึ่งเป็นเหมือนคอนเทนเนอร์สำหรับ Component ต่างๆ ที่เราต้องการจัดการ เราจะเริ่มต้นด้วยการสร้าง Workspace ใหม่

เริ่มจากสร้างโฟลเดอร์สำหรับโปรเจกต์ของคุณก่อน:

mkdir my-bit-project
cd my-bit-project

จากนั้น Initialise Bit Workspace:

bit init

คำสั่งนี้จะสร้างไฟล์ .bit และ workspace.jsonc ในโฟลเดอร์โปรเจกต์ ซึ่งเป็นไฟล์ configuration หลักของ Bit

ต่อมาเราจะสร้าง Component แรกของเรา ซึ่งจะเป็นปุ่มง่ายๆ กันก่อน สมมติว่าเราใช้ React ในโปรเจกต์นี้

สร้างโฟลเดอร์ components ภายในโปรเจกต์ และสร้างไฟล์ button.jsx ภายในโฟลเดอร์ components:

mkdir components
cd components
touch button.jsx

ใส่โค้ด React ต่อไปนี้ลงในไฟล์ button.jsx:

import React from 'react';

function Button({ children, onClick }) {
  return (
    <button onClick={onClick} style={{ padding: '10px 20px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>
      {children}
    </button>
  );
}

export default Button;

ตอนนี้เรามี Component Button แล้ว แต่ Bit ยังไม่รู้ว่ามี Component นี้อยู่ เราต้อง "track" Component นี้ก่อน โดยใช้คำสั่ง:

bit add components/button.jsx

คำสั่งนี้จะบอกให้ Bit ติดตามการเปลี่ยนแปลงในไฟล์ button.jsx และเตรียมพร้อมสำหรับการ publish

กรณีใช้งานจริง: สมมติว่าเราต้องการสร้าง Component input ที่มี label และ validation เราสามารถสร้างไฟล์ input.jsx และ input.module.css (สำหรับ styling) แล้วใช้คำสั่ง bit add เพื่อ track ทั้งสองไฟล์พร้อมกัน:

bit add components/input.jsx components/input.module.css

การทดสอบ Component

ก่อนที่จะ publish Component เราควรทดสอบเพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้อง Bit มีระบบ testing ในตัว แต่เราจะใช้ Jest ซึ่งเป็น testing framework ที่ได้รับความนิยม

ติดตั้ง Jest และ @testing-library/react:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom
# หรือ
yarn add -D jest @testing-library/react @testing-library/jest-dom

สร้างไฟล์ button.test.jsx ในโฟลเดอร์ components:

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Button from './button';

test('renders button with correct text', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

test('calls onClick handler when button is clicked', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  fireEvent.click(buttonElement);
  expect(handleClick).toHaveBeenCalledTimes(1);
});

เพิ่ม script สำหรับรัน test ใน package.json:

{
  "scripts": {
    "test": "jest"
  }
}

รัน test:

npm test
# หรือ
yarn test

หาก test ผ่านหมด แสดงว่า Component ของเราทำงานได้อย่างถูกต้อง

ข้อผิดพลาดที่พบบ่อย:

Module not found: ตรวจสอบให้แน่ใจว่า dependencies ที่จำเป็น (เช่น react, @testing-library/react) ถูกติดตั้งแล้ว
Test failed: อ่าน error message อย่างละเอียดเพื่อทำความเข้าใจว่า test ไหนล้มเหลวและแก้ไขโค้ดให้ถูกต้อง

การ Publish Component ไปยัง Bit Cloud

ขั้นตอนสุดท้ายคือการ publish Component ไปยัง Bit Cloud เพื่อให้ Component ของเราสามารถนำไปใช้ซ้ำได้ในโปรเจกต์อื่นๆ

ก่อนอื่น คุณต้องสร้างบัญชี Bit Cloud ฟรีที่ bit.dev

หลังจากสร้างบัญชีแล้ว ให้ login เข้าสู่ Bit Cloud ผ่าน CLI:

bit login

Bit จะเปิด browser ให้คุณ login และ authorize CLI

จากนั้นสร้าง Scope ใน Bit Cloud ซึ่งเป็นเหมือน repository สำหรับ Component ของคุณ ตั้งชื่อ Scope ให้สื่อความหมาย เช่น my-username.my-components (เปลี่ยน my-username เป็น username ของคุณ)

Tag Component เพื่อเตรียมพร้อมสำหรับการ publish:

bit tag --message "Initial version"

คำสั่งนี้จะสร้าง tag สำหรับ Component ที่เรา track ไว้

สุดท้าย Publish Component ไปยัง Bit Cloud:

bit export my-username.my-components

เปลี่ยน my-username.my-components เป็นชื่อ Scope ที่คุณสร้างไว้

Bit จะทำการ bundle Component และ dependencies ที่จำเป็น และ upload ไปยัง Bit Cloud

หลังจาก publish สำเร็จ คุณจะสามารถเข้าไปดู Component ของคุณใน Bit Cloud และ install ลงในโปรเจกต์อื่นๆ ได้

ข้อผิดพลาดที่พบบ่อย:

Authentication errors: ตรวจสอบให้แน่ใจว่าคุณได้ login เข้าสู่ Bit Cloud อย่างถูกต้อง
Scope not found: ตรวจสอบให้แน่ใจว่า Scope ที่คุณระบุมีอยู่จริงใน Bit Cloud
Dependencies missing: ตรวจสอบให้แน่ใจว่า dependencies ทั้งหมดของ Component ถูกติดตั้งและ track ไว้

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีการสร้าง Component ง่ายๆ ด้วย Bit ตั้งแต่การติดตั้ง Bit CLI การสร้าง Workspace การสร้างและ track Component การทดสอบ Component และการ publish Component ไปยัง Bit Cloud กระบวนการเหล่านี้จะช่วยให้คุณสร้าง Component ที่สามารถนำไปใช้ซ้ำได้ในหลายโปรเจกต์ ทำให้การพัฒนา UI เป็นเรื่องง่ายและมีประสิทธิภาพมากยิ่งขึ้น

ในบทความถัดไป เราจะมาเรียนรู้วิธีการสร้าง Component ด้วย Storybook ซึ่งเป็นอีกหนึ่ง Component Framework ที่ได้รับความนิยม