Co je to komponent?

Komponent v rámci vývoje frontend je nezávislý, znovu použitelný blok uživatelského rozhraní. Inkapsuluje svou strukturu (HTML), styl (CSS) a chování (JavaScript). Komponenty pomáhají rozdělit složité rozhraní na menší, lépe spravovatelné části, což zlepšuje čitelnost kódu, usnadňuje údržbu a testování.

Hlavní vlastnosti:

• Inkapulace: Logika, markup a styl jsou spojeny uvnitř komponenty.
• Znovupoužitelnost: Komponentu lze použít v různých částech aplikace nebo dokonce v jiných projektech.
• Nezávislost: Změny v jedné komponentě mají minimální dopad na ostatní.
• Stav a props: Komponenty mohou mít vnitřní stav (data, která se mohou měnit) a přijímat data zvenčí přes props (vlastnosti).

Příklad struktury komponenty (React):

// Komponenta Button.js
import React from 'react';
import './Button.css'; // Import stylů

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

export default Button;

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

// Použití komponenty
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Tlačítko bylo stisknuto!');
  };

  return (
    <div>
      <h1>Moje aplikace</h1>
      <Button label="Klikni na mě" onClick={handleClick} />
    </div>
  );
}

export default App;

Koncept komponent je klíčový v moderních JavaScriptových rámcích a knihovnách, jako jsou React, Vue a Angular.