Frontend Academy · บทเรียน

การใช้งานระบบการออกแบบ

ติดตั้งไลบรารีในแอปโฮสต์ ใช้ตัวให้บริการธีม ตัดคอมโพเนนต์ที่ไม่ได้ใช้ออกด้วย tree-shaking และอัปเดตให้ทันเวอร์ชันใหม่อยู่เสมอ

การใช้งานระบบการออกแบบ เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

การติดตั้งและการตั้งค่า

เพิ่มระบบออกแบบเป็น dependency บางไลบรารีต้องตั้งค่าเพิ่มเติม เช่น provider การนำเข้า CSS และการโหลดฟอนต์

npm install @yourorg/design-system

// app/layout.tsx (or main.tsx)
import '@yourorg/design-system/dist/tokens.css';
import { DesignSystemProvider } from '@yourorg/design-system';

<DesignSystemProvider theme="light">
  <App />
</DesignSystemProvider>

Theme Provider

ระบบออกแบบส่วนใหญ่มี provider ระดับบนสุดสำหรับธีม (สว่าง/มืด) ภาษา และบริบทที่ใช้ร่วมกัน ให้ห่อแอปของคุณเพียงครั้งเดียว

<DesignSystemProvider
  theme={isDarkMode ? darkTheme : lightTheme}
  locale="en"
>
  <App />
</DesignSystemProvider>

การนำเข้า components

นำเข้าเฉพาะสิ่งที่ต้องใช้ — เมื่อทำงานร่วมกับ tree-shaking แล้ว จะส่งมอบเฉพาะ components ที่ใช้งานจริง

import { Button, Card, TextField } from '@yourorg/design-system';

function LoginForm() {
  return (
    <Card>
      <TextField label="Email" type="email" />
      <TextField label="Password" type="password" />
      <Button variant="primary">Sign In</Button>
    </Card>
  );
}

การนำเข้าผ่านเส้นทางย่อย

ไลบรารีบางรายการรองรับการนำเข้าผ่านเส้นทางย่อย เพื่อให้โค้ดชัดเจนขึ้นและลดขนาดชุดรวม

// Subpath (e.g., MUI):
import Button from '@yourorg/design-system/Button';
import Card   from '@yourorg/design-system/Card';

// Tree-shakeable named exports also work for ESM:
import { Button, Card } from '@yourorg/design-system';

เคล็ดลับการทำ Tree-shaking

Tree-shaking จะลบการส่งออกที่ไม่ได้ใช้ระหว่างการรวมโค้ด โดยต้องมี: การสร้างแบบ ESM, sideEffects: false ใน package.json ของไลบรารี และการนำเข้าแบบตั้งชื่อในโค้ดของคุณ ตรวจสอบด้วยเครื่องมือวิเคราะห์ชุดรวม

การปรับแต่งด้วยธีม

เขียนทับโทเคนของธีมให้เข้ากับแบรนด์ของคุณได้ โดยไม่ต้องแยกไลบรารีออกมา

import { defaultTheme } from '@yourorg/design-system';

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#ff5733'
  }
};

<DesignSystemProvider theme={customTheme}>
  <App />
</DesignSystemProvider>

การขยายส่วนประกอบ

ต้องการปุ่มที่แตกต่างออกไปเล็กน้อยใช่ไหม ให้ประกอบส่วนประกอบต่อยอดแทนการแยกไลบรารี

import { Button as DSButton } from '@yourorg/design-system';

function IconButton({ icon, ...props }) {
  return (
    <DSButton {...props}>
      <Icon name={icon} />
      {props.children}
    </DSButton>
  );
}

อ่าน CHANGELOG ก่อนอัปเกรด

อ่าน CHANGELOG ก่อนอัปเกรดเวอร์ชัน MAJOR เสมอ มองหาการเปลี่ยนแปลงที่ทำให้โค้ดเดิมใช้งานไม่ได้ โคดมอดสำหรับการย้ายระบบ และ API ใหม่ที่แนะนำ

โคดมอดสำหรับการอัปเกรดครั้งใหญ่

ไลบรารีที่ดีจะมีโคดมอด เช่น สคริปต์ jscodeshift เพื่อทำให้การย้ายระบบที่เกิดจากการเปลี่ยนแปลงสำคัญเป็นไปโดยอัตโนมัติ

npx @yourorg/design-system-codemod v2 src/
# automatically renames old prop names, updates imports, fixes deprecated APIs

การตรึงเวอร์ชันกับ Caret

"^1.4.2" อนุญาตให้อัปเกรดเป็นเวอร์ชัน 1.x.y ได้ ซึ่งมีความเสี่ยงหากไลบรารีไม่ปฏิบัติตาม SemVer ส่วน "1.4.2" จะตรึงไว้ที่เวอร์ชันนี้โดยเฉพาะ ปลอดภัยที่สุด แต่คุณต้องอัปเดตด้วยตนเอง Renovate และ Dependabot ช่วยทำให้การอัปเดตรายสัปดาห์เป็นแบบอัตโนมัติได้

รายงานปัญหาไปยังโครงการต้นทาง

พบข้อผิดพลาดใช่ไหม สร้างประเด็นพร้อมตัวอย่างที่ทำให้เกิดปัญหาแบบย่อ หากต้องการฟีเจอร์ ให้เปิดการสนทนาก่อน การส่งการแก้ไขกลับไปช่วยปรับปรุงระบบการออกแบบให้ทุกคน

หลีกเลี่ยงการเขียนทับสไตล์

อย่าเข้าถึงส่วนภายในของระบบการออกแบบด้วย !important หรือตัวเลือกองค์ประกอบสืบทอด ใช้ API สำหรับกำหนดธีมแบบสาธารณะ การเขียนทับแบบแก้ขัดจะใช้งานไม่ได้เมื่ออัปเกรดครั้งถัดไป

ตรวจสอบอย่างรวดเร็ว

หากระบบการออกแบบใช้ ESM และการส่งออกแบบระบุชื่อ วิธีที่สะอาดที่สุดในการนำเข้าเฉพาะส่วนประกอบที่ต้องใช้คืออะไร

สรุป: การใช้ระบบการออกแบบ

ติดตั้งแล้วครอบด้วย DesignSystemProvider พร้อมธีม ใช้การนำเข้า ESM แบบระบุชื่อเพื่อทำ tree-shaking เขียนทับโทเคนของธีมให้เข้ากับแบรนด์ ประกอบส่วนประกอบต่อยอดแทนการแยกไลบรารี อ่าน CHANGELOG ก่อนอัปเกรดครั้ง MAJOR และเรียกใช้โคดมอดหากมีให้ใช้ เลือกการตรึงเวอร์ชันหรือใช้ caret อย่างระมัดระวัง รายงานข้อผิดพลาดหรือส่งคำขอรวมการเปลี่ยนแปลงไปยังโครงการต้นทาง อย่าใช้ !important เพื่อหลีกเลี่ยง API สาธารณะ

คำถามที่พบบ่อย

บทเรียน “การใช้งานระบบการออกแบบ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การใช้งานระบบการออกแบบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การใช้งานระบบการออกแบบ”

ติดตั้งไลบรารีในแอปโฮสต์ ใช้ตัวให้บริการธีม ตัดคอมโพเนนต์ที่ไม่ได้ใช้ออกด้วย tree-shaking และอัปเดตให้ทันเวอร์ชันใหม่อยู่เสมอ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การใช้งานระบบการออกแบบ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy