Blog

React ile State yönetimi konusuyla beraberiz. React ile state yönetimi konusundan sonra React ile ilgili yazılarımıza devam edeceğiz.

Önceki yazılarda, React’te bileşenleri ve kullanıcı girişi uygulaması örneği üzerinden bileşenlerin nasıl kullanılacağını incelemiştik. Bu yazıda ise React’te state yönetimini ve sayaç uygulaması örneği üzerinden state’in nasıl kullanılacağını inceleyeceğiz.

State Nedir?

State, bir bileşenin iç durumunu saklamak için kullanılır. Bileşenler, state’i değiştirerek arayüzlerini güncelleyebilirler.

Sayaç Uygulaması:

Bu yazıda, bir sayacı artırma ve azaltma işlemleri yapabilen bir sayaç uygulaması oluşturacağız.

Adım 1: State Tanımlama

App.js dosyasına aşağıdaki kodları ekleyerek count adında bir state değişkeni tanımlayın:

JavaScript

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

  // ...

  return (
    // ...
  );
}

Adım 2: State Güncelleme

App.js dosyasına aşağıdaki kodları ekleyerek sayacı artırma ve azaltma fonksiyonlarını yazın:

JavaScript

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

  const incrementCount = () => {
    setCount(count + 1);
  };

  const decrementCount = () => {
    setCount(count - 1);
  };

  // ...

  return (
    // ...
  );
}

Adım 3: State’i Kullanma

App.js dosyasına aşağıdaki kodları ekleyerek sayacı arayüzde gösterin:

JavaScript

function App() {
  // ...

  return (
    <div>
      <h1>Sayaç: {count}</h1>
      <button onClick={incrementCount}>Arttır</button>
      <button onClick={decrementCount}>Azalt</button>
    </div>
  );
}

Uygulamayı Çalıştırma:

1. Terminalde yarn start komutunu çalıştırın.
2. Tarayıcınızda http://localhost:3000 adresini açın.
3. “Sayaç: 0” metnini göreceksiniz.
4. “Arttır” butonuna tıklayarak sayacı artırabilirsiniz.
5. “Azalt” butonuna tıklayarak sayacı azaltabilirsiniz.

State Yönetimi Teknikleri:

• useState: Basit state yönetimi için kullanılır.
• useReducer: Karmaşık state yönetimi için kullanılır.
• Redux: Büyük ölçekli uygulamalarda state yönetimi için kullanılır.

Sonuç:

Bu yazıda, React’te state yönetimini ve sayaç uygulaması örneği üzerinden state’in nasıl kullanılacağını inceledik. State’in temel prensiplerini ve React’te state kullanmanın avantajlarını öğrendik.

Serinin Devamı:

Bu blog yazı serisinde, React’in temel ve ileri düzey özelliklerini detaylı bir şekilde inceleyeceğiz.

Ek Kaynaklar:

• React Resmi Dokümantasyonu

Bu blog yazı serisinde, React’ın temel özelliklerini ve kullanımını detaylı bir şekilde inceleyeceğiz. Takipte kalın!

Not: Bu yazı sadece basit bir örnektir. Gerçek bir blog uygulaması için daha fazla özellik ve işlev eklemeniz gerekir.

Takipte kalarak React ile uygulama geliştirmenin keyfini çıkarabilirsiniz!