Шта је компонента?

Komponent u razvoju frontend-a je nezavisan, ponovo upotrebljiv blok korisničkog interfejsa. On inkapsulira svoju strukturu (HTML), stil (CSS) i ponašanje (JavaScript). Komponenti pomažu u razbijanju složenog interfejsa na manje, upravljive delove, što poboljšava čitljivost koda, olakšava održavanje i testiranje.

Glavne karakteristike:

• Enkapsulacija: Logika, markup i stil su povezani unutar komponenta.
• Ponovna upotrebljivost: Komponenta se može koristiti u različitim delovima aplikacije ili čak u drugim projektima.
• Nezavisnost: Promene u jednoj komponenti minimalno utiču na druge.
• Stanje i props: Komponenti mogu imati interno stanje (podatke koji se mogu menjati) i primati podatke spolja putem props-a (svojstava).

Primer strukture komponente (React):

// Komponenta Button.js
import React from 'react';
import './Button.css'; // Uvoz stilova

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

export default Button;

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

// Korišćenje komponente
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Dugme je kliknuto!');
  };

  return (
    <div>
      <h1>Moja aplikacija</h1>
      <Button label="Klikni me" onClick={handleClick} />
    </div>
  );
}

export default App;

Koncept komponenti je centralan u modernim JavaScript okvirima i bibliotekama kao što su React, Vue i Angular.