React Props ve State

Merhabalar, React kullanıcı arayüzü geliştirmemiz için kullanılan bir JavaScript kütüphanesidir bunu dire React’ın kendi web sayfasında bulabilirsiniz. React’ı kullanabilmemiz için en basit olan props ve state mantığını anlayarak devam etmeliyiz, çünkü bunlar yapı taşları denebilir.

Props React’da bir component’den gönderilen bir değişkendir. Bir Bileşen(Component) tanımladığınızda bunun içerisinde değişken gönderebilirsiniz. Props’lar ile fonksiyonlara da erişebiliriz en basit props kullanımını aşağıda görebilirsiniz. Title adında bir component oluşturuyorum ve içerisine header atıyorum daha sonra oluşturduğum component içinde isim gönderip bu ismi props olarak alıp gösteriyorum.

App.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <Title name="Ebubekir"/>
      </div>
    );
  }
}

Title.js

const title =(props)=>{
    return(
        <div>
            <h1>{props.name}</h1>
        </div>
    )
}

State mantığı ise, Componentler tarafından değiştirilebilen veya direk olarak kendiniz ataya bileceğiniz değerleri tutan bir değişken olarak tanımlanabilir. Props’lar ile state’i değiştirebiliriz veya props olarak state içerisindeki değeri gönderebiliriz. Aşağıdaki kodda yukarıda yaptığımın aynısını state olarak atayacağım daha sonra bu state’i yukarıdaki props mantığı ile ekrana göndereceğim.

App.js

class App extends Component {
  state={
    name:"Ebubekir Sezer"
  }
  render() {
    return (
      <div className="App">
        <Title name={this.state.name}/>
      </div>
    );
  }
}

Soru ve görüşlerinizi mail veya yorum olarak belirtirseniz sevinirim.