Kayıtlar

HOC - Higher Order Componenets - HOC

Resim
Higher Order Componenets Tekrar bileşenleri(componenet) kullanmak için geliştirilmiş bir tekniktir. React'in bilimsel doğasından çıkar. HOC, argüman olarak bileşenleri(componenets) alan ve yeni bir bileşen(componenet) döndüren bir fonksiyondur. Bir bileşen parçaları kullanıcı arayüzüne dönüştürürken, bir HOC bileşenleri başka bir bileşene dönüşütürür. Birden fazla bileşenimiz için eğer aynı fonksiyonları paylaşıyorlarsa kodumuzu tekrar etmemek amacıyla HOC kullanabiliriz.  React sisteminin içerisinde de HOC lar kullanılır React Router'dan withRouter ve Redux'dan connect . Kullanım şekline örnek olarak, projede bir fonksiyonel bileşenimiz var ve burada <div></div> ve <main>{props.children}</main> şeklinde iki ayrı bölüm göndereceğiz. React bu durumda hemen hata verecek. Bu 2 sini aynı zamanda başka bir JSX ile sarmamı isteyecek. hepsini bir <div> içerisine de sarabiliriz. Ya da HOC oluşturarak tüm bileşenimizi bu bileş...
Yorum Gönder
Devamı

React - Projeye yeni bir font ekle

Resim
Yeni bir font eklemek İstediğimiz ve varsayılan olarak yüklü olmayan bir font eklemek istediğimizde projemize yapmamız gereken: Index.html  <link> tagleri içerisinde <head></head> bölümüne ekleriz. Google fontlarından bir font seçelim buradan seçebiliriz. İstediğimiz fontun üzerindeki artı işareti ile girerek istediğimiz özellikleri dahil ederiz oda bize projemize eklememiz için bir <link> oluşturur. Bu linki projemizin index.html dosyasına ekleyelim. 
Yorum Gönder
Devamı

React ile Google Maps Örnekleri

Resim
React-google-maps create-react-app <Proje_adı> src klasörünün altına components kalsörü oluşturalım. Components klasörünede Map.js dosyamızı oluşturalım. Burada bileşenimizi oluşturacağız. Oluşturduğumuz Map bileşenini App.js te gösterelim. Basit bir taslak hazırlayarak işe başlayalım. npm add react-google-maps Bu komut ile react-google-maps kütüphanesini yüklüyoruz.Yükleme tamamlandıktan sonra withGoogleMap ve GoogleMap HOC(higher order componenets) 'react-google-maps' kütüphanesinden getirerek Haritamızı oluşturalım. Daha sonra index.html dosyamızda google api anahtarımızı tanımlayacağımız bir script yazıyoruz.  withScriptjs ile kullanım index.html dosyasında <script> içerisinde api referansını göndermek yerin withScriptjs higher order componentını kullanabiliriz. 
Yorum Gönder
Devamı

Diziler, listeler ve map() fonksiyonu (Arrays, ListItems and map() )

Resim
map() fonksiyonu map() yöntemi ile dizinin(array) içerisindeki her bir objeyi çağırarak yeni bir array oluşturur.  Dizideki her bir element için fonksiyonu çalıştırır.  Orjinal diziyi değiştirmez.  Kullanım şeklini görmek için numerik bir dizi oluşturalım ve içerisindeki her bir numarayı iki katına çıkaralım.  Aynı zamanda burada ki değerleri componenta göndererek <li> <ul> li kullanarak gösterebiliriz.  Liste öğelerini gönderirken anahtar alanıda beraberinde göndermek gerekir. Kod çalışır ama f12 ile taracıyımızda incelediğimizde uyarı verdiğini görürüz. Bu uyarıyı düzeltmek için map() fonksiyonunda <li> de değerimizi gönderirken aynı zamanda anahtar bir alanda göndererek çözelim.  Anahtar(Key)  Anahtarlar React'ın hangi ögelerin değiştiğini,eklendiğini yada silindiğini anlamasına yardımcıdır. Dizilerin i...
Yorum Gönder
Devamı

Koşulllu olarak getirme

Resim
React ile ayrı bileşenler(component) oluşturarak duruma göre farklı yönlendirmeler yapabilirsiniz. Mesela kullanıcının giriş yapma durumuna göre göstereceğiniz ekranın değişmesi, isimlerde değişiklikler, farklı durumlara göre farklı mesajlar gönderme ve bunun gibi birçok koşula dayalı işlemleri düşünebiliriz. Kullanıcın giriş yapma duruma göre Giriş yap veya Çıkış yap olarak değişecek bir örnek yapalım. Buton için Fonksiyon tipinde bir component oluşturalım(buttonType) propslarla değerler gönderelim . buttonType componentı için props değeri message, onClickEvent ve btnText değerleri ile butonumuzu şekillendirelim. Class tipinde bir ana component oluşturalım Login işlemleri için Login component içerisinde state tanımlayalım.  State de isLoggedin değeri içerisinde true false gönderelim Başlangıç durumunda isLoggedin false yapalım Login olma durumuna göre propslara ilgili değerleri gönderelim. Butonu gönderelim. Şimdide kullanıcı giriş yapmışsa kaç tane mesajı oldu...
Yorum Gönder
Devamı

Olayları İşleme ( Handling Event in React) ve Bağlama ( Binding )

Resim
Handling Events React olayları isimlendirilirken camelCase duyarlılığı varıdır onClick gibi. Hem SetState hemde event leri kapsayan bir örnek yapalım. Bir butonumuz olsun. Butona basınca Aç Kapa işlemi yapsın..  Sayacımız olsun bu sayaçta butona kaç kere bastığımızın bilgisini tutsun ve ekrana getirsin.  class componentı oluşturalım.  constructor içerisinde this.state i tanımlayalım.  state için 2 alan; biri basılıp basılmadığı bilgisini tutsun, diğeri sayacımız return() kısmında bir button oluşturalım ve onClick eventine bir handler gönderelim.  Bu handler setState ile state durumunu true false olarak değiştirsin ve sayacımızı arttırsın Sayacı ekrana yazdıralım Binding ( Bağlamak ) JavaScriptte, class yöntemleri varsayılan olarak bağlı değildir. Bu yüzden eğer bir methodu çağırırken () kullanmadan çağırıyorsak (örnekte olduğu gibi onClick={this.handleClick...
Yorum Gönder
Devamı

LifeCycle Methods

componentWillMount() {    Henüz component ortalıklarda yok ama çağırmadan önce  Component ın default konfigurasyonlarını ayarlayabiliriz. Henüz DOM la ilgili herhangi birşey olmadığı için yapabileceğimiz pek birşey yok. Burada kurulumlar yapılabilir. Mesela Firebaseden SQL connection yapılacaksa. Başlangıç değerleri atanacaksa gibi. } componentDidMount() {    Artık componentımız burada ortaya çıkmış ve kullanıma hazır durumda.   Burada verileri yükleyebiliriz.   Basitçe burada isteidğiniz şekilde componenetla oynayabiliriz. setState i çağırabiliriz. Verileri doldurabiliriz. } componentWillReceiveProps(nextProps) {   Herşey yolunda gidiyordu aniden yeni propsların akışı componentı bozmaya başladı.   Componentımız yeni gelecek propslarla birşey yapmadan önce çağırılır.  Burada hem şimdiki propslara (this.props) hemde bir sonraki propslara (nextProps) erişimimiz vardır.  Burada çeşitli kontrollerle propsların değişip de...
Yorum Gönder
Devamı