React’te useState ve Props: Başlangıç Seviyesi Kılavuzu

React’te useState ve Props: Başlangıç Seviyesi Kılavuzu

React öğrenirken karşılaşacağınız en temel kavramlardan ikisi useState ve props‘tur. Bu rehberde, bu kavramları adım adım, örneklerle açıklayarak React yolculuğunuza yardımcı olmayı hedefliyorum. Öncelikle, props‘u daha sonra ise useState‘i ele alacağız.

Props: Bileşenler Arası Veri Aktarımı

Props (properties – özellikler), React bileşenlerine dışarıdan veri iletmenin bir yoludur. Bir üst bileşen, alt bileşenlerine props aracılığıyla veri aktarabilir. Bu, bileşenlerin birbirleriyle iletişim kurmasını ve veri paylaşımını sağlar. Props sadece okuma amaçlıdır; yani, alt bileşen props’ları değiştiremez.

İşte basit bir örnek:

function Merhaba(props) {
  return Merhaba, {props.isim}!;
}

function Uygulama() {
  return (
    <div>
      <Merhaba isim="Fatih" />
      <Merhaba isim="Ayşe" />
    </div>
  );
}

Bu örnekte, Merhaba bileşeni isim prop’unu alır ve bunu ekrana basar. Uygulama bileşeni ise Merhaba bileşenine farklı isimler gönderir. Sonuç olarak, sayfada “Merhaba, Fatih!” ve “Merhaba, Ayşe!” yazıları görüntülenir. Bu basit örnek bileşenler arası veri akışını göstermektedir. Ancak, gerçek dünya projelerinde daha karmaşık veri yapıları kullanılabilmektedir.

useState: Bileşen İçinde Durum Yönetimi

useState ise, React fonksiyonel bileşenlerinde durum (state) yönetimi için kullanılır. Durum, bileşenin zaman içinde değişebilen verilerini temsil eder. Örneğin, bir sayaç uygulamasında sayaç değeri durumdur ve useState ile yönetilir.

useState, bir dizi döndürür: durumun güncel değeri ve durum değerini güncelleyen bir fonksiyon. İşte bir örnek:

import React, { useState } from 'react';

function Sayaç() {
  const [sayac, sayacDegistir] = useState(0);

  return (
    <div>
      <p>Sayac: {sayac}</p>
      <button onClick={() => sayacDegistir(sayac + 1)}>Arttır</button>
    </div>
  );
}

Bu örnekte, useState(0) ile başlangıç değeri 0 olan bir sayaç oluşturulur. sayacDegistir fonksiyonu, butona tıklandığında sayaç değerini 1 artırır ve bu sayede arayüz güncellenir. Bu da durum yönetiminin ne kadar önemli olduğunu göstermektedir. Ayrıca, bu örnekte useState hook’unun kullanımı gösterilmiştir. Fonksiyonel bileşenlerde durum yönetimi için olmazsa olmazdır.

Özetle, props bileşenler arası veri akışını sağlarken, useState ise bileşen içindeki veri değişikliklerini ve durum yönetimini sağlar. İkisinin birleşimi ile karmaşık ve dinamik React uygulamaları geliştirmek mümkündür.

Daha fazla bilgi için fatihsoysal.com sitesini ziyaret edebilirsiniz. Ayrıca, React dokümantasyonuna buradan ulaşabilirsiniz.

Sonuç

Bu makalede, React’te useState ve props kavramlarını başlangıç seviyesinde ele aldık. Umarım bu bilgiler, React öğrenme yolculuğunuzda size yardımcı olmuştur. Sorularınız veya önerileriniz varsa lütfen yorumlarda belirtin.

#Etiketler: React, useState, props, React tutorial, React öğrenme, React state, React component, fonksiyonel component, bileşenler arası veri aktarımı, durum yönetimi, React hook