O que é um componente?

Um componente no desenvolvimento frontend é um bloco independente e reutilizável da interface de utilizador. Encapsula a sua estrutura (HTML), estilo (CSS) e comportamento (JavaScript). Os componentes ajudam a dividir interfaces complexas em partes mais pequenas e geríveis, o que melhora a legibilidade do código, facilita a manutenção e os testes.

Características principais:

• Encapsulamento: A lógica, a estrutura e o estilo estão relacionados dentro do componente.
• Reutilização: O componente pode ser usado em diferentes partes da aplicação ou até em outros projetos.
• Independência: As alterações num componente afetam minimamente outros.
• Estado e props: Os componentes podem ter estado interno (dados que podem mudar) e receber dados de fora através de props (propriedades).

Exemplo de estrutura de um componente (React):

// Componente Button.js
import React from 'react';
import './Button.css'; // Importação de estilos

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

export default Button;

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

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

function App() {
  const handleClick = () => {
    console.log('Botão clicado!');
  };

  return (
    <div>
      <h1>Minha aplicação</h1>
      <Button label="Clique em mim" onClick={handleClick} />
    </div>
  );
}

export default App;

O conceito de componentes é central em frameworks e bibliotecas modernas de JavaScript, como React, Vue e Angular.