React&Redux Firebase Kategorilere Göre Blogları Listeleme

FireStore 'de hazırlamış olduğumuz blogda navbardaki kategorilere göre aynı kategori isminin taşıyan blog sayfalarının gösterilmesini yapacağız.
Navbar kategoriler görünümü


Kod görünümü

category adında collectionum var. Bu collectionda ki documanlarda sadece kategori adı yazıyor. Ayrı bir blog collectionuumda var documanlarda property olarak category var.

ilk iş olarak navbarımda ki kategorilerin veri tabanından gelmesini,
ardından seçilen kategorinin blog col. category proppertisi ile eşleşip sayfamda render edilmesini istiyorum.

Componentimi compose ile firestorem' e bağlayıp category collectionuna ulaşacağım.


gerekli kütüphaneleri import ettim

firestore bağlanıp vermi dizi şeklinde category adıyla props olarak set ettim

Proplarımı karşıladım

Propslarımın ekran görüntüsü. Bu ana kadar herşey tamam.

Şimdi sırada category props umu map ile açıp show etmem var.



Başarılı bir şekilde category parçaladık.

Secilen kategoriye göre blog yazılarını getirme var. Bir kaç farklı şekilde yapılabilir. Linkten parametre okuyarak yapalım. Başka bir yöntem de props olarak set edip component çağırmada olabilirdi.

Categorydeki içeriklerin listeleneceği component

App.js den route sini 

CategoryList componentimde yapmam gerekenler. FireStore da yazılarımın olduğu collectiona bağlanacağım. Bunu state den props a yollayacağım. MapstateToProps fonksiyonumda ownProps parametresi ile route parametrelerimden id yi çekeceğim bu id yi blogs collectionumda category id si bu olanlar şekilde çıkartacağım.


Componentimi bağladım

Statem 'de Bloglarım geldi
Propsda is match.params.id ile id me erişebileceğim.


Firestore bağlanıp blog collectionumdan verilerimi aldım daha sonra documentimde categoryıd si ıd me eşit olanlar ile yeni bir array oluşturdum. Bu arrayyimide componetimde parçaladım.


Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

React JS Yazalım 1

Resim
Parent componentini Child1 ve Child2 componenti ile güncelleyelim. Reactda state güncelleme işlemi yapacağız. Parent componentim name ve password alanlarımdan oluşuyor. Name inputum child1 componentimde. Password inputum ise  child2 componentimde. Yavru komponentlerimin state tutmadan direk ata komponentimi güncellemelerini istiyorum bunun içinde iki tane yöntem ile yapabilirim 1. yöntem parent komponentimde child komponentimi çağırırken props olarak parent komponentimin methodunu child komponentime göndermem. 2. yöntem ise üst scope da method tanımlayıp bunu child komponentimde ulaşmak. import React , { Component } from " react " ; class Child1 extends Component { render () { this . state = { name : "" } return ( < div > < label > Name: </ label > < br /> < input type = " text " placeholder = " Name " onChange = { e => this . prop...
Devamı

Heroku deploy

Resim
   Heroku da github, bitbucked gibi kodlarınızı depolayabileceğiniz external git servisi, herokunun bir diğer güzelliği ise kodlarını derleyebilirsiniz.   Kodlarınızı derleyebilmeniz için bir kaç işlem yapmanız gerekli, benim derleme yapacağım kodlarım. NodeJs kullanarak yazılmış arka taraf ile ReactJs kullanılarak yazılmış öntaraftan oluşan fakat her iki sisteminde aynı yerde kullanılmasından dolayı tek taraflı bir derleme işlemi diyebiliriz.   Kısaca sistemi anlatmak gerekir ise NodeJs ve React kullanarak Blog sitesi kuruyorum. Amacım daha önce öğrendiklerii pekiştirmek öğrendiklerime yenilerini katmak ve güzel bir boilerplate hazırlamak. Sistemimin dizin yapısı Blog/Server/Client Server main klasörüm içinde NodeJs yani back-end tarafım var. Serverın içinde ise Client var. Yani token tutmama gerek kalmıyor. İlk olarak Server ın içinde ki packpage.json na aşağıdaki kodları ekliyorum "engines" : { "node" : "8.1.1" , "npm" ...
Devamı

Laravel & React 4

Resim
Bu bölümde axios ile api ya ulaşıp http istekleri yapacağız. Yeni bir component oluşturup. Constructarda bir initial state tanımlayıp componentwillMount yaşam döngüsü ile state mizi dolduracağız. D:\WorkSpace\Tutorals\Laravel\react-lara> npm install axios --save Komutu ile öncelikle projemize axios kütüphanesini dahil ediyoruz. Ardından yeni bir component oluşturuyoruz. Constructor methodumda initState yi tanımlıyorum. constructor (){ super (); this .state = { blog :[] } console . log ( super ()); } ardından Componentwillmount ile apimıza istek atacağız. Bu method hem server hemde client oluşturulmadan önce çalıştırılır. ComponentDidMount ise ilk çalışmanın ardından sunucu tarafından çalıştırılır. componentWillMount () { axios . get ( '/api/blog' ). then ( response => { this . setState ({ blog : response .data }) }). catch ( err => { ...
Devamı