Frontend Academy · Lekcja

Korzystanie z systemu projektowego

Zainstaluje Pan/Pani bibliotekę w aplikacji hostującej, zastosuje dostawcę motywu, usunie nieużywane komponenty za pomocą tree-shakingu i będzie aktualizować bibliotekę do nowszych wersji.

Korzystanie z systemu projektowego to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Instalacja i konfiguracja

Należy dodać system projektowy jako zależność. Niektóre biblioteki wymagają dodatkowej konfiguracji: providera, importu CSS lub wczytania czcionek.

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

Większość systemów projektowych oferuje provider najwyższego poziomu dla motywu (jasnego/ciemnego), lokalizacji i współdzielonego kontekstu. Należy jednorazowo opakować nim aplikację.

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

Importowanie komponentów

Należy importować tylko to, czego potrzeba — w połączeniu z tree-shakingiem do bundla trafią wyłącznie używane komponenty.

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

Importy podścieżek

Niektóre biblioteki obsługują importy podścieżek, co poprawia czytelność i zmniejsza rozmiar bundla.

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

Wskazówki dotyczące tree-shakingu

Tree-shaking usuwa nieużywane eksporty podczas budowania bundla. Wymaga: kompilacji ESM, sideEffects: false w pliku package.json biblioteki oraz importów nazwanych w kodzie. Wynik należy zweryfikować za pomocą analizatora bundla.

Dostosowywanie za pomocą motywu

Należy nadpisać tokeny motywu, aby dopasować go do marki — bez tworzenia forka biblioteki.

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

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

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

Rozszerzanie komponentów

Potrzebny jest przycisk, który nieco się różni? Należy go komponować, a nie tworzyć forka.

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

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

Czytanie dziennika zmian przed aktualizacją

Przed aktualizacją do wersji MAJOR zawsze należy przeczytać CHANGELOG. Należy zwrócić uwagę na zmiany powodujące niezgodność, codemody migracyjne i zalecane nowe API.

Codemody do dużych aktualizacji

Dobre biblioteki dostarczają codemody (skrypty jscodeshift), które automatyzują migracje związane ze zmianami powodującymi niezgodność.

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

Wersja przypięta a caret

"^1.4.2" pozwala na aktualizacje w ramach wersji 1.x.y — jest to ryzykowne, jeśli biblioteka nie przestrzega SemVer. "1.4.2" przypina dokładnie tę wersję — to najbezpieczniejsze rozwiązanie, ale aktualizacje trzeba wykonywać ręcznie. Renovate i Dependabot pomagają automatyzować cotygodniowe aktualizacje wersji.

Zgłaszanie problemów upstream

Znaleziono błąd? Należy zgłosić problem z minimalnym przykładem odtwarzającym błąd. Potrzebna jest nowa funkcja? Najpierw należy rozpocząć dyskusję. Wprowadzanie poprawek upstream ulepsza system projektowy dla wszystkich.

Unikanie nadpisywania stylów

Nie należy sięgać do elementów wewnętrznych systemu projektowego za pomocą !important ani selektorów potomnych. Należy używać publicznego API motywu. Nietrwałe nadpisania przestaną działać po następnej aktualizacji.

Szybkie sprawdzenie

Jeśli system projektowy korzysta z ESM i eksportów nazwanych, jaki jest najczystszy sposób użycia tylko potrzebnych komponentów?

Podsumowanie: korzystanie z systemu projektowego

Należy zainstalować bibliotekę i opakować aplikację w DesignSystemProvider z motywem. Nazwane importy ESM umożliwiają tree-shaking. Tokeny motywu można nadpisać, aby dopasować go do marki. Należy komponować, a nie tworzyć forka. Przed aktualizacjami MAJOR trzeba przeczytać CHANGELOG i uruchomić dostarczone codemody. Z wersji przypiętych i caret należy korzystać ostrożnie. Błędy i PR-y należy zgłaszać upstream. Nie należy obchodzić publicznego API za pomocą !important.

Często zadawane pytania

Czy lekcja „Korzystanie z systemu projektowego” jest bezpłatna?

Tak — pełny tekst „Korzystanie z systemu projektowego” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Korzystanie z systemu projektowego”?

Zainstaluje Pan/Pani bibliotekę w aplikacji hostującej, zastosuje dostawcę motywu, usunie nieużywane komponenty za pomocą tree-shakingu i będzie aktualizować bibliotekę do nowszych wersji. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Korzystanie z systemu projektowego”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy