Co to jest React? Biblioteka JavaScript do budowy UI

React to biblioteka JavaScript do budowania interfejsów użytkownika z komponentów. Opisujesz, jak ekran ma wyglądać dla bieżących danych, a gdy dane się zmieniają, React aktualizuje stronę, żeby do nich pasowała. React, React JS i ReactJS to to samo: biblioteka open source stworzona w Facebooku (dziś Meta).

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Kliknij oba przyciski. Każdy Counter ma własną liczbę, bo każdy jest osobną kopią komponentu z własnym stanem. Dodaj trzecią linię, <Counter label="Plums" />, a pojawi się nowy, niezależny licznik.

Ten krótki przykład pokazuje już trzy idee, na których opiera się React: komponenty (Counter i App to funkcje zwracające UI), JSX (składnia podobna do HTML wewnątrz return) i stan (count, wartość, której zmiana sprawia, że React ponownie rysuje komponent).

Jaki problem rozwiązuje React

Interfejs użytkownika to obraz jakichś danych. Gdy dane się zmieniają, obraz też musi się zmienić, a razem z nim każda część ekranu, która od tych danych zależy. Bez biblioteki piszesz ten kod ręcznie: znajdujesz każdy element, a potem sam ustawiasz jego tekst, klasę albo widoczność. Każda nowa funkcja dodaje kolejne miejsce, o którego aktualizacji musisz pamiętać.

React odwraca to podejście. Piszesz jedną funkcję, która mówi, jaki ma być ekran dla danego stanu, a React sam ustala, które części strony trzeba zmienić. To jest deklaratywny UI, w przeciwieństwie do kodu imperatywnego, który krok po kroku wymienia każdą zmianę w DOM. Oto oba style obok siebie w jednym przykładzie:

import { useEffect, useRef, useState } from 'react';

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

function Declarative() {
    const [count, setCount] = useState(0);

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

ByHand oddaje swój akapit zwykłemu kodowi DOM (efekt uruchamia ten kod dopiero wtedy, gdy React utworzy akapit). Trzyma liczbę w zmiennej, znajduje każdy element przez querySelector i ręcznie ustawia jego tekst. Declarative mówi tylko „pokaż licznik i pokaż, czy jest parzysty". Usuń w handleClick linię, która ustawia .parity, i kliknij kilka razy: pierwszy wiersz twierdzi teraz, że 3 jest parzyste, a drugi wiersz nie może się rozjechać, bo jego tekst jest wyliczany z count przy każdym renderowaniu.

Jak React aktualizuje stronę

Gdy stan się zmienia, React ponownie wywołuje funkcję komponentu. To wywołanie to renderowanie. Funkcja zwraca świeży opis UI, React porównuje go z poprzednim i zmienia tylko te części prawdziwej strony, które się różnią. Ten opis w pamięci często nazywa się wirtualnym DOM.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

Otwórz konsolę pod podglądem i wpisz kilka liter. Każde naciśnięcie klawisza zapisuje jedno renderowanie z nową wartością. Pole zachowuje fokus i pozycję kursora, bo React zmienił tylko tekst akapitu i wartość pola, a nie całą stronę. Strona o renderowaniu wyjaśnia dokładnie, kiedy komponent renderuje się ponownie.

Komponenty, JSX i stan w skrócie

Komponenty to funkcje JavaScript, których nazwy zaczynają się wielką literą. Zwracają to, co ma się pojawić na ekranie, a używasz ich jak tagów HTML: <Counter />. Strona to drzewo komponentów, od małych, takich jak przycisk, po duże, takie jak cały ekran ustawień. Zobacz komponenty.

JSX to składnia, która pozwala pisać znaczniki wewnątrz JavaScriptu. Nawiasy klamrowe przenoszą cię z powrotem do JavaScriptu, więc {count} pokazuje wartość, a {items.map(...)} zamienia tablicę w listę. Narzędzie do budowania kompiluje JSX do zwykłych wywołań funkcji, zanim przeglądarka go uruchomi.

Stan to dane, które komponent pamięta między renderowaniami. Tworzysz go hookiem useState, a wywołanie jego settera to sposób, w jaki mówisz Reactowi, że coś się zmieniło. Dane płyną w dół od rodziców do dzieci przez propsy, czyli argumenty komponentu.

Ten przykład używa ich wszystkich: lista renderowana z tablicy w stanie i formularz, który do niej dodaje.

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

Dodaj zadanie, a zmienią się naraz dwie rzeczy: lista i licznik pod nią. Nigdy nie kazałeś licznikowi się zaktualizować. Oba czytają z tasks, więc oba za nim podążają. Zmień tablicę początkową na [], a lista pokaże zamiast tego "Nothing to do.".

Czym React nie jest

React to biblioteka, a nie pełny framework. Obejmuje komponenty, stan i zamienianie ich w UI, a celowo pomija kilka rzeczy, których potrzebuje kompletna aplikacja:

• Routing. Nie ma wbudowanego sposobu przypisywania adresów URL do stron. Tę lukę wypełnia React Router i routery frameworków.
• Pobieranie danych i renderowanie na serwerze. React daje narzędzia takie jak efekty i Suspense, ale nie narzuca, skąd pochodzą dane ani jak strony renderują się na serwerze.
• Konfiguracja budowania. Przeglądarki nie rozumieją JSX, więc potrzebujesz narzędzia takiego jak Vite, które go skompiluje.

Frameworki budują na Reakcie, żeby dostarczyć te części. Next.js i tryb frameworka React Router dodają routing, renderowanie na serwerze i ładowanie danych, a zespół Reacta zaleca zaczynać pełną aplikację od jednego z nich. Do aplikacji po stronie klienta albo do nauki Vite z samym Reactem to mały i szybki punkt startowy; zobacz, jak zainstalować React.

React a React Native

Sam React opisuje tylko komponenty i to, jak się zmieniają. Osobny renderer zamienia je w coś, co możesz zobaczyć. React DOM renderuje do stron internetowych i to jego używa każdy przykład na tej stronie. React Native renderuje ten sam rodzaj komponentów do natywnych widoków iOS i Androida, więc piszesz <View> i <Text> zamiast <div> i <p>, a nie ma żadnego pliku HTML ani CSS. Komponenty, propsy, stan i hooki działają w obu tak samo, więc to, czego tu się nauczysz, przenosi się bezpośrednio.

Kiedy uczyć się Reacta

Ucz się Reacta po podstawach JavaScriptu, bo wszystko w Reakcie jest JavaScriptem. Zanim zaczniesz, powinieneś swobodnie znać:

• zmienne, funkcje i funkcje strzałkowe
• tablice i ich metody map i filter
• obiekty, destrukturyzację i składnię spread (...)
• import i export
• obietnice i async/await, do ładowania danych

Jeśli to brzmi znajomo, zacznij od JSX i komponentów, potem propsów i stanu. Efekty, refy, kontekst i narzędzia wydajności przyjdą później, gdy budowanie małych interaktywnych komponentów stanie się naturalne.