Что такое компонент?

Компонент во Frontend-разработке — это независимый, переиспользуемый блок пользовательского интерфейса. Он инкапсулирует свою структуру (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('Button clicked!');
  };

  return (
    <div>
      <h1>Мое приложение</h1>
      <Button label="Кликни меня" onClick={handleClick} />
    </div>
  );
}

export default App;

Концепция компонентов является центральной в современных JavaScript-фреймворках и библиотеках, таких как React, Vue и Angular.