Komponenty React 101: Tworzenie ponownie używalnych i łatwych w utrzymaniu elementów interfejsu użytkownika
Dowiedz się, dlaczego dzielenie interfejsów użytkownika na małe komponenty React poprawia możliwości ponownego użycia, czytelność oraz współpracę zespołu, a następnie stwórz swój pierwszy funkcjonalny komponent.
Znany scenariusz dla każdego dewelopera frontendu
Wyobraź to sobie: to twoje pierwsze tygodnie w nowej firmie start-up.
Twój menedżer podchodzi do twojego biurka i mówi ci:
"Strona główna musi być gotowa do piątku."
Otwierasz projekt w Figma.
Zawiera on następujące sekcje:
- Menü nawigacyjne u góry
- Wielki baner główny
- Pole do wyszukiwania
- Prezentacja produktów wyróżnionych
- Sekcja z opiniami klientów
- Tabela cen
- Blok z najczęściej zadawanymi pytaniami
- Formularz do subskrypcji newslettera
- Stopka strony
Zadanie wydaje się dość proste.
Tworzysz pojedynczy plik HTML i zaczynasz budować każdą sekcję po kolei.
Do piątku wszystko jest gotowe.
Wszystko działa poprawnie.
Jesteś z tego powodu bardzo zadowolony.
Miesiąc później produkt się rozwinął.
Zespół marketingu chce nowego projektu banera.
Dizajnerzy przerabiają pasek nawigacyjny.
Zespół produktowy chce dodatkowej sekcji z opcjami cenowymi.
Oceny klientów muszą teraz ładować się dynamicznie.
Zanim się zorientujemy, ten jeden plik osiągnął już ponad 2000 wierszy.
Znalezienie pojedynczego przycisku zamienia się w poszukiwania w labiryncie kodu.
Gorzej jeszcze – niewielka modyfikacja jednej części strony może całkowicie zepsuć coś zupełnie innego.
Czy to brzmi znajomo?
To właśnie ten problem skłonił programistów do poszukiwania innej metody budowania interfejsów.
Zamiast tworzyć jedną ogromną stronę, co jeśli zbudujesz ją z wielu małych, ponownie używalnych elementów?
W React te elementy nazywane są komponentami.
Dlaczego jeden ogromny plik się rozpada
Załóżmy typową stronę internetową stworzoną w tradycyjny sposób.
Homepage.html
---------------------------------------------------
Navigation
Hero Section
Featured Products
About Us
Testimonials
Pricing
FAQ
Newsletter
Footer
---------------------------------------------------
Każda część strony znajduje się w tym jednym pliku.
Gdy projekt rośnie, zauważysz:
- Rozmiar pliku stale rośnie.
- Praca zespołowa staje się trudniejsza.
- Nic nie może być naprawdę ponownie wykorzystane.
- Błędy zaczynają pojawiać się częściej.
- Konserwacja kodu staje się wyczerpująca.
A teraz spójrz, jak React radzi sobie z tą samą stroną.
App
│
├── Navbar
├── Hero
├── Products
│ ├── ProductCard
│ ├── ProductCard
│ └── ProductCard
├── Testimonials
├── FAQ
└── Footer
Zamiast pakować wszystko do jednego pliku, każda sekcja staje się samodzielną, zamkniętą jednostką.
Ten wzorzec nazywany jest architekturą opartą na komponentach.
Definicja komponentu React
W istocie komponent to nic innego jak ponownie wykorzystywany fragment interfejsu użytkownika.
Możesz go postrzegać jako funkcję JavaScript, która zwraca kod JSX.
Zamiast pakować całą stronę do jednego pliku, dzieli się ją na mniejsze, bardziej skoncentrowane elementy.
Każdy z tych elementów zajmuje się dokładnie jednym zadaniem.
Np.:
Pasek nawigacyjny staje się oddzielnym komponentem.
Podstopka to kolejny komponent.
Karta produktu to jeszcze inny komponent.
Część profilu użytkownika również staje się komponentem.
Następnie łączy się te komponenty, aby stworzyć kompletną aplikację.
W rezultacie otrzymuje się bazę kodu, którą znacznie łatwiej jest czytać, testować i aktualizować z biegiem czasu.
Zmiana sposobu myślenia o interfejsie użytkownika
To jeden z najważniejszych zmian w sposobie myślenia, przez które będziesz przechodził podczas nauki React.
Przestań myśleć w kategoriach całych stron.
Zacznij myśleć w kategoriach pojedynczych elementów.
Zamiast pytać:
">Jak powinienem stworzyć tę stronę główną?"
Spróbuj zadać takie pytanie:
"Jakie mniejsze elementy łączą się, by utworzyć tę stronę główną?"
Gdy to zrozumiesz, React staje się znacznie bardziej intuicyjny.
Porównanie z codziennością
Pomyśl o budowaniu miasta z klocków LEGO.
Nie będziesz za każdym razem, gdy potrzebujesz klocka, formować zupełnie nowego.
Zamiast tego używasz tych, które już masz.
Część klocków tworzy ściany.
Inne stają się oknami.
Kolejne tworzą dachy.
Mieszając i łącząc te samodzielnie używalne klocki, możesz zbudować niezliczone różne budynki.
Komponenty React działają dokładnie w ten sam sposób.
Jeden komponent Button może pojawić się:
- Na ekranie logowania
- W oknie modalnym
- Na stronie płatności
- W pasku nawigacji
Budujesz go tylko raz.
Następnie umieszcza się je tam, gdzie są potrzebne.
To jest prawdziwa wartość, jaką przynoszą komponenty.
Uzasadnienie modelu komponentów w React
React opiera się na komponentach, ponieważ rozwiązują one rzeczywiste, praktyczne problemy.
1. Możliwość ponownego użycia
Zbuduj to raz.
Używaj tego bez końca.
Zamiast tworzyć ten sam kod przycisku dwadzieścia razy osobno, definiuje się jeden komponent Button i wstawia go wszędzie tam, gdzie jest potrzebny w aplikacji.
2. Łatwość odczytu
Rozważmy dwa scenariusze obok siebie.
Jeden plik liczący 2000 wierszy.
W przeciwieństwie do...
Dwudziestu oddzielnych plików, z których każdy ma jeden, oczywisty cel.
Który z nich wolałbyś otworzyć za sześć miesięcy?
Mniejsze komponenty są po prostu łatwiejsze do zrozumienia.
3. Łatwość konserwacji
Załóżmy scenariusz, w którym twoja firma postanawia zmienić kolor głównego przycisku.
Gdybyś nie podzielił interfejsu na komponenty, ta zmiana oznaczałaby konieczność wyszukiwania i edytowania dziesiątek plików.
Ale dzięki pojedynczemu, wielokrotnie używalnemu komponentowi przycisku edytację można przeprowadzić w jednym miejscu.
Każdy ekran używający tego przycisku natychmiast odzwierciedla aktualizację.
4. Współpraca zespołu
Załóżmy, że pięciu programistów pracuje nad tą samą bazą kodu.
Jedna osoba zajmuje się menu nawigacyjnym.
Inny pracuje nad sekcją główną.
Trzeci tworzy karty produktów.
Czwarty zajmuje się stopką strony.
Zadaniem piątego programisty jest połączenie wszystkich tych elementów w całość.
Ponieważ każda funkcja znajduje się w osobnym komponencie, nikt nie musi ingerować w pracę innych ani czekać, aż plik stanie się wolny.
Taki rodzaj równoległego przepływu pracy jest właśnie powodem, dla którego komponenty są tak ważne w zespołach deweloperskich w praktyce.
Komponenty funkcyjne
Dzisiejsze bazy kodu React opierają się niemal wyłącznie na komponentach funkcyjnych.
W istocie komponent funkcyjny to nic innego jak funkcja w JavaScript, która zwraca JSX.
Oto najprostsza wersja, którą można napisać:
function Welcome() {
return <h1>Hello, React!</h1>;
}
Na pierwszy rzut oka wygląda to jak zwykła funkcja JavaScript — bo faktycznie nią jest.
To, co ją wyróżnia, to fakt, że zamiast zwracać coś takiego jak liczbę lub ciąg znaków, zwraca JSX, a React wykorzystuje ten JSX do określenia tego, co ma zostać narysowane na ekranie.
Rozbierzmy to krok po kroku:
function Welcome()
Tutaj deklarujemy funkcję o nazwie Welcome.
Zwróć uwagę na wielką literę „W” na początku nazwy.
React specjalnie obserwuje tę wielką literę na początku, aby stwierdzić, czy funkcja powinna być traktowana jako komponent.
Następnie pojawia się ta linijka:
return <h1>Hello, React!</h1>;
Zadaniem funkcji jest zwracanie JSX.
Dlatego za każdym razem, gdy React renderuje Welcome, pojawia się właśnie ten nagłówek.
To wszystko.
Właśnie stworzyłeś swój pierwszy komponent.
Tworzenie pierwszego komponentu
Gdy projekt zaczyna rosnąć, programiści zazwyczaj przypisują każdemu komponentowi osobny plik.
Typowy układ folderów może wyglądać w ten sposób:
src
├── App.jsx
└── components
└── Welcome.jsx
Oto, co znajduje się w pliku Welcome.jsx:
function Welcome() {
return <h1>Welcome to React!</h1>;
}
export default Welcome;
Rozdzielanie komponentów na osobne pliki utrzymuje bazę kodu uporządkowaną i znacznie ułatwia jej nawigację w miarę rozwoju projektu.
Eksportowanie komponentów
Możesz być ciekawy celu tej linijki:
export default Welcome;
Załóżmy, że właśnie napisaliśmy solidny, wielokrotnie używalny komponent.
Dopóki znajduje się tylko w swoim pliku, nic innego w aplikacji nie może do niego dotrzeć.
Eksportowanie umożliwia jego użycie w innych miejscach.
To trochę jak publikacja rękopisu.
Gdy tylko trafi on na światło dzienne, każdy może go wziąć i przeczytać.
Ta sama logika obowiązuje tutaj — po eksportowaniu komponentu każdy inny plik w projekcie może go zaimportować i użyć.
Istnieją inne sposoby eksportowania komponentów, o których opowiemy w przyszłych częściach tej serii, ale export default jest najpopularniejszym wyborem na początkowym etapie.
Importowanie komponentów
Załóżmy, że chcemy włączyć Welcome do pliku App.jsx i go użyć.
import Welcome from "./components/Welcome";
Ta linia w istocie instruuje React:
„Weź komponent
Welcomez tego pliku, żebym mógł go tu użyć.”
Gdy zostanie on zaimportowany, jego wyświetlenie nie wymaga prawie żadnego wysiłku:
function App() {
return (
<>
<Welcome />
</>
);
}
Rozważmy bliżej tę część składni:
<Welcome />
Mimo że Welcome początkowo był zwykłą funkcją JavaScript, możemy go używać tak samo jak rodzimą tag HTML.
To jeden z najbardziej eleganckich aspektów pracy z React — własne funkcje zamieniają się w wielokrotnie używalne elementy budulcowe interfejsu.
Jak React postrzega komponent
Gdy React napotyka tę linię:
<Welcome />
nie interpretuje jej jako znaczników.
Zamiast tego to, co dzieje się w tle, wygląda mniej więcej tak:
Call the Welcome() function
↓
Receive JSX
↓
Convert JSX
↓
Update the Virtual DOM
↓
Render the UI
Mówiąc prościej, każdy komponent sprowadza się do wywołania funkcji, która zwraca fragment interfejsu.
Gdy ta koncepcja stanie się jasna, komponenty przestają wydawać się jakimś specjalnym czarem.
Zasady nazewnictwa
Istnieje kilka konwencji nazewniczych, które warto opanować.
Nazwy, które dobrze się sprawdzają:
- Navbar
- Footer
- Hero
- ProductCard
- UserProfile
Nazwy, których należy unikać:
- navbar
- footer
- component
- abc
Jaki jest tu powód?
React polega na zapisie wielkimi literami jako sygnale oddzielającym własne komponenty od wbudowanych tagów HTML.
Weźmy ten przykład:
<Navbar />
React interpretuje to jako odniesienie do własnego, dostosowanego komponentu.
Porównaj to z:
<div>
które React traktuje jako standardowy, wbudowany element HTML.
Wybieranie jasnych, opisowych nazw przynosi korzyści również wtedy, gdy inni programiści będą musieli później czytać i rozumieć twój kod.
Główne wnioski
Oto krótkie podsumowanie omawianych dotychczas kwestii.
- Komponent to samodzielny, wielokrotnie używalny element interfejsu użytkownika.
- Budowa aplikacji React polega w rzeczywistości na łączeniu komponentów.
- Komponenty funkcyjne to zwykłe funkcje JavaScript, które zwracają JSX.
- Rozbicie aplikacji na komponenty poprawia czytelność, umożliwia wielokrotne użycie oraz ułatwia długoterminową konserwację.
- Dobrze zaprojektowany komponent skupia się na wykonywaniu jednej funkcji.
- Powszechną praktyką jest przechowywanie każdego komponentu w osobnym pliku i importowanie go tam, gdzie jest potrzebny.
- Kapitalizacja służy do odróżnienia własnych komponentów React od zwykłych elementów HTML.
Pozycje pokrewne
- Budowanie modelu mentalnego dla React: Reconciliation, State i Hooks — Poznaj logikę stojącą za podstawowymi koncepcjami React – reconciliation, komponenty, props, state i hooks – aby rozwijać intuicję zamiast zapamiętywać API.
- Obsługa stanów interfejsu w praktyce za pomocą warunkowego renderowania w React — Dowiedz się, jak tworzyć interfejsy autoryzacji, ról, uprawnień, stanów ładowania, błędów oraz stanu pustego w React przy użyciu praktycznych wzorców warunkowego renderowania.
catch () wywołuje błąd SyntaxError w JavaScript — Dowiedz się, dlaczego pusta lista parametrów catch całkowicie zakłóca analizę kodu w JavaScript, i zobacz dwa poprawne pod względem gramatyki sposoby napisania bloku catch bez parametrów.