docs-components

Skill zawiera kompletny katalog komponentów MDX używanych w dokumentacji React. Znajdziesz tu wzorce dla notek, ostrzeżeń o błędach, zaawansowanych wyjaśnień, diagramów, przepisów i wiele innych typów treści. Każdy komponent ma przypisaną rolę – od wskazówek terminologicznych po interaktywne przykłady kodu. Dokument zawiera też konwencje poziomów nagłówków i reguły formatowania dla każdego typu callout'u, aby dokumentacja była spójna i czytelna.

1. Zapoznaj się z tabelą decyzyjną (Component Decision Tree) – dla każdego rodzaju treści, którą chcesz dodać do dokumentacji, znajduje się tam odpowiedni komponent (Note dla wskazówek, Pitfall dla ostrzeżeń, DeepDive dla zaawansowanych wyjaśnień, Recipes dla zestawów przykładów, Challenges dla ćwiczeń na stronach Learn, Sandpack dla interaktywnego kodu, ConsoleBlock dla błędów konsoli).

2. Wybierz komponent pasujący do Twojej treści i sprawdź w tabeli konwencji nagłówków (Heading Level Conventions), jaki poziom nagłówka (h4 lub h5) należy użyć dla tego komponentu.

3. Pamiętaj o regułach formatowania callout'ów – zawsze dodaj pustą linię po otwarciu tagu komponentu, zanim zaczniesz pisać treść.

4. Unikaj umieszczania tych samych komponentów bezpośrednio jeden po drugim (np. dwa Pitfall'e lub dwie Note'i z rzędu) – połącz je w jeden komponent z podsekcjami lub oddziel je zwykłym tekstem, kodem lub nagłówkiem.

5. Wyjątkami są DeepDive'i (można je umieszczać kolejno dla wieloczęściowych wyjaśnień) oraz kombinacja Pitfall + DeepDive (DeepDive może wyjaśniać przyczynę ostrzeżenia).

6. Gdy dodajesz interaktywny kod, użyj komponentu Sandpack; dla diagramów użyj Diagram; dla błędów wyświetlanych w konsoli – ConsoleBlock.