Karatasi ya Marejeleo ya React

Zana zote
Bila Malipo

Marejeleo ya React 19 yanayoweza kutafutwa na kuchapishwa — vipengele, JSX, hooks, API mpya za Actions, context, refs na utendaji. Bila malipo.

Components & JSX

12
function App() { return <h1>Hi</h1>; }
A function component returning JSX
export default function App() {}
Default-export a component
<Greeting name="Ada" />
Render a component with props
{1 + 2} or {user.name}
Embed a JS expression with braces
<>{a}{b}</>
Fragment groups nodes, no extra DOM
<div className="card">
Use className, not class, for CSS
{isOpen && <Menu />}
Render conditionally with &&
{ok ? <Yes /> : <No />}
Choose between nodes with a ternary
{items.map(i => <li key={i.id}>{i.t}</li>)}
Render a list from an array
function Btn({ label, onClick }) {}
Destructure props in the signature
function Card({ children }) { return children; }
Read nested JSX via the children prop
<input value={v} onChange={onChange} />
Controlled input bound to state

Rendering & setup

10
import { createRoot } from 'react-dom/client'
Import the client root API
createRoot(document.getElementById('root')).render(<App/>)
Mount the app into the DOM
import { StrictMode } from 'react'
Import StrictMode wrapper
<StrictMode><App /></StrictMode>
Surface bugs in development
import { hydrateRoot } from 'react-dom/client'
Import the hydration API
hydrateRoot(el, <App />)
Attach React to server HTML
root.unmount()
Tear down a mounted root
import App from './App.jsx'
Import a component from a module
<App {...props} />
Spread an object as props
export { Button, Card }
Named-export multiple components

State & effects

12
const [count, setCount] = useState(0)
Declare a state variable
setCount(c => c + 1)
Update from the previous value
setUser(u => ({ ...u, name }))
Update object state immutably
useEffect(() => { run(); }, [dep])
Run an effect when deps change
useEffect(() => { /* once */ }, [])
Run an effect only on mount
useEffect(() => () => cleanup(), [])
Return a cleanup function
const ref = useRef(null)
Hold a mutable value across renders
const [state, dispatch] = useReducer(r, init)
Manage complex state with a reducer
const theme = useContext(ThemeContext)
Read the nearest context value
const memo = useMemo(() => calc(a), [a])
Memoize an expensive computation
useLayoutEffect(() => {}, [])
Run synchronously after layout
useSyncExternalStore(sub, get)
Subscribe to an external store

React 19 hooks & APIs

12
import { use } from 'react'
Import the new use API
const data = use(promise)
Read a promise, suspends until ready
const theme = use(ThemeContext)
Read context, allowed conditionally
const [state, action, pending] = useActionState(fn, init)
Track state, action and pending
const [opt, addOpt] = useOptimistic(state, reducer)
Show an optimistic value instantly
const { pending } = useFormStatus()
Read the parent form submit status
const [isPending, startTransition] = useTransition()
Mark updates as non-urgent
startTransition(async () => await save())
Run an async Action in a transition
const deferred = useDeferredValue(value)
Defer a value to keep UI responsive
const id = useId()
Generate a stable unique id
<title>Page title</title>
Render metadata anywhere in the tree
function Input({ ref }) {}
ref is a normal prop, no forwardRef

Forms & Actions

12
<form action={handleSubmit}>
Pass a function as a form Action
function handleSubmit(formData) {}
Action receives the FormData
formData.get('email')
Read a field from FormData
const [state, action] = useActionState(submit, null)
Wire an Action to component state
<form action={action}>
Use the wrapped Action on the form
const [s, a, pending] = useActionState(fn, init)
Expose a pending flag for the UI
return { error: 'Invalid' }
Return error state from an Action
function Submit() { const { pending } = useFormStatus() }
Read pending inside the submit button
<button disabled={pending}>Save</button>
Disable submit while pending
import { requestFormReset } from 'react-dom'
Import the form reset helper
requestFormReset(formEl)
Reset an uncontrolled form
<form action={action}><Submit /></form>
Compose Action form with status

Props & composition

10
function Hi({ name = 'Guest' }) {}
Default prop via destructuring
function Box({ children }) { return children; }
Wrap content with the children prop
<Box><p>Inside</p></Box>
Pass JSX as children
function List({ render }) { return render(); }
Render prop pattern
<List render={() => <Item />} />
Provide a render function
<Input {...props} />
Forward all props with spread
const { id, ...rest } = props
Pick a prop and pass the rest
<Avatar {...rest} size="lg" />
Spread then override a prop
function Btn(props: BtnProps) {}
Type props with TypeScript interfaces
<Slot label={<b>Hi</b>} />
Pass JSX through a named prop

Events

10
<button onClick={handleClick}>
Attach a click handler
function handleClick(e) {}
Receive the synthetic event
<input onChange={e => set(e.target.value)} />
Read an input value on change
<form onSubmit={e => e.preventDefault()}>
Stop the default form submit
e.stopPropagation()
Prevent the event from bubbling
<li onClick={() => remove(id)}>
Pass arguments with a closure
<input onKeyDown={e => e.key === 'Enter'}
Handle a specific key press
<div onMouseEnter={hover}>
Listen for pointer events
e.currentTarget.value
Read the element the handler is on
<button onClick={() => {}} type="button">
Avoid implicit form submission

Lists & keys

10
arr.map(x => <li key={x.id}>{x.t}</li>)
Render one node per item
key={item.id}
Give each item a stable key
key={index}
Index keys only for static lists
users.map(u => <Card key={u.id} {...u} />)
Spread item fields as props
{list.length === 0 && <Empty />}
Show a fallback for empty lists
import { Fragment } from 'react'
Import Fragment for keyed groups
<Fragment key={id}>{a}{b}</Fragment>
A keyed fragment in a list
{rows.filter(r => r.on).map(...)}
Filter before mapping
Keys must be unique among siblings
Why keys help React diff lists
{[...Array(n)].map((_, i) => ...)}
Map a fixed-length range

Context

10
const ThemeContext = createContext('light')
Create a context with a default
import { createContext } from 'react'
Import the context factory
<ThemeContext value={theme}>
Provide a value (React 19 syntax)
<ThemeContext value={theme}><App /></ThemeContext>
Wrap the tree that reads it
const theme = useContext(ThemeContext)
Read context with useContext
const theme = use(ThemeContext)
Read context with the use API
if (cond) { const t = use(Ctx); }
use can read context conditionally
export const ThemeContext = createContext()
Export a shared context
<Ctx value={{ user, setUser }}>
Pass an object as the value
Avoid new objects each render
Memoize values to limit re-renders

Refs

10
const inputRef = useRef(null)
Create a ref holder
<input ref={inputRef} />
Attach the ref to a node
inputRef.current.focus()
Access the DOM node via current
function Field({ ref }) { return <input ref={ref} /> }
ref as a prop, no forwardRef
<Field ref={inputRef} />
Pass a ref to a component
useImperativeHandle(ref, () => ({ focus }))
Expose an imperative API
const setRef = node => { box = node; }
Use a callback ref
<div ref={setRef} />
Attach a callback ref
const count = useRef(0)
Store a value without re-rendering
ref={node => { return () => cleanup(); }}
Callback ref with cleanup (React 19)

Performance

10
const Memo = memo(Component)
Skip re-render when props are equal
import { memo } from 'react'
Import the memo helper
const value = useMemo(() => calc(a), [a])
Cache a computed value
const fn = useCallback(() => f(a), [a])
Cache a function identity
const Lazy = lazy(() => import('./Big.jsx'))
Code-split a component
import { lazy, Suspense } from 'react'
Import lazy and Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Show a fallback while loading
startTransition(() => setQuery(q))
Mark non-urgent state updates
const slow = useDeferredValue(query)
Defer expensive derived UI
React Compiler auto-memoizes
Often removes manual memoization

Misc & metadata

10
<Suspense fallback={<Loading />}>
Boundary for async content
class ErrorBoundary extends Component {}
Catch render errors (legacy class)
<title>My Page</title>
Hoist document title from a component
<meta name="description" content="..." />
Render meta tags into the head
<link rel="stylesheet" href="..." />
Hoist a stylesheet link
<Comp key={id} />
Change key to remount a component
React.lazy(() => import('./Page.jsx'))
Lazily import a route component
createPortal(node, container)
Render into a different DOM node
{/* a comment */}
Write a comment inside JSX
cleanup return in useEffect
Always release subscriptions/timers

Hakuna kipengele kinacholingana na “:q”.

Kuhusu Karatasi ya Marejeleo ya React

Karatasi hii ya marejeleo ya React inalenga React 19 na inaonyesha maktaba hiyo kwa dhana: components na JSX, rendering na usanidi, state na effects, hooks na API za React 19, forms na Actions, props na composition, matukio (events), orodha na keys, context, refs, utendaji (performance), na metadata pamoja na mengineyo.

Inashughulikia misingi unayotumia katika kila component — useState, useEffect, props, keys, controlled inputs — na pia nyongeza mpya za React 19, ikiwemo mifumo ya fomu inayotegemea Actions, hivyo inafanya kazi kama ukumbusho na kama daraja la kuelekea API za sasa.

Karatasi hii ni bure na inafanya kazi upande wa mteja. Chuja hooks na mifumo papo hapo kwa kisanduku cha utafutaji, ruka kati ya sehemu kupitia orodha ya yaliyomo inayobaki juu, nakili kipande chochote kwa mbofyo mmoja na chapisha ukurasa kama marejeleo unapojenga components.

Jinsi ya kutumia Karatasi ya Marejeleo ya React

  1. Pitia sehemu kwa ufupi, kuanzia Components & JSX na State & effects hadi React 19 hooks & APIs na Performance.
  2. Tafuta hook au dhana kama useEffect, key au context ili kuchuja karatasi papo hapo.
  3. Ruka hadi Forms & Actions au Refs kupitia upau wa pembeni unaobaki juu unapohitaji mfumo maalum.
  4. Bofya kipande cha msimbo au aikoni yake ya kunakili ili kunakili msimbo huo kwenye component yako.
  5. Chapisha karatasi hii kama marejeleo ya React bila mtandao.

Maswali yanayoulizwa mara kwa mara

Ndiyo. Pamoja na misingi ya muda mrefu, ina sehemu maalum ya hooks na API za React 19 na sehemu ya fomu iliyojengwa kuzunguka mifumo mipya ya Actions.

Sehemu kumi na mbili: components na JSX, rendering na usanidi, state na effects, hooks na API za React 19, forms na Actions, props na composition, matukio, orodha na keys, context, refs, utendaji, na metadata pamoja na mengineyo.

Ndiyo. Sehemu ya state na effects inaonyesha matumizi ya useState na useEffect pamoja na tofauti za kawaida, na sehemu za context, refs na performance zinashughulikia hooks za kila dhana hizo.

Ndiyo. Bofya kipande chochote cha msimbo au aikoni yake ya kunakili inayoonekana unapopita juu yake na itanakiliwa kwenye clipboard yako pamoja na uthibitisho mfupi.

Ndiyo, bure kabisa — yanaweza kutafutwa, kuchapishwa na kuonyeshwa kwenye kivinjari chako bila kujisajili.
Shiriki hii
Zana Zinazohusiana
Karatasi ya Maelezo ya JavaScript Rejeleo linalotafutika na linaloweza kuchapishwa la JavaScript ya kisasa — sintaksia, safu, mifuatano, vitu, async/await, DOM na vipengele vya ES2022+. Bila malipo. Bila Malipo
Karatasi ya Marejeleo ya jQuery Marejeleo ya jQuery yanayoweza kutafutwa na kuchapishwa — viteuzi, udhibiti wa DOM, matukio, athari, kupitia, AJAX na visaidizi vya fomu. Bila malipo. Bila Malipo
Karatasi ya Maelezo ya CSS Rejeleo linalotafutika na linaloweza kuchapishwa la CSS — selectors, muundo wa box, flexbox, grid, uchapaji, mabadiliko na vipengele vya kisasa. Bila malipo. Bila Malipo
Karatasi ya Maelezo ya PHP Rejeleo linalotafutika na linaloweza kuchapishwa la PHP 8.3+ — sintaksia, mifuatano, safu, vitendakazi, klasi, enums, sifa na vipengele vya kisasa. Bila malipo. Bila Malipo
Karatasi ya Maelezo ya MySQL Rejeleo linalotafutika na linaloweza kuchapishwa la MySQL — hoja, joins, fahirisi, vitendakazi, aina za data na amri za usimamizi. Bila malipo. Bila Malipo
Karatasi ya Maelezo ya Python Rejeleo linalotafutika na linaloweza kuchapishwa la Python 3 — sintaksia, miundo ya data, comprehensions, vitendakazi, klasi, mafaili na maktaba ya kawaida. Bila malipo. Bila Malipo
Utafutaji maarufu
react cheat sheet react hooks list usestate and useeffect react 19 hooks react props and components react context example jsx syntax reference react memo performance
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.
Ripoti tatizo

Ongeza zana hii ya bure kwenye tovuti yako mwenyewe — nakili na ubandike msimbo ulio hapa chini.