React’te Tıklamalar, Stiller ve Koşullar

React’te Tıklamalar, Stiller ve Koşullar

Merhaba! Ben Fatih Soysal ve bu yazıda React uygulamalarınızda tıklama olaylarını nasıl yöneteceğinizi, stilleri koşullu olarak nasıl değiştireceğinizi ve koşullu render (şartlı oluşturma) tekniğini nasıl kullanacağınızı ayrıntılı olarak ele alacağız. React’in temel yapı taşlarını anlamak için bu konular oldukça önemlidir. Bu rehber, hem yeni başlayanlar hem de React ile daha önce çalışmış olanlar için faydalı bilgiler sunacaktır. İleri seviye konulara geçmeden önce, bu temel kavramları sağlam bir şekilde kavramanız önemlidir.

Tıklama Olaylarını Yönetmek

React’te tıklama olaylarını işlemek oldukça basittir. onClick özelliğini kullanarak bir fonksiyonu bir bileşenin tıklanmasına bağlayabiliriz. Örneğin, bir butona tıklandığında bir sayacı artıran bir bileşen şöyle yazılabilir:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

export default Counter;

Bu örnekte, useState hook’u ile bir sayac değişkeni tanımlıyoruz. onClick özelliği, butona tıklandığında setCount fonksiyonunu çağırıyor ve sayacı bir artırıyor. Sonuç olarak, sayacın güncellenmiş değeri ekranda gösteriliyor. Böylece, kullanıcı etkileşimlerini kolayca yakalayabiliyoruz.

Koşullu Stiller

React’te stilleri koşullu olarak değiştirmek için inline stilleri veya CSS-in-JS kütüphanelerini kullanabiliriz. Inline stiller, JSX içinde doğrudan stil nesneleri kullanarak uygulanır. Örneğin:

function ConditionalStyling() {
  const isRed = true;

  return (
    <div style={{ backgroundColor: isRed ? 'red' : 'blue' }}>
      Bu div'in rengi koşullu olarak değişiyor.
    </div>
  );
}

Bu örnekte, isRed değişkeninin değerine göre div’in arka plan rengi kırmızı veya mavi olarak değişiyor. Daha karmaşık stillerde ise Styled-Components veya Emotion gibi CSS-in-JS kütüphaneleri kullanmak daha düzenli bir kod yapısı sağlar. Bu kütüphaneleri kullanarak bileşenlerinizin stilini daha temiz ve yönetilebilir bir şekilde düzenleyebilirsiniz.

Koşullu Render (Şartlı Oluşturma)

Bazen bir bileşenin render edilmesini koşullu olarak kontrol etmek isteyebiliriz. Bunun için JavaScript’in koşullu ifadelerini (if, else) veya kısa devre değerlendirme operatörünü (&&) kullanabiliriz. Örneğin:

function ConditionalRendering() {
  const showMessage = true;

  return (
    <div>
      {showMessage && <p>Bu mesaj sadece showMessage true ise gösterilir.</p>}
    </div>
  );
}

Bu örnekte, showMessage değişkeni true ise paragraf elementi render edilir; aksi takdirde render edilmez. Bu, uygulamanızın belirli koşullara bağlı olarak farklı içerikler göstermesini sağlar ve performansı artırmaya yardımcı olur.

Sonuç

React’te tıklama olaylarını yönetmek, stilleri koşullu olarak değiştirmek ve koşullu render kullanmak, etkileşimli ve dinamik arayüzler oluşturmak için olmazsa olmaz becerilerdir. Bu yazıda ele aldığımız örnekler ve teknikler, React yolculuğunuza sağlam bir temel oluşturacaktır. Daha fazla bilgi ve örnek için fatihsoysal.com adresini ziyaret edebilirsiniz. Ayrıca, bu İngilizce kaynak da size yardımcı olabilir.

#Etiketler: React, tıklama, olaylar, stiller, koşullar, koşullu render, JSX, component, örnekler, rehber, useState, onClick