¿Qué es un componente?

Un componente en el desarrollo frontend es un bloque independiente y reutilizable de la interfaz de usuario. Encapsula su estructura (HTML), estilo (CSS) y comportamiento (JavaScript). Los componentes ayudan a dividir interfaces complejas en partes más pequeñas y manejables, lo que mejora la legibilidad del código, facilita el mantenimiento y las pruebas.

Características principales:

• Encapsulación: La lógica, la estructura y el estilo están relacionadas dentro del componente.
• Reutilización: El componente puede usarse en diferentes partes de la aplicación o incluso en otros proyectos.
• Independencia: Los cambios en un componente afectan mínimamente a otros.
• Estado y props: Los componentes pueden tener estado interno (datos que pueden cambiar) y recibir datos externos a través de props (propiedades).

Ejemplo de estructura de un componente (React):

// Componente Button.js
import React from 'react';
import './Button.css'; // Importación de estilos

function Button(props) {
  return (
    <button className="button-style" onClick={props.onClick}>
      {props.label}
    </button>
  );
}

export default Button;

/* Estilos en Button.css */
.button-style {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

// Uso del componente
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('¡Botón clickeado!');
  };

  return (
    <div>
      <h1>Mi aplicación</h1>
      <Button label="Haz clic en mí" onClick={handleClick} />
    </div>
  );
}

export default App;

El concepto de componentes es central en frameworks y bibliotecas modernas de JavaScript, como React, Vue y Angular.