Czym jest React? Prosty przewodnik dla osób niebędących programistami

React to biblioteka JavaScript do budowania interfejsów użytkownika — tej części aplikacji, którą ludzie widzą i klikają. Ekrany składa się z wielokrotnego użytku elementów zwanych komponentami, takich jak przycisk, karta produktu czy cała strona, a React utrzymuje ekran w zgodzie z danymi: gdy dane się zmieniają, aktualizuje te części strony, które od nich zależą. Powstał w Facebooku (dziś Meta), jest open source i to jeden z najczęściej używanych sposobów budowania aplikacji webowych.

Dlaczego to ma znaczenie, gdy budujesz z AI

Jeśli budujesz aplikację webową narzędziem AI, jest duża szansa, że została napisana w Reactcie. Wiele narzędzi AI do budowania aplikacji używa Reacta domyślnie, bo jest popularny, dobrze udokumentowany i istnieje ogromna ilość jego kodu, z którego modele AI mogły się uczyć.

Nie musisz pisać w Reactcie, żeby budować z AI. Ale trochę wiedzy pomaga, bo:

• Opisujesz zmiany precyzyjnie. „Zmień komponent ProductCard tak, żeby cena była pogrubiona” jest jaśniejsze niż „wyróżnij gdzieś ceny”.
• Rozumiesz błędy. Komunikaty w stylu „Cannot read properties of undefined” albo „Too many re-renders” stają się zrozumiałe.
• Podejmujesz rozsądne wybory. Zwykłe aplikacje React renderują się w przeglądarce, co wpływa na widoczność w wyszukiwarkach i szybkość pierwszego ładowania. Ta wiedza pomaga zdecydować, kiedy poprosić o inną konfigurację.
• Współpracujesz z programistami później. React to powszechna umiejętność, więc programista zwykle bez problemu przejmie bazę kodu w Reactcie.

Przykład z życia

Pomyśl o klockach LEGO. Zamiast rzeźbić cały model z jednego bloku, budujesz go ze standardowych klocków. Kilka klocków tworzy koło; cztery koła i kilka innych części — samochód. Jeśli chcesz, żeby każdy samochód miał czerwone koła, zmieniasz konstrukcję koła raz.

Komponenty Reacta to klocki. Komponent Button jest używany wewnątrz ProductCard, który jest używany wewnątrz ProductGrid, który jest częścią ShopPage. Zmień Button raz, a każdy przycisk w aplikacji się zmieni.

Druga połowa analogii: wyobraź sobie, że model LEGO przebudowuje się sam, gdy zmienisz instrukcję. To drugi trik Reacta — opisujesz, jak ekran ma wyglądać dla bieżących danych, a React sam ustala, co na stronie zmienić.

Podstawowe idee

Komponenty

Komponent to funkcja JavaScript, która zwraca fragment interfejsu. Dokumentacja Reacta opisuje komponent jako część interfejsu, która ma własną logikę i wygląd. Nazwy komponentów zaczynają się wielką literą.

JSX

Komponenty zwykle pisze się w JSX, który wygląda jak HTML wymieszany z JavaScriptem:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX jest opcjonalny, ale dokumentacja Reacta zauważa, że większość projektów go używa. Przed uruchomieniem w przeglądarce zamienia się go na zwykły JavaScript.

Props

Props to dane wejściowe przekazywane do komponentu, jak ustawienia reużywalnej części:

<ProductCard name="Lavender Candle" price={24} />

Ten sam ProductCard może pokazać dowolny produkt.

Stan (state)

Stan to informacja, którą komponent pamięta i która może się zmieniać podczas działania aplikacji — czy menu jest otwarte, co wpisano w pole wyszukiwania, ile przedmiotów jest w koszyku. Gdy stan się zmienia, React ponownie renderuje komponent, żeby ekran odpowiadał danym.

Hooki

Hooki to funkcje, których nazwy zaczynają się od use, na przykład useState (zapamiętuje wartość) i useEffect (uruchamia kod po renderowaniu, np. do pobrania danych). Zobaczysz je wszędzie w kodzie Reacta generowanym przez AI.

Przykład: licznik koszyka

Załóżmy, że Twój sklep internetowy ma przycisk „Dodaj do koszyka” i ikonę koszyka pokazującą liczbę przedmiotów. W Reactcie wygląda to mniej więcej tak:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

Co się dzieje, gdy klient kliknie „Dodaj do koszyka”:

1. Kliknięcie przycisku wywołuje onAdd, która wywołuje setCartCount.
2. React zmienia stan cartCount z 0 na 1.
3. React ponownie renderuje Shop, przekazując count={1} do CartIcon.
4. Strona pokazuje „Cart (1)”. Nikt nie napisał kodu typu „znajdź tekst koszyka i zmień go” — ekran podąża za danymi.

Zauważ też ograniczenia. Ten licznik żyje w pamięci przeglądarki. Odśwież stronę, a wróci do 0. Żeby zachować koszyk, trzeba zapisać go w trwałym miejscu — w ciasteczku, pamięci przeglądarki albo w bazie danych przez backend. React zajmuje się ekranem; nie przechowuje Twoich danych.

Gdzie React pasuje w aplikacji webowej

Aplikacja „Vite + React” renderuje się w przeglądarce (single-page app). Aplikacja Next.js może najpierw renderować strony na serwerze, co pomaga wyszukiwarkom i szybkości pierwszego ładowania.

Najważniejsze pojęcia

Częste błędy i nieporozumienia

• „React to język programowania.” To biblioteka napisana i używana w JavaScripcie (lub TypeScripcie).
• „React przechowuje moje dane.” Stan żyje w przeglądarce i znika po odświeżeniu. Trwałe dane wymagają backendu i bazy danych.
• Wrzucanie sekretów do kodu Reacta. Wszystko w aplikacji React trafia do przeglądarki odwiedzającego. Klucze API w takim kodzie są publiczne. Trzymaj je na serwerze.
• „Aplikacje React nie mogą się pozycjonować.” Renderowanie tylko po stronie klienta jest słabsze dla wyszukiwarek, ale prerendering albo renderowanie na serwerze rozwiązuje większość problemu.
• Ogromne komponenty. Jeden komponent na 1 000 linii jest trudny do bezpiecznej zmiany — zarówno dla ludzi, jak i dla AI. Poproś o mniejsze.
• Uznawanie aplikacji webowej React za aplikację na telefon. Działa w przeglądarce, także na telefonach, ale nie jest aplikacją ze sklepu App Store.

Czego zapytać swojego narzędzia AI do budowania

• „Podziel tę stronę na małe, nazwane komponenty i napisz, w którym pliku jest każdy z nich.”
• „Spraw, by komponent ProductCard był wielokrotnego użytku, z name, price i image jako props.”
• „Zapisuj koszyk w bazie danych, żeby przetrwał odświeżenie.”
• „Trzymaj wszystkie klucze API na serwerze; kod React ma wywoływać nasze własne API.”
• „Dodaj stany ładowania i błędów dla danych pochodzących z serwera.”
• „Jeśli widoczność w wyszukiwarkach jest ważna dla tych stron, prerenderuj je albo użyj konfiguracji z renderowaniem po stronie serwera.”
• „Wyjaśnij prostym językiem, co oznacza ten błąd i z którego komponentu pochodzi.”

Szerszy obraz znajdziesz w frontend vs backend, a do przeglądu kodu napisanego przez AI — w jak przeglądać kod wygenerowany przez AI.

React w Mythex

Jeśli nie poprosisz o coś innego, Mythex zaczyna nowe projekty od Vite + React + TypeScript + Tailwind, z działającym podglądem podczas czatu. W pierwszym prompcie możesz wskazać inną konfigurację — na przykład „Użyj Next.js” albo „zwykła statyczna strona HTML” — a Mythex wybierze ją na podstawie tego, co napiszesz; nie ma do tego osobnego ekranu ustawień. Strona dokumentacji jak wybierana jest technologia opisuje dostępne opcje. Edytor kodu jest w planie Free tylko do odczytu; w Pro możesz edytować kod React bezpośrednio i wyeksportować projekt, by dalej pracować nad nim gdzie indziej.

Pytania