Mis on komponent?

Frontend arendamisel on komponent iseseisev, taaskasutatav kasutajaliidese plokk. See kapseldab oma struktuuri (HTML), stiili (CSS) ja käitumise (JavaScript). Komponendid aitavad keerulise liidese jagada väiksemateks, hallatavateks osadeks, mis parandab koodi loetavust, lihtsustab hooldust ja testimist.

Peamised omadused:

• Kapseldus: Loogika, märgistus ja stiil on seotud komponendi sees.
• Taaskasutus: Komponenti saab kasutada erinevates rakenduse osades või isegi teistes projektides.
• Iseseisvus: Muudatused ühes komponendis mõjutavad teisi minimaalselt.
• Oleku ja propsidega: Komponentidel võib olla sisemine olek (andmed, mis võivad muutuda) ning nad saavad väljast andmeid propide kaudu (omadused).

Näide komponendi struktuurist (React):

// Button.js komponent
import React from 'react';
import './Button.css'; // Stiilide import

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

export default Button;

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

// Komponendi kasutamine
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Nupp klõpsatud!');
  };

  return (
    <div>
      <h1>Minu rakendus</h1>
      <Button label="Klõpsa mind" onClick={handleClick} />
    </div>
  );
}

export default App;

Komponentide kontseptsioon on keskne kaasaegsetes JavaScripti raamistikudes ja teekides nagu React, Vue ja Angular.