React ile interaktif bir sayaç uygulaması geliştirmek oldukça basittir. Bu uygulamada bir sayacı artırmak, azaltmak ve sıfırlamak için temel React kavramları olan state ve event handling kullanılacak.

1. React Projesi Oluşturma

Öncelikle bir React projesi oluşturduğunuzu varsayıyoruz. Eğer yaratmadıysanız, aşağıdaki komut ile yeni bir proje başlatabilirsiniz:

npx create-react-app sayac-uygulamasi
cd sayac-uygulamasi
npm start

2. Sayac Bileşeni Oluşturma

Sayacı fonksiyonel bir bileşen olarak oluşturacağız. useState hook'u ile sayacı tutacağız ve üç buton ile sayaç değerini artırma, azaltma ve sıfırlama işlemlerini gerçekleştireceğiz.

import React, { useState } from 'react';

const Sayac = () => {
  const [sayac, setSayac] = useState(0);

  const artis = () => {
    setSayac(sayac + 1);
  };

  const azalis = () => {
    setSayac(sayac - 1);
  };

  const sifirla = () => {
    setSayac(0);
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Sayaç: {sayac}</h1>
      <button onClick={azalis} style={{ margin: '5px' }}>Azalt</button>
      <button onClick={sifirla} style={{ margin: '5px' }}>Sıfırla</button>
      <button onClick={artis} style={{ margin: '5px' }}>Arttır</button>
    </div>
  );
};

export default Sayac;

3. Sayac Bileşenini Kullanmak

Şimdi App.js dosyasına gidip oluşturduğumuz Sayac bileşenini içe aktaralım ve render edelim.

import React from 'react';
import Sayac from './Sayac';

function App() {
  return (
    <div className="App">
      <Sayac />
    </div>
  );
}

export default App;

4. Uygulamanın Çalışması

Uygulamayı başlattığınızda ortada sayaç değeri görünür. "Arttır" düğmesi sayacı 1 artırırken, "Azalt" düğmesi 1 azaltır. "Sıfırla" ise sayaç değerini sıfırlamaya yarar. Bu sayede React’ın temel state yönetimini gözlemlemiş olursunuz.

Özet

• useState: Sayacın mevcut değerini ve güncelleme fonksiyonunu tutar.
• Event Handlerlar: Butonlara tıklanınca sayacın değerini değiştirir.
• Bileşen Kullanımı: Sayacı başka bileşenlerde kullanmak için modüler bir yapı sağlanır.

Bu örnek, React içerisinde temel bir etkileşim oluşturmak için güzel bir başlangıçtır. Daha ileri projelerde, bu yapıyı genişleterek daha karmaşık state yönetimi ve kullanıcı etkileşimleri yapılabilir.