Przedstawione równoważne funkcjonalnie fragmenty kodu w bibliotece React.js oraz we frameworku Angular mają za zadanie wyświetlić

Poprawna odpowiedź: B

Uzasadnienie i szersze wyjaśnienie:

Oba przedstawione fragmenty kodu implementują prosty komponent licznika. Analiza obu przypadków pokazuje, że ich celem jest śledzenie i wyświetlanie, ile razy użytkownik kliknął przycisk.

• We fragmencie React.js:

  • state = { zm1: 0 } – inicjalizuje w stanie komponentu zmienną zm1 wartością 0.
  • <span>{this.state.zm1}</span> – wyświetla aktualną wartość zm1 ze stanu.
  • <button onClick={this.handleEv}> – wiąże zdarzenie kliknięcia przycisku z metodą handleEv.
  • this.setState({ zm1: this.state.zm1 + 1 }) – metoda ta zwiększa wartość zm1 o 1 przy każdym kliknięciu, co powoduje ponowne renderowanie komponentu i wyświetlenie nowej wartości.

• We fragmencie Angular:

  • zm1 = 0; – inicjalizuje właściwość klasy komponentu zm1 wartością 0.
  • <span>{{ zm1 }}</span> – wyświetla aktualną wartość właściwości zm1 (interpolacja).
  • <button (click)="onBtnCilcked()"> – wiąże zdarzenie kliknięcia przycisku z metodą onBtnCilcked.
  • this.zm1++; – metoda ta zwiększa wartość zm1 o 1, a mechanizm detekcji zmian w Angularze automatycznie aktualizuje widok, wyświetlając nową wartość.

W obu przypadkach początkowo wyświetlana jest liczba 0, a każde kolejne kliknięcie przycisku powoduje inkrementację tej liczby. Komponenty te realizują więc funkcję wyświetlania liczby kliknięć przycisku.

Dlaczego pozostałe odpowiedzi są nieprawidłowe?

• A. Nie jest wyświetlany jedynie przycisk; obok niego zawsze widoczna jest liczba w elemencie <span>.
• C. Liczba 0 jest wyświetlana na samym początku, przed kliknięciem. Po pierwszym kliknięciu wyświetlana jest liczba 1.
• D. Napis BTN_1 jest tylko etykietą przycisku. Kluczowym elementem funkcjonalnym jest również wyświetlany i aktualizowany licznik.