Jakie elementy zostaną wyświetlone w przeglądarce po wykonaniu kodu źródłowego stworzonego za pomocą dwóch funkcjonalnie równoważnych fragmentów? KOD W ANGULAR: tags: string[] = ['tag1', 'tag2', 'tag3' ];
// ...
<p *ngFor="let tag of tags"> {{tag}} </p>
KOD W REACT.JS: state = { tags: ['tag1', 'tag2', 'tag3'] };
// ... /* w instrukcji return metody render */
<React.Fragment>
{ this.state.tags.map(tag => <p key={tag}>{tag}</p>) }
</React.Fragment>
Kod generuje trzy paragrafy, każdy z kolejnym elementem tablicy tags. Jest to standardowy sposób iteracji po elementach tablicy i renderowania ich jako oddzielnych elementów HTML. W praktyce, takie podejście jest szeroko stosowane w aplikacjach frontendowych, gdzie dynamicznie tworzone elementy interfejsu użytkownika są generowane na podstawie tablic lub list danych. Każdy element tablicy jest iterowany i osobno przekształcany w znacznik HTML, co pozwala na łatwe zarządzanie i aktualizowanie treści strony w czasie rzeczywistym. To podejście jest zgodne z najlepszymi praktykami dotyczącymi manipulacji DOM i zapewnia wysoką wydajność aplikacji.
Generowanie jednego paragrafu zawierającego wszystkie elementy tablicy nie pozwala na elastyczne formatowanie i stylizację każdego elementu osobno. Taka implementacja jest rzadziej stosowana, ponieważ ogranicza kontrolę nad poszczególnymi elementami interfejsu. Wyświetlanie tylko pierwszego elementu tablicy jest błędem logicznym i pomija pozostałe dane, co prowadzi do niepełnego wyświetlenia informacji. Wygenerowanie trzech paragrafów z identyczną treścią '{tag}' sugeruje błędne odwołanie do zmiennej, co oznacza, że iteracja została przeprowadzona nieprawidłowo lub że niepoprawnie użyto zmiennej w szablonie.