Na funkcjonalnie równoważnych sobie listingach fragmentów aplikacji Angular i React.js jest utworzona lista punktowana, która zawiera

Poprawna odpowiedź: A

Uzasadnienie i szersze wyjaśnienie:

Oba przedstawione fragmenty kodu realizują tę samą funkcję: dynamiczne generowanie elementów listy HTML na podstawie zawartości tablicy books. Tablica books zawiera trzy elementy tekstowe.

• W kodzie Angular: Dyrektywa *ngFor="let book of books" jest pętlą, która iteruje po każdym elemencie tablicy books. Dla każdego elementu tworzy nowy znacznik <li>, a wewnątrz niego, za pomocą interpolacji {{book}}, wyświetla aktualną wartość z tablicy (czyli tytuł książki).
• W kodzie React.js: Metoda .map(book => ...) również jest pętlą, która przechodzi przez każdy element tablicy books. Dla każdego elementu zwraca fragment kodu JSX w postaci znacznika <li>. Wartość {book} wewnątrz znacznika powoduje wyświetlenie aktualnego tytułu książki.

W obu przypadkach wynikiem będzie wygenerowanie trzech elementów <li>, a zawartością każdego z nich będzie kolejny tytuł z tablicy books. Zatem lista będzie zawierać tyle elementów, ile jest w tablicy, a w każdym punkcie znajdzie się jeden element z tej tablicy.

Dlaczego pozostałe odpowiedzi są nieprawidłowe?

• B: {book} to składnia używana do wyświetlenia wartości zmiennej book, a nie dosłownego tekstu „{book}”.
• C i D: Oba mechanizmy tworzą osobny element listy dla każdego wpisu w tablicy, a nie jeden zbiorczy element.