Ի՞նչ է կոմպոնենտը։

Frontend զարգացման մեջ կոմպոնենտը ինքնաբավ և վերօգտագործելի բլոկ է օգտվողի ինտերֆեյսի։ Այն ամփոփում է իր կառուցվածքը (HTML), ոճը (CSS) և վարքագիծը (JavaScript): Կոմպոնենտները օգնում են բարդ ինտերֆեյսը բաժանել փոքր և կառավարելի մասերի, ինչը բարելավում է կոդի ընթերցելիությունը, հեշտացնում է սպասարկումը և թեստավորումը:

Հիմնական հատկանիշներ՝

• Անցկացման: Լոգիկան, markup-ը և ոճավորումը կապված են կոմպոնենտի ներսում:
• Վերօգտագործելիություն: Կոմպոնենտը կարող է օգտագործվել տարբեր մասերում կամ նույնիսկ այլ նախագծերում:
• Անկախություն: Մի կոմպոնենտում փոփոխությունները նվազագույն ազդեցություն են ունենում մյուսների վրա:
• Կարգավիճակ և props: Կոմպոնենտները կարող են ունենալ ներքին վիճակ (փոփոխվող տվյալներ) և ստանալ տվյալներ արտաքինից props-ների միջոցով:

Օրինակ՝ React-ի կոմպոնենտի կառուցվածքը՝

// Button.js կոմպոնենտ
import React from 'react';
import './Button.css'; // Ոճերի ներմուծում

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

export default Button;

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

// Կոմպոնենտի օգտագործում
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Կոճակը սեղմվեց!');
  };

  return (
    <div>
      <h1>Իմ հավելվածը</h1>
      <Button label="Սեղմիր ինձ" onClick={handleClick} />
    </div>
  );
}

export default App;

Կոմպոնենտների կոնցեպցիան կարևոր է ժամանակակից JavaScript ֆրեյմվորկների և գրադարանների, ինչպիսիք են React, Vue և Angular, մեջ։