Komponent nədir?

Frontend inkişafında komponent müstəqil və təkrar istifadə oluna bilən istifadəçi interfeysinin blokudur. O, öz strukturunu (HTML), stilini (CSS) və davranışını (JavaScript) inkapsulyasiya edir. Komponentlər mürəkkəb interfeysləri daha kiçik və idarəolunan hissələrə bölməyə kömək edir, bu da kodun oxunaqlığını yaxşılaşdırır, dəstəyi və test etməni asanlaşdırır.

Əsas xüsusiyyətlər:

• İnkapsulyasiya: Logika, markup və stil komponent daxilində əlaqəlidir.
• Təkrar istifadə: Komponent müxtəlif hissələrdə və ya digər layihələrdə istifadə oluna bilər.
• Müstəqillik: Bir komponentdəki dəyişikliklər digər komponentlərə minimal təsir edir.
• Vəziyyət və props: Komponentlər daxili vəziyyətə (dəyişə bilən məlumatlar) və xaricdən props (xüsusiyyətlər) vasitəsilə məlumat ala bilər.

React nümunəsində komponent strukturu:

// Button.js komponenti
import React from 'react';
import './Button.css'; // Stil importu

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

export default Button;

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

// Komponentdən istifadə
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Düymə klikləndi!');
  };

  return (
    <div>
      <h1>Mənim tətbiqim</h1>
      <Button label="Məni kliklə" onClick={handleClick} />
    </div>
  );
}

export default App;

Komponent anlayışı müasir JavaScript çərçivələri və kitabxanalarında, məsələn, React, Vue və Angular-da mərkəzi yer tutur.