19. 1,Nuestro primer Componente en React JS
Componentes en React: Una analogía con LEGO
Imagina que React es como construir con bloques de LEGO. Cada pieza de LEGO es un componente. 📦 ¿Qué es un componente?
Un componente es una pieza reutilizable de interfaz que tiene:
Su propia lógica (qué hace)
Su propia apariencia (cómo se ve)
Puede recibir información (como parámetros)
Puede combinarse con otros componentes
🧩 Ejemplo Sencillo: Un Botón
Componente más simple (como función):
jsx
// MiBoton.jsx
function MiBoton() {
return <button>Haz clic aquí</button>;
}
Usando el componente:
jsx
// App.jsx
function App() {
return (
<div>
<h1>Mi App</h1>
<MiBoton /> {/* ¡Aquí usamos nuestro componente! */}
<MiBoton /> {/* Podemos usarlo muchas veces */}
</div>
);
} Resultado: Aparecen dos botones idénticos.
🔧 Componente con información variable (props)
Los componentes pueden recibir información diferente cada vez que los usamos:
jsx
// BotonPersonalizado.jsx
function BotonPersonalizado(props) {
return <button>{props.texto}</button>;
}
// App.jsx
function App() {
return (
<div>
<BotonPersonalizado texto="Guardar" />
<BotonPersonalizado texto="Eliminar" />
<BotonPersonalizado texto="Enviar" />
</div>
);
}
Resultado: Tres botones con textos diferentes.
🏗️ Componentes dentro de componentes
Así como un LEGO grande está hecho de piezas más pequeñas:
jsx
// TarjetaPerfil.jsx
function TarjetaPerfil(props) {
return (
<div className="tarjeta">
<h2>{props.nombre}</h2>
<p>Edad: {props.edad}</p>
<BotonPersonalizado texto="Contactar" />
</div>
);
}
// App.jsx
function App() {
return (
<div>
<TarjetaPerfil nombre="Ana" edad="25" />
<TarjetaPerfil nombre="Carlos" edad="30" />
</div>
);
}
📊 Tipos de Componentes
1. Componentes Funcionales (los más usados hoy)
jsx
function Saludo(props) {
return <h1>Hola, {props.nombre}!</h1>;
}
2. Componentes de Clase (más antiguos)
jsx
class Saludo extends React.Component {
render() {
return <h1>Hola, {this.props.nombre}!</h1>;
}
}
💡 Beneficios de usar componentes
Reutilización: Un componente hecho, se usa en muchos lugares
Organización: Código más limpio y fácil de mantener
Encapsulación: Cada componente maneja su propio comportamiento
Composabilidad: Puedes combinar componentes pequeños para hacer grandes aplicaciones
🎯 Ejemplo Final Completo
jsx
// Componente Producto
function Producto(props) {
return (
<div className="producto">
<h3>{props.nombre}</h3>
<p>Precio: ${props.precio}</p>
<button>Comprar</button>
</div>
);
}
// Componente Tienda (usa varios Productos)
function Tienda() {
return (
<div>
<h1>Mi Tienda Online</h1>
<Producto nombre="Laptop" precio="999" />
<Producto nombre="Teléfono" precio="499" />
<Producto nombre="Tablet" precio="299" />
</div>
);
}
📝 Resumen
Componente = Pieza de LEGO independiente
Props = Información que le pasamos al componente
JSX = Lo que parece HTML pero es JavaScript
Composición = Juntar componentes para hacer aplicaciones complejas
React te permite construir interfaces complejas combinando componentes simples, como construir un castillo con bloques de LEGO.
Comentarios
Publicar un comentario