Blog

ReactJS'de "Components and Props" (Bileşenler ve Özellikler), uygulamanızı bağımsız ve yeniden kullanılabilir parçalar halinde inşa etmenizi sağlayan temel kavramlardır. İşte bu iki kavram hakkında detaylı bilgi:

Bileşenler (Components)

1. Tanım: Bileşenler, React'te kullanıcı arayüzünü oluşturan bağımsız ve yeniden kullanılabilir parçalardır. Bir React uygulaması, genellikle birçok bileşenden oluşur.

2. Türleri:

   1. Fonksiyonel Bileşenler: JavaScript fonksiyonları olarak tanımlanırlar ve props olarak adlandırılan girdiler alıp, görüntülenmesi gereken React elemanlarını döndürürler. Örnek: function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
   2. Sınıf Bileşenleri: JavaScript sınıfları olarak tanımlanırlar ve render metodu içinde görüntülenmesi gereken React elemanlarını döndürürler. Örnek: class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }

3. Yeniden Kullanım ve Bileşim: Bileşenler, kodun yeniden kullanılabilirliğini artırır. Küçük bileşenler büyük bileşenlerde birleştirilebilir.

Özellikler (Props)

1. Tanım: Props, bileşenlere veri aktarmak için kullanılır. Bileşenler, kendilerine aktarılan propsları okuyabilir ama değiştiremezler (değişmezlerdir).

2. Kullanım: Bir bileşene prop aktarmak, HTML etiketlerine özellik eklemek gibidir. Örnek: <Welcome name="Sara" /> burada name bir prop'tur.

3. Bileşenler Arası İletişim: Üst bileşenden alt bileşenlere veri aktarımı props aracılığıyla yapılır. Böylece bileşenler arası iletişim sağlanır.

4. Okuma ve Kullanım: Fonksiyonel bileşenlerde props, fonksiyonun parametresi olarak geçilir. Sınıf bileşenlerinde ise this.props üzerinden erişilir.

Örnek

  

      

          javascript
      
      

          
              
function Welcome(props) {
              
return <h1>Hello, {props.name}</h1>;
              
}
              
function App() {
              
return (
              
<div>
              
<Welcome name="Sara" />
              
<Welcome name="Cahit" />
              
<Welcome name="Eda" />
              
</div>
              
);
              
}
              
      
  

Bu örnekte, Welcome bileşeni farklı isimlerle üç kez kullanılıyor. Her kullanım, name prop'u ile farklı bir isim alıyor. App bileşeni bu Welcome bileşenlerini bir araya getirerek birleşik bir UI oluşturuyor.

Bileşenler ve props, React uygulamalarının modüler ve etkili bir şekilde inşa edilmesini sağlar, böylece karmaşık kullanıcı arayüzleri daha yönetilebilir ve anlaşılır hale gelir.