React od podstaw – wprowadzenie dla początkujących

Poznasz krok po kroku podstawy Reacta – od tego, czym jest i jak go zainstalować, aż po stworzenie pierwszego komponentu, pracę ze stanem oraz najważniejsze zasady dostępności (a11y) w aplikacjach React.

Czym jest React i do czego służy?

React to popularna biblioteka języka JavaScript służąca do budowania interfejsów użytkownika (UI). Została stworzona przez zespół Facebooka (dziś Meta) około 2013 roku i jest wykorzystywana w wielu dużych serwisach oraz aplikacjach webowych.

React koncentruje się na:

budowaniu widoków (UI) na podstawie danych,
tworzeniu wielokrotnego użytku komponentów,
efektywnym zarządzaniu stanem i jego wpływem na to, co widzi użytkownik.

Typowe zastosowanie Reacta to aplikacje typu Single Page Application (SPA) – strony, które ładują się raz, a kolejne „podstrony” są renderowane dynamicznie po stronie przeglądarki, bez pełnego przeładowania.

Dlaczego określamy React jako bibliotekę, a nie framework?

Biblioteka – skupia się na jednym obszarze (UI) i pozwala Tobie dobrać resztę narzędzi (routing, zarządzanie stanem globalnym, stylowanie).

Framework – narzuca kompletne ramy działania (np. struktura projektu, router, warstwa danych).

React celowo rozwiązuje przede wszystkim problem budowy dynamicznego interfejsu, pozostawiając Ci swobodę w doborze pozostałych elementów.

Dlaczego warto uczyć się Reacta?

Kilka kluczowych powodów:

Popularność i rynek pracy – React jest jedną z najczęściej używanych bibliotek frontendowych na świecie, pojawia się w ogromnej liczbie ofert pracy;
Komponenty wielokrotnego użytku – aplikacja jest zbudowana z małych klocków (komponentów), które możesz wykorzystać w wielu miejscach;
Deklaratywny sposób budowy UI – opisujesz co ma być wyświetlone dla danego stanu danych, a React zajmuje się jak to narysować w DOM-ie;
Wydajność – React używa wirtualnego drzewa DOM („virtual DOM”) i inteligentnie aktualizuje tylko te fragmenty, które się zmieniły;
Ogromny ekosystem – biblioteki do routingu, formularzy, testów, zarządzania stanem, a nawet całe metaframeworki (np. do SSR).

Z perspektywy serwisu poświęconego dostępności ważne jest też to, że React:

świetnie współpracuje z semantycznym HTML (to Twój kod decyduje o semantyce),
umożliwia wygodne używanie atrybutów ARIA,
daje narzędzia do zarządzania fokusem, stanem formularzy i dynamicznymi komunikatami.

Co warto umieć przed Reactem?

Zanim wejdziesz w React, dobrze jest mieć podstawy:

HTML – szczególnie znaczenie nagłówków, list, przycisków, formularzy, atrybutów alt, aria-* i poprawnej struktury dokumentu (dla dostępności);
CSS – siatki (Flexbox, Grid), responsywność, kolory, kontrast;
JavaScript (ES6) – znajomość współczesnej składni i pracy z danymi:
- zmienne let / const,
- funkcje strzałkowe,
- destrukturyzacja obiektów/tablic,
- moduły (import / export),
- podstawy pracy z obiektami i tablicami (np. .map, .filter).

Bez tego React będzie tylko dodatkową warstwą komplikującą naukę.

Przygotowanie środowiska – Node, npm, edytor

Do pracy z Reactem niezbędne jest środowisko oparte na Node.js.

Node.js – platforma uruchamiania JavaScript poza przeglądarką.

npm (Node Package Manager) – menedżer pakietów instalowany razem z Node.js.

Po instalacji Node.js możesz w terminalu sprawdzić wersje:

node -v npm -v

Jeśli zobaczysz numery wersji, środowisko jest gotowe.

Do edycji kodu najlepiej użyć edytora:

Visual Studio Code – lekki, darmowy, z bogatym ekosystemem rozszerzeń.

Warto dodać rozszerzenia do Reacta / JavaScriptu, np. snippetów kodu.

Jak założyć pierwszy projekt React?

Create React App – klasyczne podejście

Popularnym i prostym sposobem rozpoczęcia pracy z Reactem jest użycie narzędzia Create React App (CRA). Daje ono gotową konfigurację bundlera, transpilerów, testów itd.

Kroki:

Upewnij się, że masz Node.js i npm.
W terminalu przejdź do katalogu, w którym chcesz utworzyć projekt.
Uruchom:

npx create-react-app moj-pierwszy-react

Komenda npx pozwala uruchomić pakiet npm bez instalowania go globalnie.

Wejdź do katalogu projektu:

cd moj-pierwszy-react

Uruchom aplikację w trybie deweloperskim:

npm start

Po chwili zobaczysz działającą aplikację React w przeglądarce (domyślnie pod adresem lokalnym).

Alternatywa – Vite – lżejszy i szybszy start

Coraz częściej zamiast CRA używa się lekkich bundlerów, takich jak Vite.

Vite oferuje bardzo szybki start projektu i przeładowanie strony podczas pracy nad kodem.

Inicjalizacja projektu React za pomocą Vite jest równie prosta (np. poprzez komendę npm create vite@latest).

Dla porównania, najważniejsze różnice między CRA i Vite prezentują się następująco:

Narzędzie	Start dev-serwera	Konfiguracja	Rozszerzalność	Gdzie użyć
CRA	wolniejszy przy większych projektach	domyślna, „bezobsługowa”	możliwa, ale mniej elastyczna	nauka, szybkie prototypy
Vite	bardzo szybki (HMR)	lekka, prostsza	wysoka elastyczność	małe i duże projekty, nowoczesny stack

Na potrzeby tego wprowadzenia skupimy się na CRA, ale konfiguracja i struktura w Vite są podobne koncepcyjnie.

Struktura projektu React po utworzeniu

Po utworzeniu projektu (np. przez CRA) zobaczysz strukturę katalogów podobną do:

public/,
index.html,
src/,
index.js,
App.js,
pliki CSS, zasoby itd.

Public/index.html

To jedyny plik HTML w typowej aplikacji SPA opartej o CRA.

W środku znajduje się element:

<div id="root"></div>

React montuje całą aplikację właśnie wewnątrz tego elementu – to tu „wpina się” do DOM.

Src/index.js

To punkt startowy aplikacji w JavaScript. Typowo:

importuje Reacta i narzędzie do renderowania (np. react-dom/client),
importuje główny komponent App,
„montuje” aplikację w elemencie #root z index.html.

W uproszczeniu (forma przykładowa):

import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);

Src/App.js

To główny komponent aplikacji. Po utworzeniu projektu zobaczysz tam przykładowy komponent funkcyjny, który możesz swobodnie modyfikować.

Za chwilę napiszemy własny.

Komponenty – serce Reacta

React opiera się na komponentach – niewielkich, odizolowanych fragmentach interfejsu, które można wielokrotnie wykorzystywać.

Przykład prostego komponentu funkcyjnego:

function Naglowek() { return <h1>Witaj w mojej pierwszej aplikacji React!</h1>; }

export default Naglowek;

Kilka ważnych cech:

komponent funkcyjny to zwykła funkcja JavaScript, która zwraca JSX,
nazwa komponentu powinna zaczynać się dużą literą (Naglowek, nie naglowek) – dzięki temu React wie, że chodzi o komponent, a nie zwykły element DOM,
komponent możesz importować i używać w innym komponencie,

Przykład użycia komponentu w App:

import Naglowek from "./Naglowek";

function App() { return ( <main> <Naglowek /> </main> ); }

Komponenty można komponować – jeden w drugim – jak klocki.

JSX – HTML i JavaScript w jednym

Kod wewnątrz return w komponentach React to JSX – rozszerzenie składni JavaScript, które wygląda jak HTML, ale nim nie jest.

Przykład:

function Przyklad() { const imie = "Ania"; return <p>Cześć, {imie}!</p>; }

W JSX:

możesz używać znaczników podobnych do HTML (div, h1, button),
możesz wstrzykiwać wartość zmiennych i wyrażeń JavaScript w nawiasach klamrowych {},
JSX jest kompilowany do wywołań funkcji React (np. React.createElement) zanim trafi do przeglądarki.

Kilka różnic względem HTML:

zamiast class używamy className,
w etykietach formularzy używamy htmlFor zamiast for,
atrybuty są zwykle w camelCase, np.: onClick, tabIndex.

Props – przekazywanie danych między komponentami

Props (właściwości) to sposób przekazywania danych z komponentu nadrzędnego do podrzędnego.

Przykład:

function Powitanie(props) { return <p>Cześć, {props.imie}!</p>; }

function App() { return ( <main> <Powitanie imie="Kasia" /> <Powitanie imie="Tomek" /> </main> ); }

W JSX atrybuty na komponencie (imie="Kasia") trafiają do funkcji jako obiekt props.

Z użyciem destrukturyzacji:

function Powitanie({ imie }) { return <p>Cześć, {imie}!</p>; }

Propsy są tylko do odczytu – komponent nie powinien ich modyfikować, a jedynie używać do renderowania widoku.

Stan (state) – dynamiczne dane w komponencie

Propsy opisują dane przychodzące z zewnątrz, natomiast stan (state) to dane, które komponent przechowuje sam i które mogą się zmieniać w czasie.

We współczesnym Reactcie najczęściej używa się hooka useState:

import { useState } from "react";


function Licznik() {

  const [liczba, ustawLiczbe] = useState(0);
  function zwieksz() {

    ustawLiczbe(liczba + 1);

  }

return ( <section> <p>Aktualna wartość: {liczba}</p> <button onClick={zwieksz}>Kliknij, aby zwiększyć</button> </section> ); }

Wywołanie useState(0) ustawia wartość początkową stanu na 0; jednocześnie zwraca tablicę [wartosc, funkcjaAktualizujaca].

Po kliknięciu w przycisk wywołanie ustawLiczbe(liczba + 1) zmienia stan; React ponownie renderuje komponent z nową wartością liczba.

To fundament interaktywności w React.

Zdarzenia i obsługa interakcji użytkownika

React udostępnia syntetyczny system zdarzeń, który działa podobnie w różnych przeglądarkach. Zdarzenia podpinamy jako propsy w JSX:

onClick,
onChange,
onSubmit,
onKeyDown itd.

Przykład dostępnego przycisku:

function DostepnyPrzycisk() { function obsluzKlik() { alert("Kliknięto przycisk"); }

return ( <button type="button" onClick={obsluzKlik}> Zapisz ustawienia </button> ); }

Z punktu widzenia dostępności warto pamiętać o dwóch zasadach:

Zawsze używaj prawdziwego przycisku <button> zamiast div z onClick – wtedy kontrolka działa z klawiatury i jest rozpoznawana przez czytniki ekranu.

Unikaj „udawania” natywnych widgetów, jeśli istnieje odpowiedni element HTML.

React nie „robi” dostępności za Ciebie, ale też jej nie utrudnia. Dostępność zależy głównie od:

semantyki,
kolejności fokusu,
sposobu komunikowania zmian,
poprawnego użycia ARIA.

Semantyczny HTML w komponentach

W komponentach React piszesz normalny HTML (w postaci JSX) – to ogromna zaleta:

używaj <main>, <header>, <nav>, <section>, <article>, <footer>,
zachowaj hierarchię nagłówków (h1, h2, h3…),
do akcji używaj <button>, nie div lub <span>.

Przykładowy szkielet:

function App() { return ( <div className="App"> <header> <h1>Panel użytkownika</h1> </header>


      <main>

        <section aria-labelledby="sekcja-statystyki">

          <h2 id="sekcja-statystyki">Twoje statystyki</h2>

          {/* zawartość */}

        </section>

      </main>

Zwróć uwagę na prawidłowe powiązania i strukturę: atrybut aria-labelledby="sekcja-statystyki" łączy sekcję z nagłówkiem, a różne poziomy nagłówków ułatwiają nawigację użytkownikom czytników ekranu.

Atrybuty ARIA i JSX

W JSX możesz używać atrybutów ARIA jak w HTML:

<button aria-label="Otwórz panel ustawień" onClick={otworzUstawienia}> <IkonaUstawien /> </button>

ARIA nie zastępuje semantycznego HTML – używaj jej, gdy nie ma natywnego elementu lub gdy trzeba doprecyzować zachowanie.

Najczęściej używane atrybuty ARIA i ich zastosowania:

aria-label – alternatywny tekst dostępny, gdy wizualny opis nie jest odczytywany przez czytnik ekranu;
aria-labelledby – powiązanie elementu z innym (np. nagłówkiem), który pełni jego etykietę;
role – określenie roli komponentu (np. role="dialog") w niestandardowych wzorcach interfejsu.

Formularze w React i etykiety

Formularze są częstym źródłem problemów z dostępnością. Dwie kluczowe praktyki:

Zawsze łącz etykietę z polem poprzez <label htmlFor="idPola"> oraz odpowiednie id na kontrolce.

Komunikuj błędy tekstowo i powiąż je z polem (np. przez aria-describedby).

Przykład prostego kontrolowanego pola:

import { useState } from "react";


function FormularzNewslettera() {

  const [email, ustawEmail] = useState("");
Przeczytaj teżWzorce projektowe dostępnych komponentów – jak budować accessible UI
  function obsluzZmiane(e) {

    ustawEmail(e.target.value);

  }
  function obsluzWyslanie(e) {

    e.preventDefault();

    // obsługa wysyłki

  }
  return (

    <form onSubmit={obsluzWyslanie}>

      <label htmlFor="email">

        Adres e-mail

      </label>
      <input

        id="email"

        type="email"

        value={email}

        onChange={obsluzZmiane}

        required

      />

<button type="submit">Zapisz się</button> </form> ); }

htmlFor w JSX odpowiada for w HTML – zapewnia poprawne powiązanie etykiety z polem. Warto używać natywnej walidacji (np. required), gdyż jest rozpoznawana przez technologie asystujące.

Zarządzanie fokusem i SPA

W aplikacjach SPA treść zmienia się bez przeładowania. Po zmianie „podstrony” (np. po zmianie routingu) przenieś fokus na główny nagłówek lub element <main>. Możesz użyć do tego refów (useRef) i metody .focus().

Przykład (schematycznie):

import { useRef, useEffect } from "react";


function WidokStrony() {

  const naglowekRef = useRef(null);
  useEffect(() => {

    if (naglowekRef.current) {

      naglowekRef.current.focus();

    }

  }, []); // uruchomi się po "wejściu" na widok

return ( <main> <h1 ref={naglowekRef} tabIndex="-1"> Szczegóły zamówienia </h1> {/* treść strony */} </main> ); }

tabIndex="-1" pozwala ustawić fokus na nagłówku, nawet jeśli normalnie nie jest w kolejności tabulacji. Przeniesienie fokusu ułatwia orientację użytkownikom czytników ekranu po zmianie widoku.

Kolor, kontrast, focus styles

Choć to nie jest specyficzne dla Reacta, pamiętaj:

nie polegaj wyłącznie na kolorze do przekazywania informacji (dodaj ikonę, tekst),
zapewnij wystarczający kontrast tekstu względem tła,
nie usuwaj obwódki fokusu (outline) bez zapewnienia jej odpowiedniego zamiennika.

Przykład CSS:

button:focus-visible, a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }

W React te zasady stosujesz jak w każdym innym projekcie webowym – po prostu w komponencie importujesz odpowiedni plik CSS.

Stylowanie komponentów

Masz wiele opcji stylowania komponentów React:

klasyczne pliki CSS importowane do komponentów (import "./App.css";),
CSS Modules – lokalne klasy (np. styles.przycisk),
biblioteki CSS-in-JS (np. styled-components),
gotowe biblioteki komponentów (np. biblioteki design systemów).

Dla początkujących warto:

Zacząć od zwykłego CSS – jest wystarczający w wielu projektach.

Dbać o responsywność i dostępność (kontrast, focus, widoczność stanów :hover i :focus-visible).

Struktura kodu i komponentów w praktyce

Kilka prostych, ale praktycznych zasad:

Zaczynaj od małych komponentów, które robią jedną rzecz.
Jeśli komponent jest:
- zbyt długi,
- robi bardzo różne rzeczy,
- ma wiele niepowiązanych części UI,
to rozbij go na mniejsze komponenty i połącz w nadrzędnym.
Trzymaj komponenty w katalogu src/ – w prostych projektach np. src/App.js, src/components/NazwaKomponentu.js; w większych: src/features/, src/pages/, src/components/.

Przykładowy podział:

src/components/ – małe, wielokrotnego użytku elementy (przycisk, pole tekstowe, karta),
src/pages/ – komponenty reprezentujące całe widoki/strony,
src/layout/ – kompozycje nagłówka, stopki, menu.

Debugowanie i narzędzia wspierające

Podczas nauki Reacta przydatna jest konsola przeglądarki – logowanie console.log do sprawdzania propsów, stanu itp.

Warto też zainstalować React DevTools. To rozszerzenie przeglądarki pozwala m.in.:

podejrzeć drzewo komponentów,
sprawdzić propsy i stan każdego komponentu,
przeanalizować re-renderingi.

Dla dostępności warto skorzystać z Lighthouse (wbudowany w narzędzia deweloperskie Chrome) do wstępnej oceny a11y.

Testuj aplikację klawiaturą (Tab, Shift+Tab, Enter, Spacja, strzałki) oraz z przynajmniej jednym czytnikiem ekranu (NVDA, VoiceOver).

Pierwszy mały projekt krok po kroku (propozycja dla początkujących)

Aby połączyć wiedzę w całość, możesz zbudować prostą, ale sensowną aplikację: np. listę zadań (ToDo) z naciskiem na dostępność.

Zakres:

Utwórz projekt (CRA lub Vite).
Zbuduj strukturę:

<header> z h1,
<main> z sekcją listy zadań,
formularz dodawania zadania (<form>, <label htmlFor>, <input>).

Stan aplikacji:

tablica zadań w komponencie App,
każde zadanie ma id, tekst, czyZrobione.

Komponent ListaZadan wyświetlający listę zadań jako <ul><li>.
Możliwość oznaczania zadania jako wykonane (<input type="checkbox"> z etykietą).
Stylowanie: wyraźnie oznacz zadania wykonane vs. niewykonane i zachowaj widoczne style fokusu.

Taki projekt pozwoli Ci:

przećwiczyć stan i propsy,
zrozumieć przepływ danych,
od razu zastosować dobre praktyki dostępności (semantyka, formularze, focus).

Co dalej po podstawach Reacta?

Gdy poczujesz się pewniej z komponentami, stanem i JSX, naturalnymi krokami będą:

Routing – nawigacja między wieloma widokami (np. biblioteki routerów);
Zaawansowany stan – np. useReducer, kontekst, zewnętrzne biblioteki do zarządzania stanem w większych projektach;
Pobieranie danych z API – fetch, async/await, obsługa błędów i stanów ładowania;
Testowanie komponentów – testy jednostkowe i integracyjne;
Dostępność na poziomie komponentów złożonych – własne komponenty dialogów, dropdownów, tabów zgodne ze specyfikacją WAI-ARIA.

Warto również śledzić oficjalną dokumentację Reacta, która zawiera aktualne przewodniki, samouczki oraz dobre praktyki dotyczące komponentów, stanu i architektury aplikacji.

Dzięki takiej ścieżce nauki – od podstaw komponentów i JSX, przez stan i zdarzenia, aż po świadome podejście do dostępności – zbudujesz solidne fundamenty pod kolejne kroki w świecie Reacta i nowoczesnego frontendu.