Kas yra komponentas?

Frontend kūrimo komponentas yra nepriklausomas, pakartotinai naudojamas vartotojo sąsajos blokas. Jis įkapsuliuoja savo struktūrą (HTML), stilių (CSS) ir elgseną (JavaScript). Komponentai padeda suskaidyti sudėtingą sąsają į mažesnes, valdomas dalis, kas gerina kodo skaitomumą, palengvina palaikymą ir testavimą.

Pagrindinės savybės:

• Įkapsuliavimas: Logika, žymėjimas ir stilius yra susiję viduje komponento.
• Pakartotinumas: Komponentą galima naudoti skirtingose programėlės dalyse arba net kituose projektuose.
• Nepriklausomumas: Pakeitimai viename komponente minimaliai veikia kitus.
• Būsenos ir propai: Komponentai gali turėti vidinę būseną (duomenis, kurie gali keistis) ir gauti duomenis iš išorės per propus (savybes).

Pavyzdinė komponento struktūra (React):

// Button.js komponentas
import React from 'react';
import './Button.css'; // Stilių importas

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

export default Button;

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

// Komponento naudojimas
import Button from './Button';

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

  return (
    <div>
      <h1>Mano programa</h1>
      <Button label="Paspausk mane" onClick={handleClick} />
    </div>
  );
}

export default App;

Komponentų koncepcija yra centrinė šiuolaikiniuose JavaScript karkasuose ir bibliotekose, tokiuose kaip React, Vue ir Angular.