React — PropTypes ve Default Props

Bu yazımda sizlere react proptypes ve default propslardan bahsedeceğim. Konuya başlamadan önce biraz props’tan bahsedip asıl anlatmak istediğim proptypes’a geçiş yapacağım.Daha fazla uzatmadan props nedir ? sorusuna cevap verelim ve bir örnekle bunu gösterelim.

Props(Properties)

Props ; componentler arasında veri göndermemizi sağlayan yapıdır. Değişmeyecek(sabit) veriler için kullanılır. Yapı nedir ? Örnekle gösterelim ve asıl meseleye gelelim.

App.js

Örnek olarak bir Book.js componenti hazırlanmış ve title , author , year ve pages propsları gönderilmiştir.

Book Componentinin Class ve Function Component Olarak Gösterimi

Propsların kullanımını hatırlattıktan sonra PropTypes ve Default Props konusuna başlayabiliriz.

PropTypes ve Default Props

prop-types paketi create-react-app kurulumu ile beraber otomatik olarak gelir ve import PropTypes from “prop-types” şeklinde componentlere dahil edilir. Peki şimdi de bu paketi neden kullanırız ? sorusuna cevap verelim.

Componentler arasında veri gönderirken kullandığımız propsların belirli bir değişken tipinde olmasını istediğimizde bu paket bize bu kontrolü sağlıyor. Örneklerle gösterip detaylandıralım.

Book Componenti PropTypes Kullanımı

Örnekten de anlaşılacağı üzere title prop’unun string tipinde ve isRequired diyerek bu component için title prop’unun gerekli olduğunu belirtmiş oluyoruz.

Kullanabilen diğer propTypes değerleri : array, bool, func, number, object, string, symbol ; kullanılabilen propTypes fonksiyonları ise instanceOf, oneOf, oneOfType, arrayOf, objectOf, shape, exact gibi fonksiyonlardır.

Default props ; eğer bir props için bir değer gelmezse önceden belirlenen değerler o props’ların gelmediği değerlerinin yerine yazılır.Bu default props sayesinde olur. Hem propTypes hem de default props örneklerini bir arada kullanarak konuyu detaylandıralım.

Navbar Componenti

Eğer Navbar componentinde title değeri gelmez ise oraya default olarak verilen “default props” değeri yazılır.

Greet Componenti

Eğer firstName ve lastName değerleri gelmez ise daha önceden belirlenen “John” ve “Doe” değerleri yazılır.

prop-types paketini daha detaylı incelemek isteyenler şu kaynaktan yararlanabilir.

Böylelikle bir yazının daha sonuna geldik. Öğrendiğimiz tüm yeni bilgileri geliştirme süreçlerimize dahil edebilmenin umuduyla bir sonraki yazıda görüşmek üzere :)

Öğrenmek ve öğretmek için takipte kalın..