Czym jest React? Biblioteka do interfejsów i dlaczego warto zacząć od niej

Jeśli stoisz przed wyborem pierwszej technologii frontendowej, trafisz na trzy nazwy: React, Vue i Angular. Ten artykuł wyjaśnia, czym jest React, jak działa na działającym przykładzie, i dlaczego to on jest naszą rekomendacją na start. Po drodze rozdzielam fakty (dane, wersje, uruchomiony kod) od opinii (nasze zdanie, że React jest dziś najlepszym wyborem na wejście).

Czym jest React?

React to biblioteka do budowania interfejsów użytkownika. Oficjalna dokumentacja opisuje go jako bibliotekę do interfejsów webowych i natywnych (aktualna wersja: 19.3). Idea jest prosta: dzielisz ekran na komponenty (przycisk, formularz, karta, cała strona), a każdy z nich to zwykła funkcja JavaScript, która zwraca znaczniki:

function MyButton() {
  return <button>Jestem przyciskiem</button>;
}

Ten zapis, w którym znaczniki wyglądają jak HTML wewnątrz JavaScriptu, to JSX. Komponenty możesz zagnieżdżać, a ich nazwy zawsze zaczynasz wielką literą (tak React odróżnia je od zwykłych znaczników HTML).

Ważne rozróżnienie: React jest biblioteką, a nie pełnym frameworkiem. Zajmuje się widokiem, czyli tym, co widzi użytkownik. Routing (przechodzenie między stronami), pobieranie danych na serwerze i wdrożenie dobierasz osobno albo bierzesz gotowy framework zbudowany na Reaccie, taki jak Next.js.

Jak wygląda aplikacja w Reakcie? Przykład listy zadań

Zamiast opisywać, pokażę całość. To aplikacja z polem tekstowym, przyciskiem „Dodaj”, licznikiem i listą zadań. Uruchomiłem ją w Reakcie 19.3.1 z Vite:

import { useState } from "react";

export default function App() {
  const [text, setText] = useState("");
  const [tasks, setTasks] = useState([]);

  function addTask(event) {
    event.preventDefault();
    if (!text.trim()) return;
    setTasks([...tasks, { id: Date.now(), title: text.trim() }]);
    setText("");
  }

  return (
    <main>
      <h1>Lista zadań</h1>
      <form onSubmit={addTask}>
        <input
          value={text}
          onChange={(event) => setText(event.target.value)}
          placeholder="Nowe zadanie"
        />
        <button type="submit">Dodaj</button>
      </form>
      <p>Liczba zadań: {tasks.length}</p>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </main>
  );
}

Cztery pojęcia, które tu widać, to prawie całe podstawy Reacta:

• Stan (state, useState): pamięć komponentu. tasks to lista zadań, a setTasks to jedyny sposób, by ją zmienić. Gdy wywołasz setTasks, React sam przerysuje wszystko, co od niej zależy.
• Właściwości (props): dane przekazywane do komponentu z zewnątrz (tu ich nie ma, bo to jeden komponent, ale <MyButton label="Zapisz" /> przekazuje label).
• Renderowanie warunkowe i list: tasks.map(...) zamienia tablicę w listę elementów, a atrybut key pomaga Reactowi śledzić, który element jest który.
• Zdarzenia: onChange, onSubmit to funkcje, które reagują na działania użytkownika.

W Chrome dodałem dwa zadania („Kupić mleko”, „Napisać artykuł”). Licznik pokazał „Liczba zadań: 2”, a lista zawierała oba wpisy.

Skąd tyle JavaScriptu? Bo React wymaga solidnych podstaw tego języka: map, destrukturyzacji, funkcji strzałkowych. Jeśli czujesz tu niepewność, sprawdź się w wyzwaniu czy jestem gotowy na Reacta i powtórz metody tablicowe, na których opiera się większość kodu reactowego.

Co tak naprawdę robi React pod spodem?

W starszym, „ręcznym” JavaScripcie sam modyfikujesz DOM: znajdujesz element, zmieniasz jego tekst, dodajesz li. W Reakcie opisujesz, jak ma wyglądać interfejs dla danego stanu, a React sam dba o to, żeby ekran się zgadzał. To podejście nazywamy deklaratywnym. Dzięki niemu w przykładzie powyżej nigdzie nie piszesz „dodaj element do listy”: dopisujesz zadanie do tablicy tasks, a React rysuje listę od nowa.

Konsekwencja, którą warto zapamiętać od początku: stanu nie modyfikujesz bezpośrednio (nie robisz tasks.push(...)), tylko przekazujesz nową wartość do setTasks. W przykładzie robi to zapis [...tasks, nowyElement], który tworzy nową tablicę.

Dlaczego React jest tak popularny? Dane ze Stack Overflow 2025

Ankieta Stack Overflow Developer Survey 2025 pozwala porównać trzy największe narzędzia frontendowe. Pierwsza tabela dotyczy programistów zawodowych, którzy intensywnie pracowali w danej technologii w ostatnim roku. Druga dotyczy wszystkich respondentów: „desired” to odsetek tych, którzy chcą jej używać w następnym roku, a „admired” to odsetek tych, którzy jej używali i chcą kontynuować.

Jak to czytać? Trzy uwagi:

• React ma najwięcej użytkowników i najwięcej chętnych do jego użycia w przyszłości, wyraźnie więcej niż Vue i Angular.
• Satysfakcja jest podobna: Vue (50,9%) jest blisko Reacta (52,1%), więc nie ma tu bezspornej przewagi. Popularność Reacta to jego główny argument, nie jakość „doznań” programisty.
• To nie jest lista ofert pracy. Ankieta jest dobrowolna i pokazuje respondentów, a nie rynek. Nie mam danych o liczbie ofert na React, Vue i Angulara w Polsce, więc ich nie podaję.

Źródło: Stack Overflow Developer Survey 2025, Technology.

Czy React to najlepszy wybór na wejście do frontendu?

To nasza rekomendacja, nie prawo natury, i opieram ją na kilku konkretnych przesłankach:

1. Rynek i materiały. Najczęściej używany z trzech (dane wyżej), więc najłatwiej o dokumentację, kursy, odpowiedzi na pytania i przykłady kodu.
2. Ekosystem, który rośnie razem z Tobą. Na Reaccie zbudowane są frameworki, które oficjalna dokumentacja poleca do nowych projektów: Next.js, React Router i Expo (aplikacje mobilne). Naukę zaczynasz od jednej biblioteki, a potem możesz iść w kierunku pełnych aplikacji w Next.js lub aplikacji mobilnych.
3. Mały „rdzeń”. Podstawy Reacta (komponent, props, state) mieszczą się w jednym przykładzie jak wyżej. To dobry model mentalny, który przenosi się na inne narzędzia.
4. Zgodność z tym, czego uczymy. W naszym programie frontendowym React jest głównym tematem po JavaScripcie: komponenty, kompozycja, stylowanie, routing, testowanie. Zobacz, co musi umieć junior frontend developer.

Uczciwie: Vue i Angular są dojrzałymi, szeroko używanymi narzędziami i można zacząć od któregoś z nich. Jeśli Twój cel to konkretna firma lub projekt, który już używa Vue albo Angulara, wybierz to, czego tam używają. Dla kogoś, kto dopiero wchodzi do frontendu i nie ma takiego ograniczenia, polecamy React.

React, Vue czy Angular? Porównanie na tej samej aplikacji

Żeby porównanie nie opierało się tylko na opiniach, zbudowałem tę samą listę zadań w trzech narzędziach i zbudowałem wersje produkcyjne. W każdej po dodaniu dwóch zadań licznik pokazuje 2, a lista oba wpisy.

Szczegółowe opisy pozostałych dwóch narzędzi, z tym samym kodem w ich składni, znajdziesz w artykułach o Vue i Angularze. Dwa zastrzeżenia do rozmiarów: to minimalna aplikacja zbudowana domyślnymi narzędziami, a nie rzetelny benchmark, i nie wynika z niej, że „Vue jest lepsze”, bo w prawdziwych projektach rozmiar zależy od wielu innych rzeczy. Pokazuje tylko, że różnice w startowym koszcie są realne, ale żadna z trzech paczek nie jest duża.

Którego narzędzia wybrać w zależności od celu?

Jak zacząć naukę Reacta?

Kolejność, która sprawdza się najlepiej:

1. Solidne podstawy HTML, CSS i JavaScriptu. Bez tego React będzie magią, a nie narzędziem. Sprawdź się w wyzwaniu czy jestem gotowy na Reacta.
2. Podstawy Reacta: komponenty, props, state, zdarzenia, formularze, listy.
3. Dane i routing: pobieranie z API, kilka stron, stan globalny.
4. Testowanie: testowanie komponentów w React Testing Library.
5. TypeScript i Next.js: TypeScript jako kolejny krok po JavaScript.

Do nauki podstaw wystarczy prosty projekt zbudowany z Vite (tak jak przykład powyżej). Dokumentacja Reacta zaznacza jednak, że do prawdziwej aplikacji warto wybrać framework, na przykład Next.js, więc później i tak do niego dojdziesz.

Na naszym kursie frontend online przechodzimy cały ten tor z mentorem: od JavaScriptu, przez React (komponenty, kompozycja, stylowanie, Redux, routing, testowanie), po TypeScript i Next.js, z regularnym code review Twoich zadań i wsparciem w rekrutacji. Zapraszam do zapoznania się z programem: kurs frontend z mentorem. Początek zapewnia moduł React: Wprowadzenie.

Podsumowanie

• React to biblioteka do budowania interfejsów z komponentów, które opisują wygląd ekranu dla danego stanu.
• Podstawy to komponent, JSX, props, state i zdarzenia; stan zmieniasz tylko przez funkcję setX, nie bezpośrednio.
• W ankiecie Stack Overflow 2025 React używa 46,9% programistów zawodowych (Angular 19,8%, Vue 18,4%), a satysfakcja (admired) jest zbliżona do Vue.
• Rekomendujemy React na wejście do frontendu, ale to rekomendacja, a nie reguła: jeśli celujesz w firmę z Vue lub Angularem, wybierz to, czego tam używają.
• Zaproszenie: kurs frontend online z mentorem, który prowadzi od JavaScriptu przez React do Next.js.