React&Redux&Firebase Cv Sayfası yapma

 Bu ders için react projenizi kurmuş , Firebase config ayarlarını yapmış olmanız gerekmektedir. Bu gereklilikleri yapmadıysanız blogun önceki konularına bakabilirsiniz.

Template olarak : https://themes.3rdwavemedia.com/bootstrap-templates/resume/free-bootstrap4-resume-cv-template-for-developers-pillar/

Bunu kullandım ve bunu reacta göre componentlere ayırdım. Kendi blog sayfamda Cv kısmı olarak kullanmaya karar verdim. Cv kısmını yazacak css bilgim olmadığı için hazır kullandım.

MainCv componentimin görünümü :



Datalarımın bulunduğu fireStore documenim. 
  Ne yaptım ? Cv componentimin fireStore ile personelInfo collectionuma bağladım. componentlerime yollayacağım bilgileri doc olarak isimlendirdim.


 Sayfanın görünüşünde de görebileceğiniz üzere careerSummery ayrı bir component. Componentlerime data iletimini nasıl yapıyorum. fireStoreconnect ile componentimi firestore 'personelInfo ' collectionuma bağladığımda  state olarak firestore.data.personelInfo olarak geldi. İçinden carrier doc unu çıkartım ve props olarak cvSummeriazecarrier componentine ilettim.


  cvSummeriazecarrier componentimde carrier olarak gelen datayı karşıladım. Reactta componentlerin render edilme süreçleri var. Mesala render edildiğinde ilk olarak component geliyor. Ardında firestore bağlanıp stateden veri geliyor. Sonra bu gelen veri dom değişiklikliğe sebebiyet veriyor. React elindeki objelere bakıyor değişiklik olduğunu seziyor ve dom işlemlerine başlıyor. Kısaca bir componente props gönderdiğimde öncelikle gelen propsumun null olacağını hesaplamam ardından objenin dolacağını ve render edileceğini belirtmem gerekiyor. Burada da o işlemleri yaptım.

 Bu şekilde bütün componentleri doldurup devam edebilirim. CvHeader içinde gerekli işlemleri yapalım...

Bu işlemleri yapabilmek için algoritmam :
1.Cv componentinde personelInfo yu bağlamıştık.(header için gerekli veriler infoda), MapStatetoProps un içinde, PersonelInfoda infoyu çek
2. çekmiş olduğun infoyu yeni bir değişkene ata
3.Cv componentimdeki props dan infoyu yakala
4.infoyu Cvheader componentine yolla
5.Cvheader componentinden gelen propsdan infoyu yakala
6.Yakalanış olduğun infoyu null değerine ve dolu gelecek şekilde render et.








İşlemleri tamamladığımızda header componentide veri tabanı ile çalışır hale geldi. Peki yöntem böylemi olmalı. Her bir component için teker teker bu işlemlerimi yapmalıyım ?

Bunu düşünürkün şöyle bir yöntem daha geliştirilebilir. Action yazılır. Action firestore bağlanır reducer tetikler reducerın statelerinde de datalarımızın geleceği alanlar olur. Daha sonra direk state kullanılabilir. 
import { firestoreConnect } from 'react-redux-firebase';
kütüphanesi olmasa aslında direk yapılması gereken işlem bu ama bunu kütüphane bizim yerimize yapıyor.



Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Laravel & React 1

Resim
    Bu seride back-end tarafında php Laravel kullanan Front-End tarafın da ise React kullanan bir uygulama geliştireceğiz.   Öncelikle php kullanabilmemiz için yani php kodlarını local bilgisayarımızın derleyebilmesi için php server kurmamız gerekiyor. Bunun için Xamp kullanabiliriz. Xamp Adresi:  https://www.apachefriends.org/tr/download_success.html  JavaScript tarafında bu işlemi Node Js ile yapıyorduk. Burada Xamp İle yapacağız. Xampı kurarken kurduğunuz diskte anadizini seçmeyi unutmayın.  Daha sonra composer yüklememiz gerekiyor. Bu paket yükleyicisi tıpkı bizim JavaScripte kullandığımızı npm(node packed manager) gibi. Composer yüklemek için : https://getcomposer.org/download/ Composer 'ı kurarken kurulum yaptığınız yerin xampın içindeki php olmasına dikkat edin. Composer'i kurduktan sonra artık Command Line 'ımıza Composer komutları yazabileceğiz. Şimdi cmd imizi açalım ve bilgisayarımıza global Laravel 'i yükleyelim. Komutlarım : ...
Devamı

React ile Kişisel Blog Sayfası Oluşturma 1

Yapılacaklar : React kurulum ve Router işlemleri , Materialize.css kütüphanesi ve Header Componentinin tasarlanması. Blog adında bir klasör oluşturun içine Server  klasörü ve : npm create-react-app Client komutlarını yazın.  Server klasörümüzde back - end tarafımız olacak. Client  te ise front-end bölümleri olacak. Component oluşturup bu komponentleri react-router-dom kullanarak app de çağırma işlemi yapacağız. Src nin içine Component klasörü oluşturun. Ve component klasörün içine şimdilik şu 3 tane componentleri oluşturdum.  src/component/Header.js import React , { Component } from 'react' ; class Header extends Component { render (){ return ( < div > Header </ div > ) } } export default Header ; src/component/Landing.js import React , { Component } from 'react' ; class Landing extends Component { render () { return ( < div > AnaSayfa diyelim mi bea </ div > ) } ...
Devamı

Github' a proje atma (Visual Studio Code ile)

Resim
Öncelikle bir github hesanızın olması ve giriş yapmış olmanız gerekmekte. Giriş yaptıktan sonra Sol taraftan New seçilir.  Repository name Hangi isim ile tutulacağıdır. Description ise açıklama alanı create repository Dediğimizde yeni bir repository alanı oluşur. Açılan Açılan bu sayfada ki böülüm hangi yol haritasını izlememiz gerektiğini bize söyler; …or create a new repository on the command line echo "# PersonelBlogWithReactAndExpress" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/abdullahsuhaisk/PersonelBlogWithReactAndExpress.git git push -u origin master commend line kısmına sırası ile şu adımlar izlenir: Benim kullanı git init => projemize .git adında dosya kurar yapılan değişiklikler düzenlenmeleri vs kaydeder. git add . => Canta gibi düşünüyorum ben bunu yapılan değişikliklerimi çantama ekliyorum. git commit -m "Commite isim ver" => Daha...
Devamı