Jaki tekst zostanie wyświetlony po uruchomieniu jednego z poniższych fragmentów kodu?
Kod w React: <h2>{2+2}</h2>
Kod w Angular: <h2>{{2+2}}</h2>
To pytanie jest świetną okazją, żeby zobaczyć, jak działają wyrażenia w szablonach Reacta i Angulara. Odpowiedź „4” jest prawidłowa, bo zarówno w React, jak i w Angularze, zawarte w nawiasach klamrowych wyrażenie matematyczne 2+2 jest oceniane przez silnik JavaScript podczas renderowania komponentu. Nie jest to zwykły tekst, tylko dynamiczne wyliczenie. Dzięki temu React (w JSX) oraz Angular (w interpolacji {{}}) najpierw obliczają sumę, a potem podstawiają wynik w miejsce wyrażenia – czyli na ekranie pojawia się zwykły tekst „4”. Moim zdaniem to jedna z największych zalet tych frameworków, bo pozwala na bardzo elastyczne budowanie UI, gdzie dynamiczne dane mogą być wstawiane praktycznie wszędzie, bez potrzeby ręcznego tworzenia dodatkowych zmiennych czy długich instrukcji warunkowych. W praktyce często stosuje się takie podejście chociażby do wyświetlania wyników obliczeń, liczników, czy dynamicznych podsumowań. Z mojego doświadczenia, warto pamiętać, że każde wyrażenie w takich miejscach powinno być możliwie proste — złożone logiki lepiej wynieść do funkcji, bo wtedy szablon pozostaje czytelny. Warto też mieć świadomość, że React i Angular automatycznie konwertują wynik na tekst, więc nie trzeba się martwić o jawne rzutowanie. To podejście jest zgodne z dobrymi praktykami branżowymi – prosty, czytelny kod to podstawa w nowoczesnych aplikacjach webowych.
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.