Mi az a komponens?

A frontend fejlesztésben egy komponens egy független, újra felhasználható felhasználói felület blokk. Encapsulálja szerkezetét (HTML), stílusát (CSS) és viselkedését (JavaScript). A komponensek segítenek a komplex felületek kisebb, kezelhető részekre bontásában, ami javítja a kód olvashatóságát, megkönnyíti a karbantartást és a tesztelést.

Fő jellemzők:

• Encapsuláció: A logika, a markup és a stílus összekapcsolódik a komponensen belül.
• Újra felhasználhatóság: A komponens különböző részekben vagy akár más projektekben is használható.
• Függetlenség: Egy komponensben végrehajtott változtatások minimálisan befolyásolják a többit.
• Állapot és props: A komponensek lehetnek belső állapottal (változó adatok) és külső adatokat kaphatnak props-en keresztül.

Példa egy komponens struktúrájára (React):

// Button.js komponens
import React from 'react';
import './Button.css'; // Stílusok importálása

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

export default Button;

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

// A komponens használata
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Gomb megnyomva!');
  };

  return (
    <div>
      <h1>Az alkalmazásom</h1>
      <Button label="Kattints rám" onClick={handleClick} />
    </div>
  );
}

export default App;

A komponensek fogalma központi szerepet játszik a modern JavaScript keretrendszerekben és könyvtárakban, mint például a React, Vue és Angular.