17-Componentes en React-estado
Componentes en React
Concepto Básico
Los componentes son los bloques fundamentales de una aplicación en React. Son piezas independientes y reutilizables de código que definen:
Cómo debe verse una parte de la UI (estructura HTML)
Cómo debe comportarse (lógica y funcionalidad)
Analogía
Imagina que estás construyendo una casa:
Componente = Habitación (cocina, baño, dormitorio)
Cada habitación tiene su propio diseño y función
Puedes reutilizar el mismo diseño de dormitorio varias veces
Juntas todas las habitaciones para formar la casa completa
Tipos de Componentes
1. Componentes Funcionales (Recomendados actualmente)
javascript
// Componente como función
function Saludo(props) {
return <h1>Hola, {props.nombre}!</h1>;
}
// Con arrow function
const Boton = ({ texto, onClick }) => {
return <button onClick={onClick}>{texto}</button>;
};
2. Componentes de Clase (Legacy)
javascript
class Contador extends React.Component {
constructor(props) {
super(props);
this.state = { contador: 0 };
}
render() {
return <div>{this.state.contador}</div>;
}
}
Características Clave
Props (Propiedades)
Datos que se pasan de padre a hijo (solo lectura)
Como parámetros de una función
javascript
// Componente padre
function App() {
return <Usuario nombre="Ana" edad={25} />;
}
// Componente hijo
function Usuario(props) {
return (
<div>
<p>Nombre: {props.nombre}</p>
<p>Edad: {props.edad}</p>
</div>
);
}
Estado (State)
Datos que cambian durante la ejecución
Solo en componentes que necesitan "recordar" información
javascript
import { useState } from 'react';
function Contador() {
const [numero, setNumero] = useState(0);
return (
<div>
<p>Contador: {numero}</p>
<button onClick={() => setNumero(numero + 1)}>
Incrementar
</button>
</div>
);
}
Ejemplo Práctico
javascript
// Componente principal
function App() {
return (
<div className="app">
<Header titulo="Mi Tienda Online" />
<Producto
nombre="Laptop"
precio={999}
disponible={true}
/>
<Producto
nombre="Mouse"
precio={25}
disponible={false}
/>
<Footer año={2024} />
</div>
);
}
// Componente Header
function Header({ titulo }) {
return <header><h1>{titulo}</h1></header>;
}
// Componente Producto (reutilizable)
function Producto({ nombre, precio, disponible }) {
return (
<div className="producto">
<h3>{nombre}</h3>
<p>Precio: ${precio}</p>
<p>Estado: {disponible ? 'Disponible' : 'Agotado'}</p>
</div>
);
}
// Componente Footer
function Footer({ año }) {
return <footer>© {año} Mi Tienda. Todos los derechos reservados.</footer>;
}
Ventajas de Usar Componentes
✅ Reutilización
javascript
// Usar el mismo componente múltiples veces
<Boton texto="Guardar" color="azul" />
<Boton texto="Eliminar" color="rojo" />
<Boton texto="Cancelar" color="gris" />
✅ Mantenibilidad
Cada componente es independiente
Fácil de probar y depurar
Cambios aislados no afectan otros componentes
✅ Organización
Separación de responsabilidades
Jerarquía clara (árbol de componentes)
✅ Composición
javascript
// Componentes pequeños se combinan para formar grandes
function Pagina() {
return (
<>
<Header />
<Sidebar />
<MainContent>
<Articulo />
<Comentarios />
</MainContent>
<Footer />
</>
);
}
Estructura Típica de un Componente
// 1. Importaciones
import React, { useState } from 'react';
// 2. Definición del componente
function MiComponente(props) {
// 3. Estado (si es necesario)
const [estado, setEstado] = useState(valorInicial);
// 4. Funciones auxiliares
const manejarClick = () => {
// Lógica aquí
};
// 5. Renderizado (JSX)
return (
<div>
{/* Contenido del componente */}
</div>
);
// 6. Exportación
export default MiComponente;
Reglas Importantes
Nombres con mayúscula inicial: MiComponente, no miComponente
Deben retornar un solo elemento padre
Props son inmutables (no se pueden modificar directamente)
JSX debe tener un cierre adecuado: <Componente /> o <Componente></Componente>
Ciclo de Vida (Concepto Importante)
Los componentes "viven" en 3 fases:
Montaje: Cuando se crea y se inserta en el DOM
Actualización: Cuando sus props o estado cambian
Desmontaje: Cuando se elimina del DOM
Resumen Visual
text
Aplicación React
├── App (Componente raíz)
│ ├── Header
│ ├── Sidebar
│ │ ├── MenuItem
│ │ └── MenuItem
│ ├── MainContent
│ │ ├── Articulo
│ │ ├── Comentarios
│ │ │ └── Comentario
│ │ └── Formulario
│ └── Footer
└── (Más componentes...)
Los componentes transforman la UI compleja en piezas pequeñas, manejables y reutilizables, haciendo el desarrollo más eficiente y organizado
************
¿Qué es el estado en React?
El estado es un objeto que contiene datos específicos de un componente que pueden cambiar con el tiempo. Es como la "memoria interna" del componente.
Características clave:
1. Es mutable (puede cambiar)
javascript
// El estado puede actualizarse
this.setState({ contador: 5 }) // Cambia el valor
2. Es local y privado
Solo el componente que lo posee puede accederlo
No es accesible desde otros componentes directamente
3. Desencadena re-renderizados
Cada vez que el estado cambia, React vuelve a renderizar el componente (y sus hijos si es necesario).
Ejemplo práctico:
javascript
import React, { useState } from 'react';
function Contador() {
// Declaramos el estado: 'contador' es la variable, 'setContador' la función para cambiarla
const [contador, setContador] = useState(0);
return (
<div>
<p>Has hecho clic {contador} veces</p>
{/* Al hacer clic, actualizamos el estado */}
<button onClick={() => setContador(contador + 1)}>
Haz clic
</button>
</div>
);
}
Estado vs Props
Reglas importantes:
Nunca modifiques el estado directamente
javascript
// ❌ MAL
this.state.contador = 5;
// ✅ BIEN (componentes de clase)
this.setState({ contador: 5 });
// ✅ BIEN (hooks)
setContador(5);
Las actualizaciones del estado son asíncronas
javascript
// ❌ Esto podría no funcionar como esperas
setContador(contador + 1);
setContador(contador + 1);
// ✅ Usa la forma funcional para actualizaciones consecutivas
setContador(prevContador => prevContador + 1);
El estado se eleva (lifting state up)
Cuando varios componentes necesitan compartir estado, se "eleva" al ancestro común más cercano.
Tipos de estado:
Estado local:
javascript
// Solo este componente lo usa
const [usuario, setUsuario] = useState('');
Estado global:
javascript
// Compartido entre muchos componentes (usando Context API, Redux, etc.)
const { carrito } = useCarritoContext();
Cuándo usar estado:
Datos que cambian con interacción del usuario
Información que necesita persistir entre renderizados
Valores que afectan lo que se muestra en pantalla
Datos que se actualizan con el tiempo (animaciones, temporizadores)
Resumen:
El estado es lo que hace que un componente de React sea dinámico e interactivo. Sin estado, nuestros componentes serían estáticos como HTML normal. Con estado, podemos crear aplicaciones que responden a la interacción del usuario, actualizan la interfaz y "recuerdan" información a lo largo del tiempo.
Comentarios
Publicar un comentario