Какво е компонент?

Компонент в разработката на фронтенд е независим, повторно използваем блок от потребителския интерфейс. Той капсулира своята структура (HTML), стил (CSS) и поведение (JavaScript). Компонентите помагат за разбиване на сложен интерфейс на по-малки, управляеми части, което подобрява четливостта на кода, улеснява поддръжката и тестването.

Основни характеристики:

• Капсулация: Логиката, разметката и стилизирането са свързани вътре в компонента.
• Повторна употреба: Компонентът може да се използва в различни части на приложението или дори в други проекти.
• Независимост: Промените в един компонент минимално влияят на другите.
• Състояние и пропс: Компонентите могат да имат вътрешно състояние (данни, които могат да се променят) и да получават данни отвън чрез пропс (свойства).

Пример за структура на компонент (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.