Mentionsy Mentionsy
Subiektywny Frontend
Subiektywny Frontend

Komponenty z żelaza. Pisz komponenty jak Google - Frontendowa Siłka

16.10.2025 ·16 min 50 s

🏋️‍♀️ W tym odcinku Frontendowej Siłki bierzemy na warsztat kompozycję komponentów, inspirowaną Angular Material. Jak budować elastyczne, skalowalne UI bez przeładowania logiką? Czym jest dobra “technika kodowania” i dlaczego warto ją trenować?Daj znać w komentarzu, jak Ty podchodzisz do kompozycji komponentów – i czy Twoje UI ma formę!Subskrybuj, żeby nie przegapić kolejnych treningów!

Siemaneczko, Frontendowe Świry. Witamy Was na Frontendowej Siłce. Ja nazywam się Aleksander Lubych. Ja nazywam się Jakub Pawlak. Lecimy! Dzisiaj będziemy dalej wchodzić w temat naszego projektu, a zajmiemy się dzisiaj naszym UI-komponentem, który rozpoczęliśmy w ostatnim odcinku. No i co będziemy robić? Mamy taki prosty budge, mamy taki prosty status component i pojawiło się wymaganie, że mamy dodać nowy status. No dobra, no to co byśmy zrobili tak by default? Zapewne to wygląda dla Was znajomo, czyli mamy jakieś dwa inputy. Jestem teraz aktualnie w UI komponencie, mam dwa inputy.

No ale tak, mamy labelkę, mamy wariant. No dobra, więc dodajemy kolejny status, wariant. No to jakbyśmy chcieli go dodać, to trzeba by było zrobić następujące rzeczy. Musielibyśmy dodać tutaj kolejny typ, więc załóżmy, że jakieś info, a nie, przepraszam, info już mamy, WARN. Do tego musimy oczywiście ten nasz komponent rozszerzyć, porozszerzać, więc już modyfikujemy UIComponent. Następnie wchodzimy w HTML. Tutaj musimy dodać nowego case'a. OK. I labelka, na szczęście labelki nie zmieniamy. No dobra, ale... Oczywiście to jest taki trochę prosty przykład, ale...

Pokazano wszystkie 2 dopasowania. Transkrypcja generowana automatycznie i niesprawdzana ręcznie — może zawierać błędy.