Frontend Academy · Pelajaran

Menggunakan Sistem Reka Bentuk

Pasang pustaka dalam aplikasi hos, gunakan penyedia tema, buang komponen yang tidak digunakan melalui tree-shaking, dan pastikan versi sentiasa dikemas kini.

Pelajaran 4 daripada 414 langkah

Menggunakan Sistem Reka Bentuk ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Pemasangan dan Persediaan

Tambahkan sistem reka bentuk sebagai kebergantungan. Sesetengah pustaka memerlukan persediaan tambahan: penyedia, pengimportan CSS dan pemuatan fon.

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>

Penyedia Tema

Kebanyakan sistem reka bentuk menawarkan penyedia peringkat teratas untuk tema (cerah/gelap), setempat dan konteks dikongsi. Balut aplikasi anda sekali sahaja.

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

Mengimport Komponen

Import hanya perkara yang anda perlukan — digabungkan dengan pengguguran kod tidak digunakan, hanya komponen yang digunakan akan disertakan.

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>
  );
}

Import Sub laluan

Sesetengah pustaka menyokong import sublaluan untuk kejelasan dan penjimatan himpunan.

// 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';

Petua Pengguguran Kod Tidak Digunakan

Pengguguran kod tidak digunakan membuang eksport yang tidak digunakan semasa pembungkusan. Keperluannya: binaan ESM, sideEffects: false dalam package.json pustaka dan import bernama dalam kod anda. Sahkan dengan penganalisis himpunan.

Menyesuaikan dengan Tema

Gantikan token tema supaya sepadan dengan jenama anda — tanpa membuat cabang pustaka.

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

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

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

Memperluas Komponen

Perlukan butang yang sedikit berbeza? Gabungkan komponen, jangan buat cabang.

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

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

Membaca CHANGELOG Sebelum Menaik Taraf

Sentiasa baca CHANGELOG sebelum menaik taraf versi MAJOR. Cari perubahan yang memutuskan keserasian, kodmod migrasi dan API baharu yang disyorkan.

Kodmod untuk Naik Taraf Utama

Pustaka yang baik menyediakan kodmod (skrip jscodeshift) untuk mengautomatikkan migrasi perubahan yang memutuskan keserasian.

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

Pengepinan berbanding Simbol Caret

"^1.4.2" membenarkan naik taraf 1.x.y — berisiko jika pustaka melanggar SemVer. "1.4.2" mengepin versi dengan tepat — paling selamat, tetapi anda perlu mengemas kininya secara manual. Renovate/Dependabot membantu mengautomatikkan kemas kini mingguan.

Melaporkan Isu kepada Projek Asal

Menemui pepijat? Hantar isu dengan penghasilan semula yang minimum. Perlukan ciri? Mulakan dengan membuka perbincangan. Menyumbang semula membantu membaiki sistem reka bentuk untuk semua orang.

Mengelakkan Penggantian Gaya

Jangan menyentuh bahagian dalaman sistem reka bentuk menggunakan !important atau pemilih anak turun. Gunakan API tema awam. Penggantian secara kasar akan rosak pada naik taraf seterusnya.

Semakan Ringkas

Jika sistem reka bentuk menggunakan ESM dan eksport bernama, apakah cara paling kemas untuk menggunakan hanya komponen yang anda perlukan?

Jawab dalam pelajaran interaktif

Ringkasan: Menggunakan Sistem Reka Bentuk

Pasang dan balut dengan DesignSystemProvider serta tema. Gunakan import ESM bernama untuk pengguguran pepohon. Gantikan token tema untuk jenama anda. Gabungkan komponen, jangan buat cabang. Baca CHANGELOG sebelum naik taraf MAJOR; jalankan kodmod jika disediakan. Gunakan pengepinan atau simbol caret dengan berhati-hati. Laporkan pepijat atau hantar permintaan tarik kepada projek asal. Jangan menggunakan !important untuk memintas API awam.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menggunakan Sistem Reka Bentuk” percuma?

Ya — teks penuh “Menggunakan Sistem Reka Bentuk” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menggunakan Sistem Reka Bentuk”?

Pasang pustaka dalam aplikasi hos, gunakan penyedia tema, buang komponen yang tidak digunakan melalui tree-shaking, dan pastikan versi sentiasa dikemas kini. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Menggunakan Sistem Reka Bentuk” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Storybook: Stories, Kawalan dan Dokumentasi
Token Reka Bentuk dengan Style Dictionary
Pemberian Versi dan Penerbitan ke npm
Menggunakan Sistem Reka Bentuk

← Kembali ke Frontend Academy