Karatasi ya Marejeleo ya React
Marejeleo ya React 19 yanayoweza kutafutwa na kuchapishwa — vipengele, JSX, hooks, API mpya za Actions, context, refs na utendaji. Bila malipo.
Components na JSX
12function App() { return <h1>Hi</h1>; }
Function component inayorudisha JSX
export default function App() {}
Default-export component
<Greeting name="Ada" />
Render component na props
{1 + 2} or {user.name}
Pachika usemi wa JS kwa mabano
<>{a}{b}</>
Fragment hupanga nodes, hakuna DOM ya ziada
<div className="card">
Tumia className, si class, kwa CSS
{isOpen && <Menu />}
Render kwa masharti na &&
{ok ? <Yes /> : <No />}
Chagua kati ya nodes kwa ternary
{items.map(i => <li key={i.id}>{i.t}</li>)}
Render orodha kutoka array
function Btn({ label, onClick }) {}
Destructure props kwenye signature
function Card({ children }) { return children; }
Soma JSX iliyowekwa ndani kupitia prop ya children
<input value={v} onChange={onChange} />
Ingizo lililodhibitiwa lililofungwa kwa state
Rendering na usanidi
10import { createRoot } from 'react-dom/client'
Import API ya client root
createRoot(document.getElementById('root')).render(<App/>)
Mount programu ndani ya DOM
import { StrictMode } from 'react'
Import wrapper ya StrictMode
<StrictMode><App /></StrictMode>
Onyesha bugs katika maendeleo
import { hydrateRoot } from 'react-dom/client'
Import API ya hydration
hydrateRoot(el, <App />)
Ambatisha React kwenye HTML ya server
root.unmount()
Bomoa root iliyo mounted
import App from './App.jsx'
Import component kutoka moduli
<App {...props} />
Spread object kama props
export { Button, Card }
Named-export components nyingi
State na effects
12const [count, setCount] = useState(0)
Tangaza kigeu cha state
setCount(c => c + 1)
Sasisha kutoka thamani ya awali
setUser(u => ({ ...u, name }))
Sasisha state ya object bila kubadilika
useEffect(() => { run(); }, [dep])
Endesha effect wakati deps zinabadilika
useEffect(() => { /* once */ }, [])
Endesha effect kwenye mount pekee
useEffect(() => () => cleanup(), [])
Rudisha function ya usafishaji
const ref = useRef(null)
Shikilia thamani inayobadilika kupitia renders
const [state, dispatch] = useReducer(r, init)
Simamia state changamano kwa reducer
const theme = useContext(ThemeContext)
Soma thamani ya context ya karibu zaidi
const memo = useMemo(() => calc(a), [a])
Memoize ukokotoaji wa gharama kubwa
useLayoutEffect(() => {}, [])
Endesha kwa pamoja baada ya layout
useSyncExternalStore(sub, get)
Jiandikishe kwa store ya nje
Hooks na APIs za React 19
12import { use } from 'react'
Import API mpya ya use
const data = use(promise)
Soma promise, husimama hadi tayari
const theme = use(ThemeContext)
Soma context, inaruhusiwa kwa masharti
const [state, action, pending] = useActionState(fn, init)
Fuatilia state, action na pending
const [opt, addOpt] = useOptimistic(state, reducer)
Onyesha thamani ya matumaini papo hapo
const { pending } = useFormStatus()
Soma hali ya submit ya fomu mzazi
const [isPending, startTransition] = useTransition()
Weka alama sasisho kama si za haraka
startTransition(async () => await save())
Endesha Action ya async kwenye transition
const deferred = useDeferredValue(value)
Ahirisha thamani kuweka UI inayojibu
const id = useId()
Tengeneza id ya kipekee imara
<title>Page title</title>
Render metadata popote kwenye tree
function Input({ ref }) {}
ref ni prop ya kawaida, hakuna forwardRef
Fomu na Actions
12<form action={handleSubmit}>
Pitisha function kama Action ya fomu
function handleSubmit(formData) {}
Action hupokea FormData
formData.get('email')
Soma sehemu kutoka FormData
const [state, action] = useActionState(submit, null)
Unganisha Action kwa state ya component
<form action={action}>
Tumia Action iliyofungwa kwenye fomu
const [s, a, pending] = useActionState(fn, init)
Onyesha flag ya pending kwa UI
return { error: 'Invalid' }
Rudisha state ya kosa kutoka Action
function Submit() { const { pending } = useFormStatus() }
Soma pending ndani ya kitufe cha submit
<button disabled={pending}>Save</button>
Zima submit wakati wa pending
import { requestFormReset } from 'react-dom'
Import msaidizi wa kuweka upya fomu
requestFormReset(formEl)
Weka upya fomu isiyodhibitiwa
<form action={action}><Submit /></form>
Tunga fomu ya Action na hali
Props na utungaji
10function Hi({ name = 'Guest' }) {}
Prop chaguo-msingi kupitia destructuring
function Box({ children }) { return children; }
Funga yaliyomo kwa prop ya children
<Box><p>Inside</p></Box>
Pitisha JSX kama children
function List({ render }) { return render(); }
Pattern ya render prop
<List render={() => <Item />} />
Toa function ya render
<Input {...props} />
Forward props zote kwa spread
const { id, ...rest } = props
Chagua prop na upitishe zilizobaki
<Avatar {...rest} size="lg" />
Spread kisha batilisha prop
function Btn(props: BtnProps) {}
Aina za props kwa interfaces za TypeScript
<Slot label={<b>Hi</b>} />
Pitisha JSX kupitia prop yenye jina
Matukio
10<button onClick={handleClick}>
Ambatisha mshughulikiaji wa click
function handleClick(e) {}
Pokea tukio la synthetic
<input onChange={e => set(e.target.value)} />
Soma thamani ya ingizo wakati wa change
<form onSubmit={e => e.preventDefault()}>
Simamisha submit chaguo-msingi ya fomu
e.stopPropagation()
Zuia tukio lisitokeze juu
<li onClick={() => remove(id)}>
Pitisha hoja kwa closure
<input onKeyDown={e => e.key === 'Enter'}
Shughulikia bonyezo maalum la kitufe
<div onMouseEnter={hover}>
Sikiliza matukio ya pointer
e.currentTarget.value
Soma kipengele ambacho mshughulikiaji upo
<button onClick={() => {}} type="button">
Epuka uwasilishaji wa fomu wa wazi
Orodha na keys
10arr.map(x => <li key={x.id}>{x.t}</li>)
Render node moja kwa kila kitu
key={item.id}
Pa kila kitu key imara
key={index}
Keys za index kwa orodha tuli pekee
users.map(u => <Card key={u.id} {...u} />)
Spread sehemu za kitu kama props
{list.length === 0 && <Empty />}
Onyesha mbadala kwa orodha tupu
import { Fragment } from 'react'
Import Fragment kwa makundi yenye key
<Fragment key={id}>{a}{b}</Fragment>
Fragment yenye key kwenye orodha
{rows.filter(r => r.on).map(...)}
Chuja kabla ya mapping
Keys must be unique among siblings
Kwa nini keys husaidia React kulinganisha orodha
{[...Array(n)].map((_, i) => ...)}
Map fungu lenye urefu usiobadilika
Context
10const ThemeContext = createContext('light')
Tengeneza context na chaguo-msingi
import { createContext } from 'react'
Import factory ya context
<ThemeContext value={theme}>
Toa thamani (sintaksia ya React 19)
<ThemeContext value={theme}><App /></ThemeContext>
Funga tree inayoisoma
const theme = useContext(ThemeContext)
Soma context kwa useContext
const theme = use(ThemeContext)
Soma context kwa API ya use
if (cond) { const t = use(Ctx); }
use inaweza kusoma context kwa masharti
export const ThemeContext = createContext()
Export context inayoshirikiwa
<Ctx value={{ user, setUser }}>
Pitisha object kama thamani
Avoid new objects each render
Memoize thamani kupunguza re-renders
Refs
10const inputRef = useRef(null)
Tengeneza mshikaji wa ref
<input ref={inputRef} />
Ambatisha ref kwenye node
inputRef.current.focus()
Fikia node ya DOM kupitia current
function Field({ ref }) { return <input ref={ref} /> }
ref kama prop, hakuna forwardRef
<Field ref={inputRef} />
Pitisha ref kwenye component
useImperativeHandle(ref, () => ({ focus }))
Onyesha API ya imperative
const setRef = node => { box = node; }
Tumia callback ref
<div ref={setRef} />
Ambatisha callback ref
const count = useRef(0)
Hifadhi thamani bila re-rendering
ref={node => { return () => cleanup(); }}
Callback ref yenye usafishaji (React 19)
Utendaji
10const Memo = memo(Component)
Ruka re-render wakati props ni sawa
import { memo } from 'react'
Import msaidizi wa memo
const value = useMemo(() => calc(a), [a])
Cache thamani iliyokokotolewa
const fn = useCallback(() => f(a), [a])
Cache utambulisho wa function
const Lazy = lazy(() => import('./Big.jsx'))
Code-split component
import { lazy, Suspense } from 'react'
Import lazy na Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Onyesha mbadala wakati wa kupakia
startTransition(() => setQuery(q))
Weka alama sasisho za state zisizo za haraka
const slow = useDeferredValue(query)
Ahirisha UI ya gharama kubwa iliyotokana
React Compiler auto-memoizes
Mara nyingi huondoa memoization ya mkono
Mengineyo na metadata
10<Suspense fallback={<Loading />}>
Mpaka kwa yaliyomo ya async
class ErrorBoundary extends Component {}
Nasa makosa ya render (class ya zamani)
<title>My Page</title>
Inua kichwa cha hati kutoka component
<meta name="description" content="..." />
Render meta tags ndani ya head
<link rel="stylesheet" href="..." />
Inua kiungo cha stylesheet
<Comp key={id} />
Badilisha key ku-remount component
React.lazy(() => import('./Page.jsx'))
Import component ya route kwa uvivu
createPortal(node, container)
Render ndani ya node tofauti ya DOM
{/* a comment */}
Andika maoni ndani ya JSX
cleanup return in useEffect
Daima toa subscriptions/timers
Hakuna kipengele kinacholingana na “:q”.
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.