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>
A. Tyle elementów, ile znajduje się w tablicy books; w każdym punkcie listy widnieje element o treści {book}.
B. Jedynie jeden element o treści Harry Potter.
C. Wyłącznie jeden element o treści Harry Potter, Hobbit, Władca pierścieni.
D. Taką liczbę elementów, ile znajduje się w tablicy books; w każdym punkcie listy umieszczony jest jeden element tablicy.
Ta odpowiedź jest poprawna, bo zarówno w Angularze, jak i w React.js pokazany kod iteruje po całej tablicy books. Tablica ma trzy elementy: Harry Potter, Hobbit oraz Władca pierścieni, więc w wyniku renderowania powstaną trzy punkty listy. W Angularze odpowiada za to dyrektywa strukturalna *ngFor, która dla każdego elementu kolekcji tworzy osobny element listy i podstawia aktualną wartość do zmiennej book. Zapis {{ book }} to interpolacja, czyli wstawienie wartości zmiennej do widoku. W React.js analogicznie działa metoda map(), która przechodzi po tablicy i zwraca nowy element listy dla każdej książki. Z mojego doświadczenia to bardzo typowy schemat przy budowaniu menu, list produktów, wyników wyszukiwania czy tabel z danymi. W React ważny jest też atrybut key, bo pomaga mechanizmowi reconciliation sprawnie aktualizować DOM wirtualny. Dobra praktyka branżowa mówi, żeby key był stabilny i unikalny, najlepiej oparty o identyfikator z danych, a nie o przypadkowy indeks, jeśli lista może się zmieniać. Tutaj użycie tytułu działa tylko dlatego, że zakładamy brak duplikatów.
Niepoprawne odpowiedzi wynikają głównie z pomylenia składni szablonu z tekstem, który użytkownik zobaczy na stronie. W Angularze zapis {{ book }} nie oznacza, że w liście pojawią się dosłownie znaki nawiasów klamrowych i słowo book. To mechanizm interpolacji, czyli framework pobiera wartość zmiennej book z aktualnego przebiegu pętli i wpisuje ją do widoku. Podobnie w React.js nawiasy klamrowe w JSX służą do osadzania wyrażeń JavaScript, a nie do drukowania tekstu {book}. Dlatego w przeglądarce pojawią się konkretne tytuły książek, a nie techniczna nazwa zmiennej. Błędne jest też założenie, że cała tablica zostanie pokazana jako jeden punkt listy, np. jako Harry Potter, Hobbit, Władca pierścieni. Taki efekt mógłby się pojawić przy bezpośrednim wypisaniu tablicy jako jednej wartości tekstowej, ale tutaj mamy pętlę w Angularze i mapowanie w React, więc każdy element kolekcji dostaje własny element listy. Równie mylące jest myślenie, że zostanie wyświetlony tylko pierwszy element, Harry Potter. Ani *ngFor, ani map() nie zatrzymują się automatycznie po pierwszym rekordzie. Iterują przez całą tablicę, chyba że programista jawnie zastosuje filtr, slice albo warunek. Moim zdaniem to jedna z ważniejszych rzeczy przy pracy z frontendem: trzeba odróżniać dane, szablon oraz wynik renderowania. Kod jest tylko opisem, jak framework ma zbudować interfejs, a finalny widok zależy od tego, jak działa mechanizm iteracji i bindowania danych.