Nedir Bu Props ?

Props’lar değiştirilemezler sadece okunurlar (read-only), componentler arasında veri transferi için kullanırız.

Component Nedir ?

Kısaca açıklamak gerekirse arayüzü şekillendiren sınıflar (class) ve fonksiyonlardır.

Props için örnek güzel bir akış şeması.

React Props

Elimizide iki adet Js uzantılı dosyamız var bunlardan birisi App.js diğeri User.js

App.js

import React from "react";
import "./App.css";

import User from "./components/User"; 

function App() {
  return (
    <>
      <User
        name="Öztürk"
        surname="Şirin"
        isLoggedIn={true}
        age={21}
      />
    </>
  );
}
export default App;

Öncelikle ilk baştan açıklamaya başlıyalım kütüphaneleri import ediyoruz ve User.js componentimizi de burada import ediyoruz.

Daha sonra App fonksiyonumuzun içerisine user.js props için değerlerimizi veriyoruz. Burada String, Boolean, Number, Object ve Array olarak tanımlamalar da yapabiliyoruz en basit haliyle sizlere bir örnek yapmak istedim.

Number ve Boolean tanımlamalarını süslü parantezler içerisinde yapmamız gerekiyor.

User.js

import React from "react";

function User(props) {
  const { name, surname, isLoggedIn, age} = props;

return (
    <>
      <h2>
        {isLoggedIn
          ? ` Name: ${name} and Surname: ${surname}, age: (${age})`
          : "you are not logged in!"}
      </h2>
    </>
  );
}

export default User;

Gelelim User.js componentimize, burada fonksiyonumuz başlatır iken parantezler arasınaparametre olarak props veriyoruz. Daha sonra rahat bir kullanım olması açısından alt satırda gelen değerleri const olarak tanımlıyoruz.

ve bunun ekran çıktısını backtickler arasında ekrana yazdırıyoruz buradaki kullanım Javascript kullanımıdır.

Ekran çıktısı bu şekilde olacaktır.

Result

import React from "react";

function User({name, surname, isLoggedIn, age}) {

return (
    <>
      <h2>
        {isLoggedIn
          ? ` Name: ${name} and Surname: ${surname}, age: (${age})`
          : "you are not logged in!"}
      </h2>
    </>
  );
}

export default User;

Const olarak tanımlamak istemez isek parametre olarak direkt verebilir aynı şekilde burada’da doğru bir kullanım vardır.

Herkese iyi çalışmalar.