Cos'è un componente?

Un componente nello sviluppo frontend è un blocco indipendente e riutilizzabile dell'interfaccia utente. Incapsula la sua struttura (HTML), stile (CSS) e comportamento (JavaScript). I componenti aiutano a suddividere interfacce complesse in parti più piccole e gestibili, migliorando la leggibilità del codice, facilitando la manutenzione e i test.

Caratteristiche principali:

• Incapsulamento: Logica, markup e stile sono collegati all'interno del componente.
• Riutilizzabilità: Il componente può essere usato in diverse parti dell'applicazione o anche in altri progetti.
• Indipendenza: Le modifiche in un componente influenzano minimamente gli altri.
• Stato e props: I componenti possono avere uno stato interno (dati che possono cambiare) e ricevere dati dall'esterno tramite props (proprietà).

Esempio di struttura di un componente (React):

// Componente Button.js
import React from 'react';
import './Button.css'; // Importazione degli stili

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

export default Button;

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

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

function App() {
  const handleClick = () => {
    console.log('Bottone cliccato!');
  };

  return (
    <div>
      <h1>La mia applicazione</h1>
      <Button label="Clicca qui" onClick={handleClick} />
    </div>
  );
}

export default App;

Il concetto di componenti è centrale nei moderni framework e librerie JavaScript come React, Vue e Angular.