ReactBlogResimler







Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Laravel & React 5

Resim
Bu bölümde applicationumuza react-reouter kütüphanesini ekleyip basit route işlemlerini ön tarafata yapacağız. npm install react-router-dom projeme dahil ediyorum. Bir başka terminal banch i açarak npm run watch komutunu çalıştıracağım. Bu komut bizim için ön tarafdaki değişiklikleri izleyecek ve bundle aktaracak.Bundle yığın anlamına geliyor için gerek js doslarım vs bulunuyor. WepPack bunları ihtiyaç haline göre derliyor. resource/js/app.js componentimi modifiye edeceğim. require ( './bootstrap' ); import React from 'react' ; import { render } from 'react-dom' ; import { Router , Route , browserHistory } from 'react-router' ; import Example from './components/Example' ; render ( < Example /> , document . getElementById ( 'example' )); Bu şekilde modifiye ettik. example id sine sahip html elementini Example componenti ile Dom edeceğim diyorum. Şimdi example componentimizi biraz daha düzenleyelim. ...
Devamı

React&Redux Firebase Authetication işlemleri React

Resim
Firebase oturumu oluşturun. Ardından Authentication seçeneğini seçin Oturum açma yöntemi olarak eposta ve şifre işlemlerini aktifleştirin. İşlemleri  https://github.com/abdullahsuhaisk/ReactReduxFirebaseBlogApp Reposundan da görebilirsiniz. Sırada İndex.js den. FireStore ve FirebaseRedux kütüphanelerini aktifleştirip firebase 'e auth u set etmemiz gerekiyor. İndex.js deki işlemlerim. Sırada Reducerimi oluştrurmak var.. RootReducerım firebase 'e artık bağlandı. Firebase den gelen durumlara state den ulaşabileceğim.Firebase' den neler geliyormuş. Log olarak bir bakalım... Benim Main componentim bu projede dashboard oradan bakacağım. State leri props a gönderip props'u ekranda gösterdik. Consolumuzda gelenler ; Görüldüğü üzere firebase 'in içinde auth olarak geldi. isLoaded:false ve isEmpty:true herhangibi bir oturum açmadığını bize söylüyor. Şimdi firebase consoluma gidip bir tane test user 'i oluşturacağım. Ardından sitem...
Devamı

Auth Reducer ve Actions kullanımı Giriş yapmış kullanıcıya göre Header gösterme (Redux)

 Reactın en zevkli konusu Reducer ve Actions kavramlarıdır. Kısaca actions işlemlerin yapıldığı alan reducer ise bu işlemler sonunda verilerin tutulduğu alandır.     Not: Veri tabanına kayıt işlemi yapmak istersek actions kullanılır. Reducer da tarayıcıda gösterilecek veriler tutulur. İlk olarak Type yazılır. Bu type actionda işleme tutulur. İşleme tutulan type da değişiklik olursa Reducer tarafından yakalanır. Ve değişiklikler state ye set edilir. export const FETCH_USER = 'fetch_user' ; actions/types dizini altına yazdım. Şimdi action/index e actions 'umuzu yazacağız. export const fetchUser = () => async dispatch => { const res = await axios . get ( '/api/current_user' ); dispatch ({ type: FETCH_USER , payload:res . data }); } /api/current_user dan sisteme girişi yapmış kullanıcıyı alıyorum app . get ( '/api/current_user' , ( req , res ) => { res . send ( req . user ); //user services/pa...
Devamı