Kwalifikacja: INF.04 - Projektowanie, programowanie i testowanie aplikacji
Zawód: Technik programista
Kategorie: Programowanie Narzędzia i środowiska
Na równoważnych pod względem funkcjonalnym listingach fragmentów aplikacji Angular oraz React.js utworzono listę punktowaną, która zawiera:
Definicja typu:
books = ["Harry Potter", "Hobbit", "Władca pierścieni"];
Kod Angular:
<ul>
<li *ngFor = "let book of books"> {{book}} </li>
</ul>
Kod React.js:
<ul>
{this.books.map(book => <li key={book}> book </li>)}
</ul>
Odpowiedzi
Informacja zwrotna
Dokładnie tak właśnie działa iteracja po tablicy w Angularze i React.js. Zarówno Angularowy *ngFor, jak i funkcja map() w Reactcie to narzędzia do dynamicznego generowania elementów listy na podstawie danych z tablicy – w tym przypadku books. Każdy element tablicy tworzy osobny <li>, a więc liczba elementów na stronie zawsze odpowiada długości tablicy. To jest bardzo praktyczne, bo pozwala wyświetlać listy o dowolnej długości, zależnie od zawartości danych, bez przepisywania kodu – wystarczy zmienić dane źródłowe. W Angularze taki sposób budowania widoków jest zgodny z podejściem deklaratywnym – opisujesz, co ma się pojawić, a nie jak dokładnie to zrobić krok po kroku. React „mapuje” dane na elementy JSX, przy okazji warto pamiętać o kluczach (key), bo to pomaga w optymalizacji pracy wirtualnego DOM-u. Takie podejście to dzisiaj absolutny standard w branży – ułatwia utrzymanie kodu, testy i reużywalność komponentów. Moim zdaniem, kiedy raz się to opanuje, ciężko wyobrazić sobie inne podejście do budowy dynamicznych interfejsów. Zauważ, że każdy <li> wyświetla dokładny tekst z tablicy, a nie jakieś szablony czy placeholdery – to bardzo czytelne i naturalne dla użytkownika. W realnych projektach często tak renderuje się np. listy produktów, komentarzy czy zadań do wykonania. Dodatkowo, jeśli zmodyfikujesz tablicę, to widok automatycznie się odświeży – nie musisz ręcznie aktualizować DOM. To ogromne ułatwienie i podstawa nowoczesnego frontendu.