Ce este un component?

Un component în dezvoltarea frontend este un bloc independent și reutilizabil al interfeței utilizatorului. Acesta încapsulează structura (HTML), stilul (CSS) și comportamentul (JavaScript). Componentele ajută la divizarea unei interfețe complexe în părți mai mici și gestionabile, ceea ce îmbunătățește lizibilitatea codului, facilitează întreținerea și testarea.

Caracteristici principale:

• Încapsulare: Logica, markup-ul și stilul sunt legate în interiorul componentului.
• Reutilizare: Componentul poate fi folosit în diferite părți ale aplicației sau chiar în alte proiecte.
• Independență: Modificările într-un component afectează minim celelalte.
• Stare și props: Componentele pot avea stare internă (date care se pot schimba) și pot primi date din exterior prin props (proprietăți).

Exemplu de structură a unui component (React):

// Component Button.js
import React from 'react';
import './Button.css'; // Import stiluri

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

export default Button;

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

// Utilizarea componentului
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Buton apăsat!');
  };

  return (
    <div>
      <h1>Aplicația mea</h1>
      <Button label="Apasă-mă" onClick={handleClick} />
    </div>
  );
}

export default App;

Conceptul de componente este central în framework-urile și bibliotecile moderne JavaScript precum React, Vue și Angular.