React Component ve Türleri Nelerdir ?

React, modern web uygulamaları geliştirmek için popüler bir JavaScript kütüphanesidir. React, bileşen (component) tabanlı bir yaklaşımı benimser. Buradaki bileşen olarak bahsettiğimiz Component yapısından başkası değil. Peki, bu bileşenler nedir ve farklı türleri nelerdir? Bu yazıda, React bileşenlerini ve çeşitlerini ayrıntılı bir şekilde ele alacağız.

Bileşen Nedir? React'te bileşenler, UI (Kullanıcı Arayüzü) öğelerini tanımlayan ve yeniden kullanılabilir ve bağımsız parçalar olarak düşünülen JavaScript fonksiyonları veya sınıflarıdır. Her bir bileşen, kendi içinde bir state (durum) ve props (özellikler) taşıyabilir. Bu bileşenleri çeşitli kısımlarda kullanabiliriz. Örneğin Navbar, sidebar, searchbar , filter gibi gibi..

Fonksiyon Bileşenleri (Function Components)

Fonksiyon bileşenleri, React 16.8 sürümüyle birlikte gelen ve özellikle fonksiyonel programlama tarzını tercih eden geliştiriciler için ideal olan bir bileşen türüdür. Bir JavaScript fonksiyonu olarak tanımlanırlar ve genellikle props (özellikler) alarak UI'yi oluştururlar.

Basit bir Function Components Örneği ;

import React from 'react';

export const ExampleComponent = (props) => {
  return <div>{props.message}</div>;
};

Buradaki Basit Component bir props alıp bu props içerisindeki message özelliğini yazdırıyor.

Sınıf Bileşenleri (Class Components)

Sınıf bileşenleri, React'in eski sürümlerinden beri var olan ve genellikle daha karmaşık state yönetimi veya yaşam döngüsü yönetimi gerektiren durumlarda tercih edilen bileşen türüdür. ES6 sınıflarını kullanarak tanımlanırlar.

Basit bir Class Components Örneği ;

import React, { Component } from 'react';

class ExampleComponent extends Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

export default ExampleComponent;

Bu iki örnekteki kullanımlar tercihlere göre değişebilir. Belirttiğim gibi fonksiyonel programlama tarzını seven yazılımcılar için Function Components daha kullanışlı gelebilir.

Higher-Order Components (HOCs)

Higher-Order Components (HOCs), diğer bileşenleri saran ve onlara yeni özellikler ekleyen veya belirli davranışları uygulayan bileşenlerdir. Bu, bileşenler arasında kodu yeniden kullanmayı ve mantığı paylaşmayı kolaylaştırır.

import React from 'react';

const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component is mounted!');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default withLogger;

Yukarıdaki örnekte, withLogger adında bir higher-order component (HOC) tanımlanmıştır. Bu HOC, componentDidMount yaşam döngüsü yöntemini kullanarak bir bileşenin monte edildiğinde konsola bir mesaj yazdırır.

import React from 'react';

const MyComponent = (props) => {
  return <div>{props.message}</div>;
};

const MyComponentWithLogger = withLogger(MyComponent);
export default MyComponentWithLogger;

MyComponent bileşeni withLogger HOC ile sarılmış ve MyComponentWithLogger bileşeni oluşturulmuştur. Bu sayede, MyComponentWithLogger bileşeni monte edildiğinde konsola bir mesaj yazdırılır.

Yazının Özeti ;

React, bileşen tabanlı yapısıyla modern web geliştirme dünyasında önemli bir yer edinmiştir. Bu yazıda, React bileşenlerini ve farklı türlerini anlatmaya çalıştık. Fonksiyon bileşenleri, sınıf bileşenleri ve higher-order components gibi farklı türler, React uygulamalarını oluştururken geliştiricilere çeşitli araçlar sunar. Bu bileşen türlerini anlamak, daha etkili ve modüler React uygulamaları geliştirmenize yardımcı olabilir.