Čo je to komponent?

Komponent v rámci vývoja frontend je nezávislý, znovu použiteľný blok používateľského rozhrania. Inkapsuluje svoju štruktúru (HTML), štýl (CSS) a správanie (JavaScript). Komponenty pomáhajú rozdeľovať zložité rozhranie na menšie, spravovateľné časti, čo zlepšuje čitateľnosť kódu, uľahčuje údržbu a testovanie.

Hlavné vlastnosti:

• Inkapulácia: Logika, markup a štýlovanie sú prepojené v rámci komponentu.
• Znovupoužiteľnosť: Komponent možno použiť v rôznych častiach aplikácie alebo dokonca v iných projektoch.
• Nezávislosť: Zmeny v jednom komponente majú minimálny vplyv na ostatné.
• Stav a props: Komponenty môžu mať vnútorný stav (údaje, ktoré sa môžu meniť) a prijímať údaje zvonku cez props (vlastnosti).

Príklad štruktúry komponentu (React):

// Komponent Button.js
import React from 'react';
import './Button.css'; // Import štýlov

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

export default Button;

/* Štýly v Button.css */
.button-style {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

// Použitie komponentu
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Tlačidlo bolo stlačené!');
  };

  return (
    <div>
      <h1>Moja aplikácia</h1>
      <Button label="Klikni na mňa" onClick={handleClick} />
    </div>
  );
}

export default App;

Koncept komponentov je kľúčový v moderných JavaScriptových rámcoch a knižniciach ako React, Vue a Angular.