Bileşen nedir?

Frontend geliştirmede bileşen, kullanıcı arayüzünün bağımsız ve yeniden kullanılabilir bir bloğudur. HTML (yapı), CSS (stil) ve JavaScript (davranış) kapsüller. Bileşenler, karmaşık arayüzleri daha küçük ve yönetilebilir parçalara ayırmaya yardımcı olur, bu da kod okunabilirliğini artırır, bakım ve testleri kolaylaştırır.

Ana özellikler:

• Kapsülleme: Mantık, yapı ve stil bileşenin içinde ilişkilidir.
• Yeniden kullanılabilirlik: Bileşen, uygulamanın farklı bölümlerinde veya diğer projelerde kullanılabilir.
• Bağımsızlık: Bir bileşende yapılan değişiklikler diğerlerini minimum düzeyde etkiler.
• Durum ve props: Bileşenler iç durum (değişebilen veriler) ve dışarıdan props (özellikler) alabilir.

React örneğiyle bir bileşen yapısı:

// Button.js bileşeni
import React from 'react';
import './Button.css'; // Stil importu

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

export default Button;

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

// Bileşenin kullanımı
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Butona tıklandı!');
  };

  return (
    <div>
      <h1>Uygulamam</h1>
      <Button label="Bana tıkla" onClick={handleClick} />
    </div>
  );
}

export default App;

Bileşen kavramı, React, Vue ve Angular gibi modern JavaScript çerçeve ve kütüphanelerinde merkezi önemdedir.