React

React to biblioteka do budowy interfejsów opartych na komponentach, która ułatwia podział aplikacji na niezależne, wielokrotnego użytku elementy. Na początku warto sprawdzić sposób organizacji komponentów, przepływ danych, podział na warstwy widoków i logiki oraz zasady pracy z JSX, hookami i routingiem. Przykładowo, formularze, listy i widoki szczegółowe zwykle rozdziela się na komponenty prezentacyjne i kontenerowe, aby uprościć rozwój i debugowanie.
Ten temat przerabiamy praktycznie na szkoleniu: Tworzenie aplikacji z użyciem React.

React sprawdza się w aplikacjach SPA, natomiast Next.js rozszerza ten model o routing plikowy, SSR, generowanie statyczne i mechanizmy wspierające SEO. Przy wyborze warto porównać wymagania dotyczące indeksowania treści, czasu pierwszego renderu, źródeł danych oraz sposobu wdrożenia aplikacji produkcyjnych. Dobrym przykładem są serwisy treściowe i sklepy, gdzie SSR lub statyczne generowanie stron zwykle lepiej wspierają widoczność w wyszukiwarkach niż klasyczne SPA.
Jeśli chcesz przećwiczyć to krok po kroku, zobacz: Aplikacje Full-Stack z użyciem React.js i Next.js.

SSR w Next.js polega na renderowaniu widoków po stronie serwera, a statyczne generowanie tworzy gotowe strony podczas budowania aplikacji lub na żądanie. Trzeba sprawdzić częstotliwość zmian danych, wymagania SEO, wpływ na Web Vitals oraz to, czy treści muszą być generowane dla każdego żądania użytkownika. Przykładowo, strony produktowe z często zmieniającą się dostępnością mogą korzystać z innych strategii niż dokumentacja lub sekcje marketingowe publikowane rzadziej.
Wersję warsztatową (z konfiguracją i przykładami) znajdziesz w programie szkolenia: Aplikacje Full-Stack z użyciem React.js i Next.js.

Zarządzanie stanem w React obejmuje zarówno lokalny stan komponentów, jak i współdzielone dane używane w wielu częściach aplikacji. Warto ocenić skalę projektu, liczbę zależności między widokami, potrzebę debugowania zmian stanu oraz to, czy logika biznesowa wymaga centralnego store’a i selektorów. Przykładowo, Context API bywa wystarczający dla motywów i ustawień użytkownika, a Redux Toolkit lepiej porządkuje rozbudowane przepływy danych i komunikację z backendem.
Dokładnie ten zestaw narzędzi i workflow ćwiczymy podczas szkolenia: Tworzenie aplikacji z użyciem React.

Optymalizacja wydajności obejmuje ograniczanie kosztów renderowania, zmniejszanie rozmiaru paczek oraz poprawę metryk takich jak LCP czy CLS. Należy sprawdzić miejsca nadmiarowych renderów, sposób ładowania komponentów, wykorzystanie lazy loadingu, memoizacji, cache’owania oraz wpływ zasobów zewnętrznych na czas ładowania. Przykładem skutecznej poprawy jest podział kodu na mniejsze części, dynamiczne importy i przesunięcie cięższych operacji poza ścieżkę krytyczną.
To jedno z zagadnień omawianych podczas szkolenia: Aplikacje Full-Stack z użyciem React.js i Next.js.

Testowanie aplikacji React polega na weryfikacji zachowania komponentów, logiki formularzy, komunikacji z API i reakcji interfejsu na działania użytkownika. Trzeba sprawdzić poprawność selektorów, mockowanie zależności, obsługę asynchroniczności, skutki uboczne w useEffect oraz stabilność walidacji formularzy i routingu. Przykładowo, częstym błędem jest testowanie implementacji zamiast zachowania widocznego dla użytkownika, co utrudnia późniejsze refaktoryzacje.
Ten temat przerabiamy praktycznie na szkoleniu: Tworzenie aplikacji z użyciem React.