⚛️ React Props Kullanımı: Dinamik Bileşenler ve PropTypes ile Doğrulama

🎯 Bu Rehberde Ne Öğreneceksiniz?

Bu rehberde, React Props (nitelikler) kullanarak bileşenlerinizi nasıl özelleştireceğinizi, farklı veri tiplerini (string, array, object, function) nasıl aktaracağınızı ve PropTypes ile bu verileri nasıl doğrulayacağınızı adım adım öğreneceksiniz.
Ayrıca defaultProps ile eksik veriler için güvenli varsayılan değerler tanımlamayı da uygulamalı göreceksiniz.

---

💻 Ön Gereksinimler

• Node.js ve npm kurulu olmalı
• Create React App kullanımını bilmek
• JSX sözdizimi ve React bileşen yapısına hakim olmak

---

1️⃣ Yeni React Projesi Oluşturma ve Temizlik

Yeni bir React projesi oluşturun:

npx create-react-app rabisu-props-rehberi
cd rabisu-props-rehberi
npm start

Bu komutlar ile geliştirme sunucusu başlar. http://localhost:3000 adresinde proje görünür.

Varsayılan kodu sadeleştirin. src/App.js dosyasını açın:

import React from 'react';
import './App.css';

function App() {
  return <></>; // Başlangıçta boş bir sayfa
}

export default App;

Kullanılmayan logo dosyasını silin:

rm src/logo.svg

Daha düzenli bir yapı için bileşen klasörlerini oluşturun:

mkdir src/components
mkdir src/components/App
mv src/App.* src/components/App
src/index.js dosyasındaki import yolunu güncelleyin:

import App from './components/App/App';

---

2️⃣ Props ile Dinamik Bileşen Oluşturma

📁 Örnek Veri Dosyası (data.js)

src/components/App/ dizinine data.js ekleyin:

export default [
  {
    name: 'Aslan',
    scientificName: 'Panthera leo',
    size: 140,
    diet: ['et'],
  },
  {
    name: 'Goril',
    scientificName: 'Gorilla beringei',
    size: 205,
    diet: ['bitki', 'böcek'],
    additional: { notes: 'Bu, doğu gorilidir. Batı gorili farklı bir türdür.' }
  },
  {
    name: 'Zebra',
    scientificName: 'Equus quagga',
    size: 322,
    diet: ['bitki'],
    additional: {
      notes: 'Üç farklı zebra türü vardır.',
      link: 'https://tr.wikipedia.org/wiki/Zebra'
    }
  }
];

Bu örnek veriler, farklı veri tiplerinde Props geçmenin pratik örneğidir.

🧩 AnimalCard Bileşenini Oluşturma

src/components/AnimalCard/ klasörünü oluşturun:

mkdir src/components/AnimalCard
touch src/components/AnimalCard/AnimalCard.js
touch src/components/AnimalCard/AnimalCard.css

AnimalCard.js içeriği:

import React from 'react';
import './AnimalCard.css';

export default function AnimalCard() {
  return <h2>Hayvan</h2>;
}

🦁 App Bileşeninden Veri Aktarma

src/components/App/App.js dosyasını açın:

import React from 'react';
import data from './data';
import AnimalCard from '../AnimalCard/AnimalCard';
import './App.css';

function App() {
  return (
    <div className="wrapper">
      <h1>Rabisu Hayvanat Bahçesi</h1>
      {data.map(animal => (
        <AnimalCard 
          key={animal.name}
          name={animal.name} // Prop olarak veri gönder
        />
      ))}
    </div>
  );
}

export default App;

🧠 Props’u Bileşen İçinde Kullanmak

AnimalCard.js dosyasını güncelleyin:

import React from 'react';
import './AnimalCard.css';

export default function AnimalCard({ name }) {
  return <h2>{name}</h2>;
}

props.name yerine { name } destructuring ile kod okunabilirliğini artırır.

---

3️⃣ Birden Fazla Veri Tipi ve Fonksiyon Props Geçmek

App.js dosyasına geri dönün:

function showAdditional(additional) {
  if (!additional) return;
  const info = Object.entries(additional)
    .map(([k, v]) => `${k}: ${v}`)
    .join('\n');
  alert(info);
}

function App() {
  return (
    <div className="wrapper">
      <h1>Rabisu Hayvanat Bahçesi</h1>
      {data.map(animal => (
        <AnimalCard
          key={animal.name}
          name={animal.name}
          scientificName={animal.scientificName}
          size={animal.size}
          diet={animal.diet}
          additional={animal.additional}
          showAdditional={showAdditional}
        />
      ))}
    </div>
  );
}

Ardından AnimalCard.js dosyasını genişletin:

export default function AnimalCard({
  name,
  scientificName,
  size,
  diet,
  additional,
  showAdditional
}) {
  return (
    <div className="animal-wrapper">
      <h2>{name}</h2>
      <h3>{scientificName}</h3>
      <h4>{size} kg</h4>
      <p>Diyet: {diet.join(', ')}</p>
      <button onClick={() => showAdditional(additional)}>Detaylı Bilgi</button>
    </div>
  );
}

join() metodu diziyi okunabilir metin haline getirir. Butona tıklanınca fonksiyon Props olarak çalıştırılır.

---

4️⃣ PropTypes ve defaultProps ile Veri Doğrulama

AnimalCard.js dosyasında PropTypes’ı tanımlayın:

import PropTypes from 'prop-types';

AnimalCard.propTypes = {
  name: PropTypes.string.isRequired,
  scientificName: PropTypes.string.isRequired,
  size: PropTypes.number.isRequired,
  diet: PropTypes.arrayOf(PropTypes.string).isRequired,
  additional: PropTypes.shape({
    link: PropTypes.string,
    notes: PropTypes.string
  }),
  showAdditional: PropTypes.func.isRequired,
};

AnimalCard.defaultProps = {
  additional: { notes: 'Ek bilgi bulunmamaktadır.' }
};

PropTypes runtime’da kontrol yapar, hata yerine konsola uyarı basar. defaultProps eksik verilerde güvenli fallback sağlar.

💡 İpucu

Eğer size alanını yanlışlıkla "200" (string) olarak yazarsanız, React konsolunda:

go

Warning: Failed prop type: Invalid prop size of type string supplied to AnimalCard, expected number. şeklinde bir uyarı alırsınız.

---

❓ Sıkça Sorulan Sorular (SSS)

1. Props ve State farkı nedir?

Props üst bileşenden veri taşır, değiştirilemez. State bileşen içinde değişen veridir.

2. Neden Props immutable’dır?

React’ta tek yönlü veri akışı vardır. Props değişmez, sadece üst bileşen günceller.

3. PropTypes TypeScript’in yerini tutar mı?

Hayır. PropTypes çalışma anında kontrol eder, TypeScript ise derleme aşamasında hatayı engeller.

4. Fonksiyonu Props olarak geçmek neden yararlıdır?

Alt bileşenlerin olayları yönetip üst bileşene haber göndermesini sağlar (callback yapısı).

5. Destructuring neden önerilir?

Kodun okunabilirliğini artırır, her yerde props. yazma ihtiyacını kaldırır.

---

🚀 Sonuç

Bu rehberde, React Props kullanarak bileşenlerinizi dinamikleştirmeyi, PropTypes ile veri tiplerini doğrulamayı ve defaultProps ile eksik verilerde uygulamanın çökmesini önlemeyi öğrendiniz. Artık bileşenlerinizi daha güvenli, esnek ve yeniden kullanılabilir şekilde geliştirebilirsiniz.

Rabisu Bulut platformunda oluşturduğunuz React projelerinde bu yöntemleri hemen deneyin ve farkı görün! ⚡

yaml