React

React (oficjalnie React.js lub ReactJS) to biblioteka JavaScript do budowy interfejsów użytkownika, stworzona przez Meta (dawniej Facebook) w 2013 roku. React zmienił sposób, w jaki tworzy się Frontend aplikacji webowych — zamiast ręcznie manipulować elementami strony (DOM), opisujesz, jak interfejs MA wyglądać, a React sam oblicza, co trzeba zmienić.

React to najpopularniejsza technologia frontendowa na świecie. Według Stack Overflow Developer Survey jest używany przez ponad 40% profesjonalnych programistów. Napędza interfejsy Facebooka, Instagrama, Netflixa, Airbnb, Uberr, Discorda, WhatsApp Web i tysięcy innych aplikacji. Jeśli korzystasz z nowoczesnej aplikacji webowej, jest duża szansa, że pod spodem siedzi React.

Geneza — dlaczego powstał React?

W 2011 roku Facebook miał problem: ich interfejs był coraz bardziej złożony (czat, powiadomienia, feed, komentarze, reakcje — wszystko na jednej stronie), a tradycyjne podejście do manipulacji DOM-em stawało się niemal niemożliwe do utrzymania. Każda zmiana w jednym miejscu mogła zepsuć coś w drugim.

Jordan Walke, inżynier Facebooka, stworzył prototyp Reacta, który rozwiązywał ten problem deklaratywnym podejściem: zamiast mówić przeglądarce „zmień tekst w tym elemencie, potem dodaj klasę CSS do tamtego, potem ukryj trzeci”, opisujesz pożądany stan interfejsu, a React sam oblicza minimalne zmiany DOM-u potrzebne do aktualizacji.

Jak działa React — kluczowe koncepcje

Komponenty:

React dzieli interfejs na komponenty — niezależne, wielokrotnego użytku bloki UI. Przycisk to komponent. Nagłówek to komponent. Formularz logowania to komponent zawierający inne komponenty (inputy, przyciski, linki). Tworzysz raz, używasz wszędzie — jak klocki LEGO. Zmiana w jednym komponencie nie psuje reszty, bo każdy jest izolowany.

JSX:

React używa JSX — składni łączącej JavaScript z HTML. Zamiast pisać HTML w osobnych plikach, tworzysz interfejs bezpośrednio w kodzie JavaScript: <button onClick={handleClick}>Kup teraz</button>. Na początku wygląda dziwnie (HTML w JS?!), ale szybko staje się intuicyjne — wszystko w jednym miejscu, łatwiej śledzić zależności.

Virtual DOM:

React utrzymuje wirtualną kopię drzewa DOM w pamięci. Gdy stan się zmienia, React porównuje nowy Virtual DOM ze starym (reconciliation), oblicza minimalne zmiany i aktualizuje tylko te elementy, które faktycznie się zmieniły. To jak redaktor, który nie przepisuje całego artykułu od nowa, gdy zmienisz jedno zdanie — poprawia tylko to zdanie.

Stan (state) i props:

Każdy komponent może mieć stan (state) — dane, które się zmieniają (np. czy formularz jest otwarty, ile produktów jest w koszyku). Props to dane przekazywane z komponentu-rodzica do dziecka (np. nazwa produktu, cena). Gdy state się zmienia, React automatycznie przerenderowuje komponent i jego dzieci. To reaktywność — interfejs reaguje na zmiany danych bez ręcznej manipulacji.

Ekosystem Reacta

Sam React to biblioteka UI — potrzebujesz dodatkowych narzędzi do budowy pełnej aplikacji:

• Next.js — framework zbudowany na React, dodający routing, SSR (Server-Side Rendering), SSG (Static Site Generation), API routes. Złoty standard w profesjonalnych projektach React. Tworzony przez Vercel.
• React Router — nawigacja między stronami w SPA (Single Page Application).
• Redux / Zustand / Jotai — zarządzanie stanem globalnym (dane współdzielone między wieloma komponentami). Redux to klasyk, Zustand i Jotai to nowsze, prostsze alternatywy.
• TanStack Query (React Query) — zarządzanie danymi z serwera (cacheowanie, synchronizacja, refetching).
• Tailwind CSS / Styled Components — stylowanie komponentów.

React vs Vue vs Angular

Trzy główne frameworki frontendowe (React technicznie to biblioteka, ale w praktyce pełni rolę frameworka):

• React — minimalistyczny rdzeń, elastyczność, największy ekosystem i rynek pracy. Wymaga samodzielnego doboru narzędzi (routing, stan, formularze). Krzywa uczenia: średnia.
• Vue.js — łatwiejszy do nauki, lepszy do małych i średnich projektów. Oficjalny router i store. Popularny w Europie i Azji. Krzywa uczenia: łagodna.
• Angular — pełny framework z opinią (TypeScript obowiązkowy, dependency injection, RxJS). Dominuje w korporacjach. Krzywa uczenia: stroma.

Który wybrać? Dla rynku pracy — React (najwięcej ofert). Dla szybkiego startu — Vue. Dla enterprise — Angular. Ale wszystkie trzy rozwiązują ten sam problem i programista znający jedno szybko opanuje drugie.

React Native — od strony do aplikacji mobilnej

React Native (2015) pozwala budować natywne aplikacje mobilne (iOS i Android) z użyciem Reacta i JavaScriptu. Jeden codebase — dwie platformy. Facebook, Instagram, Shopify, Discord — ich aplikacje mobilne używają React Native. To nie jest „strona internetowa w opakowaniu” — React Native renderuje natywne komponenty UI (prawdziwe przyciski iOS, prawdziwy scroll Androida). Alternatywa: Flutter (Google, Dart).

Typowe błędy początkujących z Reactem

• Over-engineering — landing page z Reduxem, React Query i 15 bibliotekami. Prosty projekt nie potrzebuje złożonego stosu. Zacznij od minimum, dodawaj narzędzia gdy pojawi się realna potrzeba.
• Prop drilling — przekazywanie danych przez 5 poziomów komponentów zamiast użycia kontekstu (React Context) lub zarządzania stanem (Zustand).
• Brak memoizacji — niepotrzebne re-rendery spowalniające aplikację. React.memo, useMemo, useCallback — narzędzia optymalizacji, ale używaj ich z głową, nie wszędzie.
• Ignorowanie Server Components — React 19 i Next.js App Router wprowadzają Server Components, które renderują się na serwerze, zmniejszając bundle JavaScriptu wysyłanego do klienta. To przyszłość Reacta — warto zrozumieć wcześnie.