Źródło: Arkusze CKE
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>
Warianty odpowiedzi
-
A
Wyłącznie jeden element o treści Harry Potter, Hobbit, Władca pierścieni.
-
B
Taką liczbę elementów, ile znajduje się w tablicy books; w każdym punkcie listy umieszczony jest jeden element tablicy.
-
C
Tyle elementów, ile znajduje się w tablicy books; w każdym punkcie listy widnieje element o treści {book}.
-
D
Jedynie jeden element o treści Harry Potter.
Wyjaśnienie
Oba widoczne fragmenty kodu robią dokładnie to samo, wykorzystując składnię specyficzną dla danego narzędzia.
W Angularze używamy dyrektywy *ngFor, która przechodzi pętlą po całej tablicy books. W React.js wykorzystujemy standardową funkcję map z języka JavaScript, która działa analogicznie.
Ponieważ tablica zawiera trzy elementy, kod wygeneruje listę punktowaną złożoną z dokładnie trzech elementów li, gdzie w każdym z nich wyświetli się kolejna wartość z tablicy.