React.js State ve Props Kavramları

React.js, web uygulamaları oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. State ve props, React uygulamalarında veri yönetimi ve bileşenler arası iletişimde temel rol oynayan kavramlardır.

State:

State, bir bileşenin içindeki verinin durumu veya mevcut durumu temsil eder. State, bir bileşenin özel veri alanıdır ve bu veri, bileşenin render edilmesini etkileyen şeydir. Bileşenin iç durumunu değiştirmek için setState() yöntemi kullanılır. State, sadece sınıf bileşenlerinde tanımlanır. Fonksiyonel bileşenlerde ise React Hooks (useState) kullanılarak state yönetilir.

Örnek bir state kullanımı:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default Counter;

Props:

Props (properties), bir bileşene dışarıdan veri geçirmek için kullanılır. Props, bileşenin dışarıdan alması gereken verileri içerir ve bu veriler bileşenin içinde değiştirilemez (immutable)dir. Props, bir bileşenin render edilmesini etkileyen verilerdir. Props, üst düzey bileşenlerden alt bileşenlere veri aktarımını sağlar.

Örnek bir props kullanımı:

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

Kullanım:

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

function App() {
  return (
    <div>
      <Welcome name="John" />
      <Welcome name="Jane" />
    </div>
  );
}

export default App;

Yukarıdaki örnekte, Welcome bileşenine name prop’u geçirilir ve bu prop, bileşenin içinde kullanılır. Böylece Welcome bileşeni dışarıdan gelen ismi kullanarak mesajını oluşturur.

Share on Facebook

Tweet