React.js’de Etkileşimli Döngü Nasıl Oluşturulur?

React.js’de etkileşimli döngü, kullanıcının bir işlem yapması veya sayfadaki bir değişiklik olduğunda sayfadaki görüntünün güncellenmesi anlamına gelir. Bunu yapmak için, React.js’deki componentler state ve props özelliklerini kullanır.

State, componentteki verilerin dinamik olarak değişebileceği ve componentin re-render edilmesine neden olabilecek verileri içeren bir javascript nesnesidir. Props ise componentin diğer componentler tarafından verilen değerlerdir.

Etkileşimli döngü oluşturmak için, componentte bir olay gerçekleştiğinde state’in güncellenmesi gerekir. Bu olay, örneğin, bir butona tıklama, bir formun gönderilmesi gibi bir işlemdir. Bu olayın gerçekleşmesi, componentteki bir fonksiyonu çağırarak state’i güncelleyebilirsiniz. Güncellenen state, componentin re-render edilmesine neden olacak ve sayfadaki görüntü de güncellenecektir.

Aşağıdaki örnek, React.js’de bir butona tıklama olayı sonrası state’in güncellenmesini ve componentin re-render edilmesini gösterir:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}