Componentes que reaccionan
React es una librería para construir interfaces de usuario con componentes reutilizables.
Conceptos clave
| Concepto | Qué es |
|---|---|
| Componente | Pieza de UI reutilizable |
| Props | Datos que recibe el componente |
| State | Datos internos del componente |
| Hook | Función para agregar funcionalidad |
Tu primer componente
// Componente funcional
function Saludo({ nombre }: { nombre: string }) {
return <h1>Hola, {nombre}!</h1>
}
// Uso
<Saludo nombre="Ana" />
useState: Estado local
import { useState } from 'react'
function Contador() {
const [cuenta, setCuenta] = useState(0)
return (
<div>
<p>Cuenta: {cuenta}</p>
<button onClick={() => setCuenta(cuenta + 1)}>
+1
</button>
</div>
)
}
useEffect: Efectos secundarios
import { useState, useEffect } from 'react'
function Datos() {
const [data, setData] = useState(null)
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(setData)
}, []) // [] = solo al montar
return <div>{JSON.stringify(data)}</div>
}
Patrón común: Lista
interface Item {
id: string
nombre: string
}
function Lista({ items }: { items: Item[] }) {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.nombre}</li>
))}
</ul>
)
}
Formularios
function Formulario() {
const [texto, setTexto] = useState('')
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
console.log('Enviado:', texto)
}
return (
<form onSubmit={handleSubmit}>
<input
value={texto}
onChange={e => setTexto(e.target.value)}
/>
<button type="submit">Enviar</button>
</form>
)
}