ReactJS Ders 4 | Props

Props Nedir?

Props (properties), React bileşenlerine dışarıdan veri aktarımını sağlayan bir mekanizmadır. Bu sayede bileşenler arasında veri paylaşımı ve iletişim mümkün olur. Props, bileşenin yapılandırılmasında kullanılan verileri temsil eder.

Props Kullanımı:

Props, bir bileşene veri aktarımını sağlamak için kullanılır. Bu veriler, bileşene özellikler (properties) olarak geçirilir ve bileşen içinde kullanılabilir.

İşlevsel Bileşen Örneği:

import React from 'react';

const UserInfo = (props) => {
  return (
    <div>
      <h2>Kullanıcı Bilgileri</h2>
      <p>Ad: {props.name}</p>
      <p>Email: {props.email}</p>
    </div>
  );
}

export default UserInfo;

Bu örnekte, UserInfo adında bir işlevsel bileşen oluşturduk. name ve email özelliklerini props olarak alır ve bu özellikleri kullanarak kullanıcı bilgilerini gösteren bir UI döndürür.

Sınıf Bileşeni Örneği:

import React from 'react';

class Product extends React.Component {
  render() {
    return (
      <div>
        <h2>Ürün Bilgileri</h2>
        <p>Ürün Adı: {this.props.name}</p>
        <p>Fiyat: {this.props.price}</p>
      </div>
    );
  }
}

export default Product;

Bu örnekte, Product adında bir sınıf bileşeni oluşturduk. name ve price özelliklerini this.props üzerinden alır ve ürün bilgilerini gösteren bir UI döndürür.

Bileşenleri kullanırken, props aracılığıyla bileşene verileri aktarabilirsiniz. Bu veriler, bileşenin içinde kullanılarak UI’yi yapılandırır veya işlevselliği belirler.