Dlaczego sam HTML nie wystarcza? Jak React buduje "inteligencję" moich stron.

Wstęp: Szybka, ale "martwa" strona?

W moich poprzednich artykułach ustaliliśmy, że dzięki Jamstack i Next.js nasze strony są błyskawicznie szybkie. Dostajemy "wypieczony" plik HTML, który po prostu serwujemy z sieci CDN.

Ale jest pewien problem. Taki HTML jest "martwy". Jest jak statyczna rzeźba. Co się stanie, gdy zechcemy dodać dynamiczną wyszukiwarkę, filtrowanie produktów albo formularz, który reaguje na nasze kliknięcia w czasie rzeczywistym?

I tu właśnie pojawia się React. To biblioteka, która pozwala nam w logiczny i zorganizowany sposób tchnąć "inteligencję" w nasze statyczne strony.

Rozwiązanie nr 1: Klocki LEGO, czyli Komponenty

Najważniejsza idea Reacta to Komponenty. Zamiast myśleć o stronie jako o jednym, wielkim pliku, React każe nam podzielić ją na małe, niezależne "klocki LEGO".

Moja nawigacja (NavBar) to jeden klocek. Każda karta projektu w portfolio (ProjectCard) to kolejny. Formularz kontaktowy? Też klocek.

Co nam to daje?

1. Wielokrotność użycia: Kod dla ProjectCard piszę tylko raz, a potem używam go wielokrotnie.

2. Łatwość utrzymania: Jeśli chcę zmienić wygląd wszystkich kart, edytuję tylko jeden plik.

Rozwiązanie nr 2: "Mózg", czyli Stan (State)

OK, mamy klocki. Ale jak sprawić, by "pamiętały", co wpisaliśmy w formularz? Sam HTML nie ma pamięci.

React daje każdemu komponentowi jego własny, mały "mózg", który nazywamy stanem (state).

Gdy wpisujesz coś w formularz, ja nie mówię przeglądarce "zmień ten element". Ja mówię Reactowi: "zaktualizuj stan (pamięć) tego komponentu". React widzi tę zmianę i sam, automatycznie, przerysowuje tylko ten jeden malutki kawałek strony. To piekielnie wydajne.

"Aha!": Jak React łączy się z Next.js

To jest moment "Aha!":

1. Najpierw Next.js "piecze" błyskawiczny, statyczny HTML.

2. Gdy strona ląduje w przeglądarce, React natychmiast ją "nawadnia" (ang. hydrates).

3. "Nawadnianie" to proces przyczepiania tych małych "mózgów" (stanu) do naszych "klocków" (komponentów).

W efekcie dostajemy to, co najlepsze z obu światów: błyskawiczny czas ładowania (dzięki Next.js) oraz pełną interaktywność (dzięki React).

Zastosowanie w Praktyce

Używam Reacta w każdym projekcie na tej stronie. Najlepszym przykładem jego mocy jest mój projekt Dashboard Danych "GlobalStats". Cała logika filtrowania na żywo, asynchronicznego pobierania danych z API i dynamicznego odświeżania wykresów jest zarządzana właśnie przez stan Reacta.

Podsumowanie: Budowanie klockami

React to dla mnie nie tylko biblioteka. To uporządkowany sposób myślenia o budowaniu interfejsów. Pozwala mi tworzyć skomplikowane aplikacje, które są czyste, łatwe w utrzymaniu, a w połączeniu z Next.js – również niesamowicie szybkie.

Masz skomplikowany pomysł na aplikację, ale nie wiesz, jak go zorganizować? Skontaktuj się ze mną. Zbudujemy go razem, klocek po klocku.