Co to jest React - przykłady użycia

Jeśli kiedykolwiek interesowałeś się tworzeniem stron internetowych, aplikacji webowych albo po prostu zastanawiałeś się, jak powstają te wszystkie nowoczesne interfejsy, które reagują na kliknięcia, animują się i działają bez przeładowywania strony – to React jest jednym z głównych bohaterów tej historii. W świecie frontendu React to trochę jak Ferrari w świecie motoryzacji: szybki, efektowny, popularny i pożądany przez programistów na całym świecie.

Ale zanim zaczniemy rzucać się w wir kodu, przykładów i technicznych smaczków, zacznijmy od podstaw. Co to właściwie jest React? Po co powstał? Dlaczego wszyscy o nim mówią? I przede wszystkim – jak możesz go użyć w praktyce?

Czym właściwie jest React?

React to biblioteka JavaScript stworzona przez Facebooka (dziś Meta), która służy do budowania interfejsów użytkownika. I to nie byle jakich interfejsów – chodzi o takie, które są dynamiczne, szybkie i reagują na działania użytkownika bez konieczności przeładowywania całej strony.

Możesz myśleć o React jak o zestawie klocków LEGO. Każdy klocek to komponent – mały, samodzielny element interfejsu, który możesz wielokrotnie wykorzystywać. Raz zbudujesz przycisk, kartę produktu, formularz logowania – i możesz je wstawiać gdzie tylko chcesz. To właśnie komponenty są sercem Reacta.

React nie jest frameworkiem (jak Angular czy Vue). To biblioteka. Daje Ci narzędzia, ale nie narzuca całej struktury projektu. Masz dużo swobody, co dla jednych jest błogosławieństwem, a dla innych przekleństwem.

Dlaczego React stał się tak popularny?

React zdobył świat frontendu jak burza. I nie bez powodu. Oto kilka rzeczy, które sprawiły, że programiści go pokochali:

1. Komponenty – budujesz raz, używasz wiele razy

To jak posiadanie szablonu, który możesz kopiować bez końca. Oszczędza czas, nerwy i sprawia, że kod jest bardziej uporządkowany.

2. Virtual DOM – magia szybkości

React nie manipuluje bezpośrednio DOM‑em przeglądarki, który jest dość wolny. Zamiast tego tworzy jego wirtualną kopię i aktualizuje tylko te elementy, które faktycznie się zmieniły. To jak wymiana jednej cegły w ścianie zamiast burzenia całego domu.

3. Ogromna społeczność i ekosystem

Masz problem? Ktoś już go miał. Szukasz biblioteki? Ktoś już ją napisał. React to jeden z największych ekosystemów w świecie programowania.

4. JSX – HTML w JavaScript

JSX to taki miks HTML i JavaScript. Na początku może wydawać się dziwny, ale szybko staje się naturalny. Dzięki niemu możesz pisać strukturę komponentów w sposób bardzo czytelny.

5. Uniwersalność

React działa nie tylko w przeglądarce. Dzięki React Native możesz tworzyć aplikacje mobilne na Androida i iOS. Natomiast dzięki Next.js – aplikacje SSR. Dzięki Electron – aplikacje desktopowe.

Jak działa React?

Żeby zrozumieć React, musisz poznać kilka kluczowych pojęć:

Komponenty

To podstawowe elementy aplikacji. Mogą być:

funkcyjne (najpopularniejsze dziś),
klasowe (starszy sposób, nadal działa).

Komponent to po prostu funkcja, która zwraca JSX.

Stan (state)

Stan to dane, które mogą się zmieniać w czasie. Na przykład licznik kliknięć, zawartość formularza, lista produktów pobrana z API.

Propsy

Propsy to dane przekazywane do komponentu z zewnątrz. Coś jak argumenty funkcji.

Hooki

To specjalne funkcje, które pozwalają korzystać ze stanu i innych funkcji Reacta w komponentach funkcyjnych. Najpopularniejszy hook to useState.

Pierwszy przykład: prosty komponent React

Zacznijmy od czegoś bardzo prostego – komponentu, który wyświetla tekst.

function Powitanie() {
  return <h1>Cześć! Jestem komponentem React.</h1>;
}

export default Powitanie;

To wszystko. Jedna funkcja, która zwraca JSX. Możesz ją wstawić do aplikacji jak zwykły element HTML:

<Powitanie />

Przykład 2: komponent ze stanem (useState)

Teraz coś bardziej interaktywnego – licznik.

import { useState } from "react";

function Licznik() {
  const [liczba, setLiczba] = useState(0);

  return (
    <div>
      <p>Aktualna wartość: {liczba}</p>
      <button onClick={() => setLiczba(liczba + 1)}>Dodaj</button>
    </div>
  );
}

export default Licznik;

Tutaj dzieje się magia:

useState(0) tworzy stan o wartości początkowej 0.
setLiczba aktualizuje stan.
React automatycznie odświeża widok po zmianie stanu.

Przykład 3: pobieranie danych z API (useEffect)

React świetnie nadaje się do aplikacji, które pobierają dane z serwera. Oto przykład:

import { useEffect, useState } from "react";

function ListaUzytkownikow() {
  const [uzytkownicy, setUzytkownicy] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUzytkownicy(data));
  }, []);

  return (
    <div>
      <h2>Lista użytkowników</h2>
      {uzytkownicy.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default ListaUzytkownikow;

useEffect działa jak „reakcja” na zdarzenia – tutaj uruchamia się raz po załadowaniu komponentu i pobiera dane.

Gdzie używa się Reacta?

React jest wszędzie. Serio. Oto kilka miejsc, gdzie możesz go spotkać:

1. Aplikacje webowe

Od prostych stron po ogromne systemy. Facebook, Instagram, Netflix, Uber – wszyscy używają Reacta.

2. Panele administracyjne

React świetnie nadaje się do dashboardów, gdzie dane zmieniają się dynamicznie.

3. Sklepy internetowe

Dzięki Reactowi możesz tworzyć szybkie, interaktywne sklepy, które nie przeładowują strony.

4. Aplikacje mobilne (React Native)

Ten sam sposób myślenia, te same komponenty – ale aplikacja działa na telefonie.

5. Aplikacje desktopowe (Electron + React)

Tak powstał m.in. . Slack czy Visual Studio Code.

Jak zacząć pracę z Reactem?

Najprostszy sposób to użycie narzędzia Vite lub Create React App.

Instalacja projektu React (Vite)

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

Po chwili masz działający projekt React.

React w praktyce – mini aplikacja TODO

Zbudujmy coś bardziej konkretnego. Prosty TODO list – klasyk, ale świetnie pokazuje, jak działa React.

Kod aplikacji TODO

import { useState } from "react";

function TodoApp() {
  const [zadanie, setZadanie] = useState("");
  const [lista, setLista] = useState([]);

  const dodajZadanie = () => {
    if (zadanie.trim() === "") return;
    setLista([...lista, zadanie]);
    setZadanie("");
  };

  return (
    <div>
      <h1>Lista zadań</h1>

      <input
        type="text"
        value={zadanie}
        onChange={(e) => setZadanie(e.target.value)}
        placeholder="Wpisz zadanie..."
      />

      <button onClick={dodajZadanie}>Dodaj</button>

      <ul>
        {lista.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

To mała aplikacja, ale pokazuje:

stan,
obsługę formularza,
renderowanie listy,
aktualizację widoku.

Czy React jest trudny?

React sam w sobie nie jest trudny. Trudne jest to, co jest wokół niego:

routing,
zarządzanie stanem globalnym,
optymalizacja,
integracja z backendem,
biblioteki dodatkowe.

Ale dobra wiadomość jest taka, że możesz zacząć od podstaw i rozwijać się stopniowo.

React a SEO – czy to się gryzie?

React generuje HTML po stronie przeglądarki, co kiedyś było problemem dla SEO. Dziś jednak istnieją narzędzia takie jak:

Next.js – generuje HTML po stronie serwera,
Gatsby – generuje statyczne strony.

Dzięki nim React świetnie nadaje się nawet do stron, które muszą być dobrze widoczne w Google.

Czy warto uczyć się Reacta?

Jeśli chcesz pracować jako frontend developer – zdecydowanie tak. React jest:

najpopularniejszą biblioteką frontendową,
często wymagany w ofertach pracy,
używany w ogromnych projektach,
wspierany przez gigantyczną społeczność.

Nawet jeśli później wybierzesz Angulara czy Vue, znajomość Reacta da Ci solidne podstawy.

Podsumowanie

React to potężna, elastyczna i niezwykle popularna biblioteka JavaScript do budowania interfejsów użytkownika. Dzięki komponentom, hookom i Virtual DOM pozwala tworzyć szybkie, nowoczesne i interaktywne aplikacje. Jest używany przez największe firmy na świecie, a jego ekosystem daje ogromne możliwości – od stron internetowych, przez aplikacje mobilne, aż po aplikacje desktopowe.

Jeśli chcesz wejść w świat frontendu, React to świetny wybór. A jeśli już programujesz – React pozwoli Ci tworzyć projekty szybciej, czyściej i bardziej profesjonalnie.