Kwalifikacja: INF.04 - Projektowanie, programowanie i testowanie aplikacji

Wiele osób trafia na problem, bo te klamry i podwójne klamry wyglądają trochę tajemniczo, zwłaszcza przy pierwszym kontakcie z Reactem albo Angularem. Często pojawia się myślenie, że skoro w szablonie wpisano {2+2} albo {{2+2}}, to właśnie taki tekst zostanie wyświetlony na stronie, dosłownie z klamrami. W praktyce jednak i React (JSX), i Angular traktują klamry jako specjalną składnię do osadzania dynamicznych wartości z JavaScript — to nie jest zwykła dekoracja, tylko wyraźny sygnał dla silnika, że w tym miejscu należy wykonać kod i podstawić wynik. To powoduje, że nie wyświetli się ani „{2+2}”, ani „{{2+2}}”, tylko właśnie wynik tego wyrażenia. Co ciekawe, odpowiedź „{4}” też jest błędna, bo React i Angular nie wyświetlają już klamer w efekcie końcowym — klamry są tylko częścią składni, nie wyniku. Człowiek łatwo może się pomylić, bo w zwykłym HTML czegoś takiego nie ma i klamry są po prostu tekstem. Moim zdaniem często wynika to z niezrozumienia, jak działa tzw. data binding w frameworkach frontendowych. Warto wyrobić sobie nawyk myślenia o klamrach jako narzędziu do „wstrzykiwania” wartości, nie jako części tekstu. To też pokazuje, jak ważne jest czytanie dokumentacji — oficjalne materiały Reacta i Angulara bardzo wyraźnie podkreślają, że klamry służą do oceny JavaScriptu. Jeśli więc widzimy {2+2} w szablonie, przeglądarka zobaczy tylko „4”, bo wszystko, co w klamrach, jest oceniane przed wyświetleniem. Jeśli wpiszemy tam zmienną lub nawet funkcję, efekt będzie podobny — zawsze podstawiona zostanie końcowa wartość, a nie kod czy same klamry. Takie mechanizmy bardzo upraszczają pracę, bo pozwalają łatwo aktualizować widok w zależności od stanu aplikacji.