Kas ir komponenta?

Frontend izstrādes komponenta ir neatkarīga, atkārtoti izmantojama lietotāja saskarnes bloka daļa. Tā ietver savu struktūru (HTML), stilu (CSS) un uzvedību (JavaScript). Komponenti palīdz sadalīt sarežģītu saskarni mazākās, pārvaldāmās daļās, kas uzlabo koda lasāmību, atvieglo uzturēšanu un testēšanu.

Galvenās īpašības:

• Iekapsulēšana: Logika, marķējums un stils ir saistīti iekšā komponentā.
• Atkārtota lietošana: Komponentu var izmantot dažādās lietotnes daļās vai pat citos projektos.
• Neatkarība: Izmaiņas vienā komponentā minimāli ietekmē citus.
• Stāvoklis un propusi: Komponentiem var būt iekšējs stāvoklis (dati, kas var mainīties) un tie var saņemt datus no ārpuses caur propusiem (īpašībām).

Piemērs komponenta struktūrai (React):

// Button.js komponents
import React from 'react';
import './Button.css'; // Stilu imports

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

export default Button;

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

// Komponenta izmantošana
import Button from './Button';

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

  return (
    <div>
      <h1>Mana lietotne</h1>
      <Button label="Klikšķini mani" onClick={handleClick} />
    </div>
  );
}

export default App;

Komponentu koncepcija ir centrāla mūsdienu JavaScript ietvaros un bibliotēkās, piemēram, React, Vue un Angular.