Ściąga React

Bezpłatnie

Przeszukiwalny, gotowy do druku przewodnik po React 19 — komponenty, JSX, hooki, nowe API Actions, kontekst, refy i wydajność. Za darmo.

Komponenty i JSX

function App() { return <h1>Hi</h1>; }

Komponent funkcyjny zwracający JSX

export default function App() {}

Eksportuj komponent domyślnie

<Greeting name="Ada" />

Wyrenderuj komponent z propsami

{1 + 2} or {user.name}

Osadź wyrażenie JS w klamrach

<>{a}{b}</>

Fragment grupuje węzły, bez dodatkowego DOM

<div className="card">

Użyj className, nie class, dla CSS

{isOpen && <Menu />}

Renderuj warunkowo z &&

{ok ? <Yes /> : <No />}

Wybierz między węzłami operatorem trójargumentowym

{items.map(i => <li key={i.id}>{i.t}</li>)}

Wyrenderuj listę z tablicy

function Btn({ label, onClick }) {}

Zdestrukturyzuj propsy w sygnaturze

function Card({ children }) { return children; }

Odczytaj zagnieżdżony JSX przez prop children

<input value={v} onChange={onChange} />

Kontrolowane pole powiązane ze stanem

Renderowanie i konfiguracja

import { createRoot } from 'react-dom/client'

Zaimportuj API głównego korzenia klienta

createRoot(document.getElementById('root')).render(<App/>)

Zamontuj aplikację w DOM

import { StrictMode } from 'react'

Zaimportuj otoczkę StrictMode

<StrictMode><App /></StrictMode>

Ujawniaj błędy w trakcie rozwoju

import { hydrateRoot } from 'react-dom/client'

Zaimportuj API hydracji

hydrateRoot(el, <App />)

Podłącz React do HTML z serwera

root.unmount()

Zdemontuj zamontowany korzeń

import App from './App.jsx'

Zaimportuj komponent z modułu

<App {...props} />

Rozłóż obiekt jako propsy

export { Button, Card }

Eksportuj nazwane wiele komponentów

Stan i efekty

const [count, setCount] = useState(0)

Zadeklaruj zmienną stanu

setCount(c => c + 1)

Aktualizuj na podstawie poprzedniej wartości

setUser(u => ({ ...u, name }))

Aktualizuj stan obiektu niemutowalnie

useEffect(() => { run(); }, [dep])

Uruchom efekt przy zmianie zależności

useEffect(() => { /* once */ }, [])

Uruchom efekt tylko przy montowaniu

useEffect(() => () => cleanup(), [])

Zwróć funkcję czyszczącą

const ref = useRef(null)

Przechowuj mutowalną wartość między renderami

const [state, dispatch] = useReducer(r, init)

Zarządzaj złożonym stanem reducerem

const theme = useContext(ThemeContext)

Odczytaj najbliższą wartość kontekstu

const memo = useMemo(() => calc(a), [a])

Zapamiętaj kosztowne obliczenie

useLayoutEffect(() => {}, [])

Uruchom synchronicznie po układzie

useSyncExternalStore(sub, get)

Subskrybuj zewnętrzny store

Hooki i API React 19

import { use } from 'react'

Zaimportuj nowe API use

const data = use(promise)

Odczytaj promise, wstrzymuje aż do gotowości

const theme = use(ThemeContext)

Odczytaj kontekst, dozwolone warunkowo

const [state, action, pending] = useActionState(fn, init)

Śledź stan, akcję i oczekiwanie

const [opt, addOpt] = useOptimistic(state, reducer)

Pokaż natychmiast wartość optymistyczną

const { pending } = useFormStatus()

Odczytaj status wysłania formularza nadrzędnego

const [isPending, startTransition] = useTransition()

Oznacz aktualizacje jako niepilne

startTransition(async () => await save())

Uruchom asynchroniczną Akcję w tranzycji

const deferred = useDeferredValue(value)

Odłóż wartość, by UI pozostało responsywne

const id = useId()

Wygeneruj stabilny unikalny identyfikator

<title>Page title</title>

Renderuj metadane w dowolnym miejscu drzewa

function Input({ ref }) {}

ref jest zwykłym propem, bez forwardRef

Formularze i Akcje

<form action={handleSubmit}>

Przekaż funkcję jako Akcję formularza

function handleSubmit(formData) {}

Akcja otrzymuje FormData

formData.get('email')

Odczytaj pole z FormData

const [state, action] = useActionState(submit, null)

Powiąż Akcję ze stanem komponentu

<form action={action}>

Użyj opakowanej Akcji na formularzu

const [s, a, pending] = useActionState(fn, init)

Udostępnij flagę oczekiwania dla UI

return { error: 'Invalid' }

Zwróć stan błędu z Akcji

function Submit() { const { pending } = useFormStatus() }

Odczytaj oczekiwanie w przycisku wysyłania

<button disabled={pending}>Save</button>

Wyłącz wysyłanie w trakcie oczekiwania

import { requestFormReset } from 'react-dom'

Zaimportuj pomocnik resetu formularza

requestFormReset(formEl)

Zresetuj niekontrolowany formularz

<form action={action}><Submit /></form>

Złóż formularz Akcji ze statusem

Propsy i kompozycja

function Hi({ name = 'Guest' }) {}

Domyślny prop przez destrukturyzację

function Box({ children }) { return children; }

Opakuj treść propem children

<Box><p>Inside</p></Box>

Przekaż JSX jako children

function List({ render }) { return render(); }

Wzorzec render prop

<List render={() => <Item />} />

Dostarcz funkcję renderującą

<Input {...props} />

Przekaż wszystkie propsy przez spread

const { id, ...rest } = props

Wybierz prop i przekaż resztę

<Avatar {...rest} size="lg" />

Rozłóż, a potem nadpisz prop

function Btn(props: BtnProps) {}

Typuj propsy interfejsami TypeScript

<Slot label={<b>Hi</b>} />

Przekaż JSX przez nazwany prop

Zdarzenia

<button onClick={handleClick}>

Podłącz handler kliknięcia

function handleClick(e) {}

Odbierz zdarzenie syntetyczne

<input onChange={e => set(e.target.value)} />

Odczytaj wartość pola przy zmianie

<form onSubmit={e => e.preventDefault()}>

Zatrzymaj domyślne wysłanie formularza

e.stopPropagation()

Zapobiegnij propagacji zdarzenia

<li onClick={() => remove(id)}>

Przekaż argumenty przez domknięcie

<input onKeyDown={e => e.key === 'Enter'}

Obsłuż naciśnięcie konkretnego klawisza

<div onMouseEnter={hover}>

Nasłuchuj zdarzeń wskaźnika

e.currentTarget.value

Odczytaj element, na którym jest handler

<button onClick={() => {}} type="button">

Unikaj niejawnego wysłania formularza

Listy i klucze

arr.map(x => <li key={x.id}>{x.t}</li>)

Renderuj jeden węzeł na element

key={item.id}

Nadaj każdemu elementowi stabilny klucz

key={index}

Klucze indeksowe tylko dla list statycznych

users.map(u => <Card key={u.id} {...u} />)

Rozłóż pola elementu jako propsy

{list.length === 0 && <Empty />}

Pokaż wariant awaryjny dla pustych list

import { Fragment } from 'react'

Zaimportuj Fragment dla grup z kluczami

<Fragment key={id}>{a}{b}</Fragment>

Fragment z kluczem na liście

{rows.filter(r => r.on).map(...)}

Filtruj przed mapowaniem

Keys must be unique among siblings

Dlaczego klucze pomagają React porównywać listy

{[...Array(n)].map((_, i) => ...)}

Zmapuj zakres o stałej długości

Kontekst

const ThemeContext = createContext('light')

Utwórz kontekst z wartością domyślną

import { createContext } from 'react'

Zaimportuj fabrykę kontekstu

<ThemeContext value={theme}>

Dostarcz wartość (składnia React 19)

<ThemeContext value={theme}><App /></ThemeContext>

Opakuj drzewo, które go odczytuje

const theme = useContext(ThemeContext)

Odczytaj kontekst przez useContext

const theme = use(ThemeContext)

Odczytaj kontekst przez API use

if (cond) { const t = use(Ctx); }

use może odczytać kontekst warunkowo

export const ThemeContext = createContext()

Eksportuj współdzielony kontekst

<Ctx value={{ user, setUser }}>

Przekaż obiekt jako wartość

Avoid new objects each render

Zapamiętuj wartości, by ograniczyć re-rendery

Referencje (refs)

const inputRef = useRef(null)

Utwórz uchwyt refa

<input ref={inputRef} />

Podłącz ref do węzła

inputRef.current.focus()

Uzyskaj dostęp do węzła DOM przez current

function Field({ ref }) { return <input ref={ref} /> }

ref jako prop, bez forwardRef

<Field ref={inputRef} />

Przekaż ref do komponentu

useImperativeHandle(ref, () => ({ focus }))

Udostępnij imperatywne API

const setRef = node => { box = node; }

Użyj refa callbackowego

<div ref={setRef} />

Podłącz ref callbackowy

const count = useRef(0)

Przechowuj wartość bez re-renderowania

ref={node => { return () => cleanup(); }}

Ref callbackowy z czyszczeniem (React 19)

Wydajność

const Memo = memo(Component)

Pomiń re-render, gdy propsy są równe

import { memo } from 'react'

Zaimportuj pomocnik memo

const value = useMemo(() => calc(a), [a])

Buforuj obliczoną wartość

const fn = useCallback(() => f(a), [a])

Buforuj tożsamość funkcji

const Lazy = lazy(() => import('./Big.jsx'))

Podziel komponent na fragmenty kodu

import { lazy, Suspense } from 'react'

Zaimportuj lazy i Suspense

<Suspense fallback={<Spin />}><Lazy /></Suspense>

Pokaż wariant awaryjny podczas ładowania

startTransition(() => setQuery(q))

Oznacz niepilne aktualizacje stanu

const slow = useDeferredValue(query)

Odłóż kosztowne pochodne UI

React Compiler auto-memoizes

Często eliminuje ręczną memoizację

Różne i metadane

<Suspense fallback={<Loading />}>

Granica dla treści asynchronicznej

class ErrorBoundary extends Component {}

Przechwyć błędy renderowania (stara klasa)

<title>My Page</title>

Wynieś tytuł dokumentu z komponentu

<meta name="description" content="..." />

Renderuj znaczniki meta do head

<link rel="stylesheet" href="..." />

Wynieś link arkusza stylów

<Comp key={id} />

Zmień key, by przemontować komponent

React.lazy(() => import('./Page.jsx'))

Importuj leniwie komponent trasy

createPortal(node, container)

Renderuj do innego węzła DOM

{/* a comment */}

Napisz komentarz wewnątrz JSX

cleanup return in useEffect

Zawsze zwalniaj subskrypcje/timery

Żaden wpis nie pasuje do „:q”.

Potrzebujesz pomocy?

Masz problem z tym narzędziem? Daj nam znać.

Zgłoś problem

Dodaj to darmowe narzędzie do swojej witryny — skopiuj i wklej poniższy kod.

<iframe src="https://tweakee.com/pl/studio/dev/react-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>