Neden kodu bileşenlere ayırmak önemlidir?

Kodun bileşenlere bölünmesi, uygulamanın yeniden kullanılabilirliğini, bakımını ve test edilebilirliğini artırır.

Yeniden kullanılabilirlik

Bağımsız bileşenler oluşturarak, bunlar uygulamanın farklı bölümlerinde veya hatta diğer projelerde kullanılabilir. Bu, zaman kazandırır ve hata olasılığını azaltır.

// button.js
const Button = ({ onClick, label }) => {
  return <button onClick={onClick}>{label}</button>;
};

// LoginForm.js - Button kullanır
import Button from './button';

const LoginForm = () => {
  const handleSubmit = () => {
    // ...
  };

  return (
    <form>
      {/* form */}
      <Button onClick={handleSubmit} label="Giriş Yap" />
    </form>
  );
};

// RegisterForm.js - da Button kullanılır
import Button from './button';

const RegisterForm = () => {
  const handleRegister = () => {
    // ...
  };

  return (
    <form>
      {/* form */}
      <Button onClick={handleRegister} label="Kayıt Ol" />
    </form>
  );
};

Bakım

Bileşenlere bölmek, kodu daha düzenli ve okunabilir kılar. Bir bileşende yapılan değişiklikler, uygulamanın diğer bölümlerini daha az etkiler. Bu, hata ayıklamayı ve yeni özellikler eklemeyi kolaylaştırır.

// Header.js
const Header = () => {
  // başlık mantığı ve düzeni
};

// Footer.js
const Footer = () => {
  // altbilgi mantığı ve düzeni
};

// App.js - ana sayfa
import Header from './Header';
import Footer from './Footer';

const App = () => {
  return (
    <div>
      <Header />
      {/* sayfa ana içeriği */}
      <Footer />
    </div>
  );
};

Yalnızca Header.js'de yapılan değişiklikler, Header arayüzü değişmediği sürece, Footer.js veya App.js'yi etkilemez.

Test edilebilirlik

Her bileşen izole edilerek test edilebilir, bu da testlerin yazılmasını kolaylaştırır ve güvenilirliğini artırır.

// button.test.js
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('tıklama olaylarını işler', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick} label="Buton" />);
  fireEvent.click(getByText('Buton'));
  expect(handleClick).toHaveBeenCalledTimes(1); // olayın çağrıldığını kontrol et
});

Diğer avantajlar

• Kod okunabilirliğinin artırılması: Daha küçük kod blokları daha kolay anlaşılır.
• Paralel geliştirme: Farklı geliştiriciler aynı anda farklı bileşenler üzerinde çalışabilir.
• Karmaşıklığın yönetimi: Karmaşık uygulamalar yönetilebilir parçalara bölünür.

Avantaj	Açıklama
Yeniden kullanılabilirlik	Bileşenlerin farklı yerlerde kullanılması
Bakım kolaylığı	Değişiklik yapmayı ve hataları gidermeyi kolaylaştırır
Test edilebilirlik	İzole test yapma imkanı
Okunabilirlik	Kod daha anlaşılır hale gelir
Yönetim	Uygulama karmaşıklığını azaltır

Bileşenlere bölünme, React, Vue ve Angular gibi modern frontend framework ve kütüphanelerinin temel ilkelerinden biridir.