Οδηγός React
Ένας οδηγός αναφοράς React 19 με δυνατότητα αναζήτησης και εκτύπωσης — components, JSX, hooks, τα νέα Actions API, context, refs και απόδοση. Δωρεάν.
Components & JSX
12function App() { return <h1>Hi</h1>; }
Function component που επιστρέφει JSX
export default function App() {}
Default-export ενός component
<Greeting name="Ada" />
Render component με props
{1 + 2} or {user.name}
Ενσωμάτωση JS έκφρασης με braces
<>{a}{b}</>
Το Fragment ομαδοποιεί κόμβους, χωρίς extra DOM
<div className="card">
Χρήση className, όχι class, για CSS
{isOpen && <Menu />}
Render υπό συνθήκη με &&
{ok ? <Yes /> : <No />}
Επιλογή μεταξύ κόμβων με ternary
{items.map(i => <li key={i.id}>{i.t}</li>)}
Render λίστας από array
function Btn({ label, onClick }) {}
Destructure props στη signature
function Card({ children }) { return children; }
Ανάγνωση nested JSX μέσω του children prop
<input value={v} onChange={onChange} />
Controlled input δεμένο σε state
Rendering & setup
10import { createRoot } from 'react-dom/client'
Import του client root API
createRoot(document.getElementById('root')).render(<App/>)
Mount της εφαρμογής στο DOM
import { StrictMode } from 'react'
Import του StrictMode wrapper
<StrictMode><App /></StrictMode>
Ανάδειξη bugs στο development
import { hydrateRoot } from 'react-dom/client'
Import του hydration API
hydrateRoot(el, <App />)
Σύνδεση React σε server HTML
root.unmount()
Αποδόμηση mounted root
import App from './App.jsx'
Import component από module
<App {...props} />
Spread object ως props
export { Button, Card }
Named-export πολλαπλών components
State & effects
12const [count, setCount] = useState(0)
Δήλωση state μεταβλητής
setCount(c => c + 1)
Ενημέρωση από την προηγούμενη τιμή
setUser(u => ({ ...u, name }))
Ενημέρωση object state immutably
useEffect(() => { run(); }, [dep])
Εκτέλεση effect όταν αλλάζουν τα deps
useEffect(() => { /* once */ }, [])
Εκτέλεση effect μόνο στο mount
useEffect(() => () => cleanup(), [])
Επιστροφή cleanup function
const ref = useRef(null)
Διατήρηση mutable τιμής μέσα από renders
const [state, dispatch] = useReducer(r, init)
Διαχείριση σύνθετου state με reducer
const theme = useContext(ThemeContext)
Ανάγνωση της πλησιέστερης τιμής context
const memo = useMemo(() => calc(a), [a])
Memoize ακριβού υπολογισμού
useLayoutEffect(() => {}, [])
Εκτέλεση σύγχρονα μετά το layout
useSyncExternalStore(sub, get)
Subscribe σε εξωτερικό store
React 19 hooks & APIs
12import { use } from 'react'
Import του νέου use API
const data = use(promise)
Ανάγνωση promise, suspends μέχρι να είναι έτοιμο
const theme = use(ThemeContext)
Ανάγνωση context, επιτρεπτό υπό συνθήκη
const [state, action, pending] = useActionState(fn, init)
Παρακολούθηση state, action και pending
const [opt, addOpt] = useOptimistic(state, reducer)
Άμεση εμφάνιση optimistic τιμής
const { pending } = useFormStatus()
Ανάγνωση κατάστασης submit της γονικής φόρμας
const [isPending, startTransition] = useTransition()
Σήμανση updates ως non-urgent
startTransition(async () => await save())
Εκτέλεση async Action σε transition
const deferred = useDeferredValue(value)
Defer τιμής για να μένει το UI responsive
const id = useId()
Δημιουργία σταθερού μοναδικού id
<title>Page title</title>
Render metadata οπουδήποτε στο tree
function Input({ ref }) {}
Το ref είναι κανονικό prop, χωρίς forwardRef
Forms & Actions
12<form action={handleSubmit}>
Πέρασμα function ως form Action
function handleSubmit(formData) {}
Το Action λαμβάνει το FormData
formData.get('email')
Ανάγνωση πεδίου από FormData
const [state, action] = useActionState(submit, null)
Σύνδεση Action με το state του component
<form action={action}>
Χρήση του wrapped Action στη φόρμα
const [s, a, pending] = useActionState(fn, init)
Έκθεση pending flag για το UI
return { error: 'Invalid' }
Επιστροφή error state από Action
function Submit() { const { pending } = useFormStatus() }
Ανάγνωση pending μέσα στο submit button
<button disabled={pending}>Save</button>
Απενεργοποίηση submit όσο είναι pending
import { requestFormReset } from 'react-dom'
Import του form reset helper
requestFormReset(formEl)
Reset uncontrolled φόρμας
<form action={action}><Submit /></form>
Σύνθεση Action φόρμας με status
Props & σύνθεση
10function Hi({ name = 'Guest' }) {}
Default prop μέσω destructuring
function Box({ children }) { return children; }
Τύλιγμα περιεχομένου με το children prop
<Box><p>Inside</p></Box>
Πέρασμα JSX ως children
function List({ render }) { return render(); }
Render prop pattern
<List render={() => <Item />} />
Παροχή render function
<Input {...props} />
Forward όλων των props με spread
const { id, ...rest } = props
Επιλογή ενός prop και πέρασμα των υπολοίπων
<Avatar {...rest} size="lg" />
Spread και μετά override ενός prop
function Btn(props: BtnProps) {}
Type props με TypeScript interfaces
<Slot label={<b>Hi</b>} />
Πέρασμα JSX μέσω named prop
Γεγονότα
10<button onClick={handleClick}>
Σύνδεση click handler
function handleClick(e) {}
Λήψη του synthetic event
<input onChange={e => set(e.target.value)} />
Ανάγνωση τιμής input στο change
<form onSubmit={e => e.preventDefault()}>
Διακοπή του προεπιλεγμένου form submit
e.stopPropagation()
Αποτροπή bubbling του event
<li onClick={() => remove(id)}>
Πέρασμα ορισμάτων με closure
<input onKeyDown={e => e.key === 'Enter'}
Χειρισμός συγκεκριμένου key press
<div onMouseEnter={hover}>
Ακρόαση pointer events
e.currentTarget.value
Ανάγνωση του στοιχείου στο οποίο είναι ο handler
<button onClick={() => {}} type="button">
Αποφυγή implicit υποβολής φόρμας
Lists & keys
10arr.map(x => <li key={x.id}>{x.t}</li>)
Render ενός κόμβου ανά στοιχείο
key={item.id}
Δώστε σε κάθε στοιχείο σταθερό key
key={index}
Index keys μόνο για στατικές λίστες
users.map(u => <Card key={u.id} {...u} />)
Spread πεδίων στοιχείου ως props
{list.length === 0 && <Empty />}
Εμφάνιση fallback για κενές λίστες
import { Fragment } from 'react'
Import Fragment για keyed ομάδες
<Fragment key={id}>{a}{b}</Fragment>
Keyed fragment σε λίστα
{rows.filter(r => r.on).map(...)}
Φιλτράρισμα πριν το mapping
Keys must be unique among siblings
Γιατί τα keys βοηθούν το React να κάνει diff λίστες
{[...Array(n)].map((_, i) => ...)}
Map σε range σταθερού μήκους
Context
10const ThemeContext = createContext('light')
Δημιουργία context με default
import { createContext } from 'react'
Import του context factory
<ThemeContext value={theme}>
Παροχή τιμής (σύνταξη React 19)
<ThemeContext value={theme}><App /></ThemeContext>
Τύλιγμα του tree που το διαβάζει
const theme = useContext(ThemeContext)
Ανάγνωση context με useContext
const theme = use(ThemeContext)
Ανάγνωση context με το use API
if (cond) { const t = use(Ctx); }
Το use μπορεί να διαβάσει context υπό συνθήκη
export const ThemeContext = createContext()
Export κοινόχρηστου context
<Ctx value={{ user, setUser }}>
Πέρασμα object ως τιμή
Avoid new objects each render
Memoize τιμών για περιορισμό re-renders
Refs
10const inputRef = useRef(null)
Δημιουργία ref holder
<input ref={inputRef} />
Σύνδεση του ref σε κόμβο
inputRef.current.focus()
Πρόσβαση στον DOM κόμβο μέσω current
function Field({ ref }) { return <input ref={ref} /> }
ref ως prop, χωρίς forwardRef
<Field ref={inputRef} />
Πέρασμα ref σε component
useImperativeHandle(ref, () => ({ focus }))
Έκθεση imperative API
const setRef = node => { box = node; }
Χρήση callback ref
<div ref={setRef} />
Σύνδεση callback ref
const count = useRef(0)
Αποθήκευση τιμής χωρίς re-render
ref={node => { return () => cleanup(); }}
Callback ref με cleanup (React 19)
Επιδόσεις
10const Memo = memo(Component)
Παράλειψη re-render όταν τα props είναι ίσα
import { memo } from 'react'
Import του memo helper
const value = useMemo(() => calc(a), [a])
Cache υπολογισμένης τιμής
const fn = useCallback(() => f(a), [a])
Cache της ταυτότητας function
const Lazy = lazy(() => import('./Big.jsx'))
Code-split ενός component
import { lazy, Suspense } from 'react'
Import lazy και Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Εμφάνιση fallback κατά τη φόρτωση
startTransition(() => setQuery(q))
Σήμανση non-urgent state updates
const slow = useDeferredValue(query)
Defer ακριβού derived UI
React Compiler auto-memoizes
Συχνά καταργεί τη χειροκίνητη memoization
Διάφορα & metadata
10<Suspense fallback={<Loading />}>
Boundary για async περιεχόμενο
class ErrorBoundary extends Component {}
Σύλληψη render σφαλμάτων (legacy class)
<title>My Page</title>
Hoist του document title από component
<meta name="description" content="..." />
Render meta tags στο head
<link rel="stylesheet" href="..." />
Hoist ενός stylesheet link
<Comp key={id} />
Αλλαγή key για remount ενός component
React.lazy(() => import('./Page.jsx'))
Lazy import route component
createPortal(node, container)
Render σε διαφορετικό DOM κόμβο
{/* a comment */}
Γράψιμο σχολίου μέσα σε JSX
cleanup return in useEffect
Πάντα απελευθερώνετε subscriptions/timers
Καμία καταχώριση δεν ταιριάζει με «:q».
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.