5 State

ReactJS Ders 5 | State

State Nedir?

State, bir bileşenin içindeki durumu (state) tutmak ve yönetmek için kullanılan bir kavramdır. Durum, bileşenin değişken verilerini temsil eder ve bileşenin UI’sini güncellemek için kullanılır.

State Kullanımı:

import React, { useState } from 'react';

const ToggleButton = () => {
  const [isOn, setIsOn] = useState(false);

  const toggle = () => {
    setIsOn(prevState => !prevState);
  };

  return (
    <div>
      <h2>Toggle Button</h2>
      <button onClick={toggle}>{isOn ? 'Kapat' : 'Aç'}</button>
      <p>Durum: {isOn ? 'Açık' : 'Kapalı'}</p>
    </div>
  );
}

export default ToggleButton;

Bu örnekte, ToggleButton adında bir işlevsel bileşen oluşturduk. useState kancasını kullanarak isOn adında bir durum değişkeni ve setIsOn adında bir durum güncelleme fonksiyonu tanımladık. İlk değeri false olarak ayarladık.

toggle adında bir fonksiyon oluşturduk. Bu fonksiyon, her tıklamada setIsOn fonksiyonunu kullanarak isOn durumunu tersine çevirir.

Bileşen, state değişkenini kullanarak bir başlık, açma/kapatma düğmesini ve durumu gösteren bir paragrafı içeren bir UI döndürür.

Bileşeni kullanmak için başka bir bileşende (örneğin, App bileşeninde) ToggleButton bileşenini kullanabilirsiniz:

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

const App = () => {
  return (
    <div>
      <h1>React Uygulaması</h1>
      <ToggleButton />
    </div>
  );
}

export default App;

Bu örnekte, App adında bir işlevsel bileşen oluşturduk ve ToggleButton bileşenini içine ekledik. App bileşeni, bir başlık ve ToggleButton bileşenini içeren bir UI döndürür.

Durum, bileşenlerin dinamik ve etkileşimli olmasını sağlar. Bu sayede bileşenler, kullanıcı etkileşimlerine yanıt verebilir ve UI’yi güncelleyebilir.

Bir de class component örneği verelim:

import React from 'react';

class ToggleButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOn: false
    };
  }

  toggle = () => {
    this.setState(prevState => ({
      isOn: !prevState.isOn
    }));
  };

  render() {
    const { isOn } = this.state;

    return (
      <div>
        <h2>Toggle Button</h2>
        <button onClick={this.toggle}>{isOn ? 'Kapat' : 'Aç'}</button>
        <p>Durum: {isOn ? 'Açık' : 'Kapalı'}</p>
      </div>
    );
  }
}

export default ToggleButton;

Bu örnekte, ToggleButton adında bir sınıf bileşeni oluşturduk. this.state nesnesini kullanarak isOn adında bir state değişkeni tanımladık ve başlangıç değerini false olarak ayarladık.

toggle adında bir fonksiyon oluşturduk. Bu fonksiyon, this.setState yöntemini kullanarak isOn durumunu tersine çevirir.

render yöntemi, bileşenin UI’sini döndürür. Durum değişkenini kullanarak bir başlık, açma/kapatma düğmesini ve durumu gösteren bir paragrafı içeren bir UI oluşturulur.

Bileşeni kullanmak için başka bir bileşende (örneğin, App bileşeninde) ToggleButton bileşenini kullanabilirsiniz:

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

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>React Uygulaması</h1>
        <ToggleButton />
      </div>
    );
  }
}

export default App;
İletişim: admin@herseymi.com
Yazı oluşturuldu 110

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Benzer yazılar

Aramak istediğinizi üstte yazmaya başlayın ve aramak için enter tuşuna basın. İptal için ESC tuşuna basın.

Üste dön