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>

Wyjaśnienie

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.