Czym jest komponent?

Komponent w rozwoju frontend to niezależny, wielokrotnego użytku blok interfejsu użytkownika. Encapsuluje swoją strukturę (HTML), styl (CSS) i zachowanie (JavaScript). Komponenty pomagają dzielić złożony interfejs na mniejsze, zarządzalne części, co poprawia czytelność kodu, ułatwia utrzymanie i testowanie.

Główne cechy:

• Enkapsulacja: Logika, struktura i styl są powiązane wewnątrz komponentu.
• Wielokrotnego użytku: Komponent można używać w różnych częściach aplikacji lub nawet w innych projektach.
• Niezależność: Zmiany w jednym komponencie minimalnie wpływają na inne.
• Stan i props: Komponenty mogą mieć stan wewnętrzny (dane, które mogą się zmieniać) i otrzymywać dane z zewnątrz przez props (właściwości).

Przykład struktury komponentu (React):

// Komponent Button.js
import React from 'react';
import './Button.css'; // Import stylów

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

export default Button;

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

// Użycie komponentu
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Przycisk kliknięty!');
  };

  return (
    <div>
      <h1>Moja aplikacja</h1>
      <Button label="Kliknij mnie" onClick={handleClick} />
    </div>
  );
}

export default App;

Koncepcja komponentów jest kluczowa w nowoczesnych frameworkach i bibliotekach JavaScript, takich jak React, Vue i Angular.