Kod w bibliotece React.js oraz w frameworku Angular, który został zaprezentowany, ma na celu wyświetlenie Fragment kodu React.js: state = { zm1: 0 }; hanleEv = () => { this.setState({zm1: this.state.zm1 + 1}); } render() { return (<div> <span>{this.state.zm1}</span> <button onClick={this.handleEv}>BTN_1</button> </div>); } Fragment kodu Angular: @Component({ selector: 'sel1', template: `<span>{{ zm1 }}</span> <button (click)="onBtnCilcked()">BTN_1</button>` }) export class Licznik1Component { zm1 = 0; onBtnCilcked() { this.zm1++; } }

Wyjaśnienie

Ten kod, zarówno w React.js jak i w Angularze, jest klasycznym przykładem prostego licznika. To, co tu się dzieje, to tak naprawdę zliczanie kliknięć użytkownika w przycisk. Za każdym razem, gdy naciśniesz BTN_1, zmienna (zm1) jest inkrementowana – czyli po prostu zwiększana o jeden. W React za to odpowiada metoda setState, która zmienia stan komponentu – dzięki temu interfejs od razu aktualizuje się bez przeładowywania strony. W Angularze natomiast działa to przez tzw. dwukierunkową komunikację z template’em i automatyczną detekcję zmian – metoda onBtnCilcked w komponencie modyfikuje zmienną, a framework sam aktualizuje widok. Z mojego doświadczenia, takie podejście do zarządzania stanem to podstawa w nowoczesnych aplikacjach, szczególnie jeśli chodzi o responsywność i natychmiastową reakcję na akcje użytkownika. Liczniki są zresztą jednym z pierwszych przykładów, jakie się pisze ćwicząc frameworki frontendowe, bo świetnie pokazują, jak działa przepływ danych i odświeżanie elementów UI. Warto dodać, że trzymanie licznika kliknięć w stanie komponentu (a nie np. jako zmienną globalną) jest zgodne z dobrymi praktykami – bo ogranicza zakres danych i ułatwia zarządzanie większymi aplikacjami. Takie wzorce potem można z powodzeniem przenieść do trudniejszych projektów, na przykład liczników, koszyków, liczby zamówień czy nawet zaawansowanych dashboardów. W praktyce ten mechanizm inkrementowania wartości po kliknięciu użytkownika jest jednym z najczęściej używanych w interaktywnych aplikacjach internetowych.