Przedmowa

Programista internetowy musi mieć szeroką wiedzę, aby mógł tworzyć aplikacje, które użytkownicy będą uwielbiać. Dla Reacta istnieje wiele cennych zasobów i to stanowi problem. Nie wszystkie z nich są spójne i musisz samodzielnie znaleźć sposób, aby się mozolnie przedrzeć przez dostępne samouczki i posty opublikowane na blogach. Masz przy tym nadzieję połączyć różne fragmenty w jedną spójną całość, dzięki której uzupełnisz luki w swojej wiedzy. I zawsze pojawiają się obawy, że poznawane zagadnienia są już nieaktualne.

I w tym momencie pojawia się Tejas Kumar wraz ze swoją książką. Ma ogromne doświadczenie w pracy z biblioteką React i dołożył ogromnych starań, aby przedstawić solidne podstawy. Jest doświadczonym inżynierem (i skarbnicą wiedzy), który pomoże Ci poczuć się pewnie w świecie Reacta. Przez lata miałem przyjemność współpracować z Tejasem przy różnych projektach otwartoźródłowych, uczestniczyć z nim w konferencjach, przygotowywać wspólnie materiały dydaktyczne oraz spotykać się na gruncie prywatnym. Musisz wiedzieć, że masz w ręku książkę napisaną przez utalentowaną i fantastyczną osobę.

Podczas lektury zagłębisz się w tematy, z którymi prawdopodobnie nie spotkasz się w innych źródłach. Dzięki temu zyskasz odpowiednie nastawienie i nauczysz się "myśleć w kategoriach Reacta". Przede wszystkim poznasz podstawowe powody istnienia Reacta i dzięki temu dowiesz się, kiedy uznawać tę bibliotekę za narzędzie przeznaczone do rozwiązywania problemów. Ta biblioteka nie istnieje w próżni, a zrozumienie jej korzeni pomoże w ustaleniu problemów, do których rozwiązania została przeznaczona. To zaś sprawi, że nie będziesz podejmować prób umieszczenia okrągłego kołka w kwadratowym otworze.

Poznasz podstawowe koncepcje, takie jak składnia JSX, wirtualny model DOM, rekoncyliacja i współbieżność w bibliotece React, które pomogą w znacznie efektywniejszej pracy z tym narzędziem. Zawsze twierdziłem, że najlepszym sposobem na dokładniejsze poznanie narzędzia jest zrozumienie sposobu jego działania. Dlatego też nawet jeśli od lat korzystasz z Reacta, informacje zamieszczone w książce pomogą Ci otworzyć się na nowe możliwości i opanować je, gdy tak naprawdę poznasz Reacta zamiast jedynie łączyć w całość różne komponenty biblioteki i trzymać kciuki, aby wynik okazał się zgodny z oczekiwaniami.

Poznasz rozwiązania używane przez profesjonalistów podczas tworzenia efektywnych i oferujących potężne możliwości aplikacji. Wprawdzie React to bardzo szybka biblioteka interfejsu użytkownika, ale w trakcie budowania skomplikowanych aplikacji zachodzi potrzeba przeprowadzania optymalizacji ich wydajności działania. Tejas wyjaśni, jak można stosować oferowane przez Reacta możliwości w zakresie memoizacji, wczytywania z opóźnieniem i technik zarządzania stanem. Ponadto dowiesz się, jak najlepsze biblioteki dostępne w ekosystemie Reacta współdziałają z wzorcami typu komponenty złożone, właściwości generowania, właściwości getter, reduktory stanu i właściwości kontrolne. To są ważne narzędzia w arsenale każdego, kto zajmuje się tworzeniem aplikacji z wykorzystaniem Reacta. Nawet jeśli po prostu korzystasz z gotowych rozwiązań, poznanie sposobu działania tych potężnych możliwości pomoże Ci w znacznie efektywniejszym ich używaniu.

W swojej książce Tejas wykroczył poza teoretyczne omówienie Reacta oraz zamieścił wprowadzenie do praktycznych frameworków takich jak Remix i Next.js. Okażą się one ważne, gdy zechcesz w pełni wykorzystać możliwości Reacta oraz zapewnić użytkownikowi jak najlepsze wrażenia podczas pracy z aplikacją. Dzięki dostępnym już od samego początku w tej bibliotece możliwościom w zakresie generowania po stronie serwera zyskujesz pełną kontrolę i możesz wykorzystać Reacta do zapewnienia odpowiednich wrażeń użytkownika po stronie zarówno frontendu, jak i backendu. Przy okazji poznasz najnowsze technologie, takie jak komponenty serwera i akcje serwera, których React używa w celu dalszej poprawy wrażeń użytkownika podczas pracy z aplikacją.

Jestem przekonany, że po lekturze niniejszej książki będziesz mieć wiedzę potrzebną do tworzenia wyjątkowych aplikacji za pomocą biblioteki React. Życzę Ci owocnego poznawania Reacta, czyli najczęściej używanej na świecie biblioteki interfejsu użytkownika. Miłej lektury!

- Kent C. Dodds, https://kentcdodds.com/

Wprowadzenie

To nie jest książka dla osób, które chcą się dowiedzieć, jak używać Reacta. Jeżeli jeszcze nie znasz tej biblioteki i szukasz odpowiedniego samouczka, to najlepszym miejscem do takich poszukiwań będzie dokumentacja Reacta, którą znajdziesz pod adresem https://react.dev/. Natomiast niniejsza książka jest przeznaczona dla ciekawskich, czyli dla osób zainteresowanych nie tyle tym, jak używać Reacta, lecz tym, w jaki sposób działa ta biblioteka.

W książce zamierzam przedstawić wiele koncepcji Reacta, wyjaśnić kryjące się za nimi mechanizmy oraz pokazać, jak poszczególne elementy do siebie pasują, co powinno pomóc w znacznie efektywniejszym tworzeniu aplikacji z użyciem Reacta. Podczas omawiania mechanizmów Reacta będę posługiwał się modelami mentalnymi, niezbędnymi do dokładnego wyjaśnienia koncepcji Reacta i jego ekosystemu.

Przyjąłem założenie, że doskonale rozumiesz następujące zdanie: przeglądarki WWW generują strony internetowe. Strona internetowa to dokument w HTML, w którym arkusze stylów CSS odpowiadają za jego wygląd, natomiast JavaScript zapewnia możliwość interaktywnego działania. Założyłem również, że wiesz, jak używać Reacta, oraz masz za sobą utworzenie co najmniej jednej aplikacji z wykorzystaniem Reacta. Idealnie byłoby, gdyby niektóre z tych aplikacji działały w środowisku produkcyjnym.

Rozpocznę od wprowadzenia do Reacta i przedstawię historię tej biblioteki. Cofnę się do 2013 roku, kiedy to została ona udostępniona jako oprogramowanie otwartoźródłowe. Następnie przejdę do omówienia podstawowych koncepcji Reacta, m.in. modelu komponentu, wirtualnego modelu DOM i rekoncyliacji. Dość dokładnie zaprezentuję sposób działania składni JSX, silnika React Fiber oraz modelu programowania współbieżnego. To zapewni niezbędne informacje, które pomogą w znacznie skuteczniejszym opanowaniu omówionych później koncepcji wykorzystujących potężne konstrukcje typu React.memo i useTransition.

W drugiej części książki przejdę do omówienia frameworków Reacta, rozwiązywanych przez nie problemów oraz używanych przy tym mechanizmów. W tym celu pokażę sposób tworzenia własnego frameworka przeznaczonego do rozwiązywania trzech istotnych problemów występujących w niemalże wszystkich aplikacjach internetowych: generowania po stronie serwera, routingu oraz pobierania danych.

Po samodzielnym rozwiązaniu wymienionych problemów znacznie łatwiejsze okaże się zrozumienie sposobów, w jakie są one rozwiązywane przez inne frameworki. Dokładnie omówię komponenty serwerowe Reacta (ang. react server components, RSC) i akcje serwera, jak również przedstawię rolę narzędzi następnej generacji, takich jak programy tworzące paczki kodu i routery izomorficzne.

Na koniec odejdę nieco od Reacta i przedstawię alternatywy typu Vue.js, Solid, Angular, Qwik itd. Zaprezentuję sygnały i dokładniejszą reaktywność w porównaniu do modelu zastosowanego w bibliotece React. Przedstawię również kwestię udzielania odpowiedzi przez Reacta na sygnały: zestaw narzędzi React Forget i porównam go z sygnałami.

To całkiem sporo materiału do omówienia, więc nie warto tracić czasu. Zaczynamy!

Konwencje zastosowane w książce

W tej książce zastosowano następujące konwencje typograficzne:

Kursywa

Wskazuje na nowe pojęcia, adresy URL i e-mail, nazwy plików, rozszerzenia plików itd.

Czcionka o stałej szerokości

Jest używana w przykładowych fragmentach kodu, a także w samym tekście, aby odwołać się do poleceń bądź innych elementów programistycznych, takich jak nazwy zmiennych lub funkcji, baz danych, typów danych, zmiennych środowiskowych, poleceń i słów kluczowych.

Pogrubiona czcionka o stałej szerokości

Została użyta w rozdziale 10. w celu wyeksponowania różnic w blokach kodu źródłowego.

Taka ikona oznacza ogólną uwagę.

Podziękowania

To jest pierwsza książka mojego autorstwa i jestem szczęśliwy, że nie musiałem sam się wszystkim zajmować. W ręku trzymasz efekt pracy wielu fantastycznych osób, które współpracowały ze sobą, aby ta pozycja mogła ujrzeć światło dzienne. W tym miejscu chciałbym im podziękować za trud włożony w przygotowanie książki.

Proszę, nie pomijaj tego fragmentu, ponieważ te osoby zasługują na Twoją uwagę i uznanie. Rozpocznę od osób, które bezpośrednio pomogły mi podczas pracy nad tekstem.

Numerem 1 zawsze jest moja żona Lea. Na napisanie tej książki poświęciłem wiele czasu, często kosztem tego, który mógłbym spędzić z nią i rodziną. Ponieważ czerpię radość ze swojej pracy i chciałem podzielić się całą wiedzą z Czytelnikami, praca nad tekstem zabrała mi nieco czasu wolnego oraz odebrała możliwość spędzenia go z moją żoną. Na szczęście Lea była wyrozumiała i nieustannie mnie wspierała. Jestem wdzięczny, że ją mam. Shira Evans, redaktor wydawnictwa O'Reilly odpowiedzialna za tę książkę. Współpraca z nią była przyjemnością, ponieważ Shira wspierała mnie, zachęcała i była wyrozumiała, nawet w obliczu wielu opóźnień z powodu pojawiających się w ekosystemie Reacta nowości, takich jak React Forget i akcje serwera. Shira cierpliwie nas przez to przeprowadziła, za co jestem jej ogromnie wdzięczny. Mój drogi przyjaciel i brat, Kent C. Dodds (@kentcdodds). Dziękuję mu za nieustanne wsparcie wykraczające poza pracę nad tą książką oraz za słowo wstępu. Kent od lat jest moim przyjacielem i mentorem, a ja jestem wdzięczny za jego niesłabnące zaangażowanie. Korektorzy. Ta książka nigdy by nie powstała bez niewiarygodnej pracy i zwracania uwagi na szczegóły przez korektorów wspomagających mnie w procesie powstawania tekstu.

- Adam Rackis (@adamrackis)

- Daniel Afonso (@danieljcafonso)

- Fabien Bernard (@fabien0102)

- Kent C. Dodds (@kentcdodds)

- Mark Erikson (@acemarke)

- Lenz Weber-Tronic (@phry)

- Rick Hanlon II (@rickhanlonii)

- Sergii Kirianov (@SergiiKirianov)

- Matheus Albuquerque (@ythecombinator)

Zespół biblioteki React w firmie Meta. Dziękuję za nieustanną pracę nad rozwojem Reacta, przesuwanie granic możliwości biblioteki oraz sprawienie, że praca z nią jest prawdziwą przyjemnością dzięki Waszej błyskotliwości, pomysłowości i świetnym umiejętnościom technicznym. Szczególne podziękowania składam Danowi Abramovowi (@dan_abramov), który cierpliwie wyjaśnił mi rolę programu tworzącego paczki kodu w architekturze komponentów serwerowych Reacta, a także za jego znaczny wkład w przygotowanie rozdziału 9. książki, poświęconego właśnie tym komponentom.

Na koniec chciałbym podziękować Tobie, Czytelniku, za sięgnięcie po tę książkę. Mam nadzieję, że jej lektura okaże się dla Ciebie tak dużą przyjemnością, jaką dla mnie było jej pisanie.

Opinie o książce

Carl Sagan powiedział: "Musisz zrozumieć przeszłość, aby zrozumieć teraźniejszość". Moim skromnym zdaniem Tejas wprowadził tę mantrę do świata frontendu, zabierając nas w historyczną podróż po bibliotece React.

Z ogromną skrupulatnością przedstawił najważniejsze koncepcje kryjące się za mechanizmem rekoncyliacji i silnikiem React Fiber. To jest pozycja obowiązkowa dla każdego, kto chce poznać bibliotekę React oraz jej nieustannie ewoluujący ekosystem.

- Matheus Albuquerque Brasil, programista Google i ekspert w zakresie technologii internetowych

Ta książka zmusiła mnie do zastanowienia się nad tym, co wiem na temat Reacta. Zawiera dokładnie to, czego oczekuję od Tejasa: wnikliwe omówienie historii i szczegółów wewnętrznych mechanizmów Reacta, które każdy może zrozumieć. Jeżeli chcesz wzbogacić wiedzę z zakresu tej biblioteki, niniejsza pozycja będzie doskonałym wyborem.

- Daniel Afonso, Developer Advocate, OLX

To jest najbardziej szczegółowe omówienie Reacta i sposobu jego działania, z jakim się spotkałem. Ta pozycja jest obowiązkowa dla każdego programisty, który chce poznać bibliotekę React od podszewki. I nie próbuję się tutaj podlizać autorowi.

- Sergii Kirianov, Developer Advocate, Vue Storefront

Dzięki książce Tejasa nie tylko dokładnie poznałem skomplikowane koncepcje - takie jak wypełnianie, memoizacja i komponenty serwera - ale również udoskonaliłem umiejętności w zakresie tworzenia kodu źródłowego oraz usprawniłem proces programowania przed utworzeniem pierwszego wiersza kodu.

- Kenneth Quiggins, twórca oprogramowania

Z większości książek dotyczących Reacta dowiesz się jedynie, jak używać tej biblioteki, natomiast z książki Tejasa dowiesz się również, jak React działa. Tejas wykonał doskonałą pracę, przedstawiając trudne szczegóły, które są pomijane przez większość autorów. Ponadto postawił się w trudnym położeniu, gdy wiele znanych postaci ze społeczności Reacta przeanalizowało jego pracę. Skorzystał z ich wiedzy, a następnie zawarł ją w książce. Wielkie brawa dla Tejasa.

- Lenz Weber-Tronic, opiekun klienta Apollo Client i pakietu Redux Toolkit