Computer Engineer

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...

 Axios en kısa tabiriyle front-end tarafından kendi Api mızdan yada başka bir Restful api dan veri çekmemize yarar.  Şimdi  https://rallycoding.herokuapp.com/api/music_albums adresinden veri çekelim.  https://jsonplaceholder.typicode.com/ sizde burada çekebilirsiniz. Buradan title, artist ve image propertilerini çekeceğim boostrap ile güzel bir card section yapıp burada göstereceğim.  React projenizi setup ettiğinizi düşünüyorum.   Yeni bir component oluşturur iken class base component oluşturmamız gerekiyor. Çünkü componentDidMounth methodu ile render methodumuzdan önce verilerimizi getireceğiz. Life cycle methodlarıda method base componentlerde kullanılmaz. npm i axios komutu ile projemin olduğu dizine axios kütüphanesini de dahil ediyorum. Componentimi şimdilik yazımı bu şekilde. Clasik boostrap card kullandım. Ben projeme boostrap css kullandım. Nasıl Kullanacağı blogun içinde mevcutbakabilirsiniz. Şimdi bu componentimin...

  HighOrderComponent nedir ? Aslında buna bir componentin başka bir componenti sarması da diyebiliriz. Örnek yapalım. Bir component yazalım ve bu component Contact komponentini sarmalasın. Contact komponentini saran componentimin adı rainbow olsun. Bu rainbow componentinde Boostrap classlarını kullanarak en üst div oluşturup renklendirme yapalım. asdasd Rainbow komponentim parametre olarak bir komponent alır. Daha sonra renk dizim var. Bu dizideki elemanların boostrapdan gelen renk classları 6 eleman içinden rastgele bir tanesini seçiyorum. Ve bu sectiğimi <div className="text-primary"> örneğinde olacağı gibi biçimlendiriyorum. Method base komponentimi return methoda gelen komponent parametremin props unu alır. Ve en üste yeni bir renk classı atar. Daha sonra düşük sıralı komponentim çağırılır ve parametre olarak gelen props un bir kopyası set edilir. Artık bu Rainbow komponentim ile sarmalan her bir komponent değişen renklere sahip olur. Burada bir com...

import React , { Component } from 'react' ; import TodoApp from './educate/Todo/TodoApp' ; class App extends Component { render () { return ( < div className = "container" > < header className = "App-header" > < h1 className = "App-title" > Welcome to React </ h1 > </ header > < p className = "App-intro" > To get started, edit < code > src/App.js </ code > and save to reload. </ p > < TodoApp /> </ div > ); } } export default App ; aaa import React , { Component } from 'react' ; import Todos from "./Todos" ; import AddTodo from './addTodo' class TodoApp extends Component { state = { todos : [ { id : 1 , container : 'Finish React Tutorial' }, { id : 2 , container : 'Start React with Firebase' }, { id : 3 , container : 'React wit NodeJs and ...

React ' boostrap ekleme ; < link rel = " stylesheet " href = " https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css " integrity = " sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4 " crossorigin = " anonymous " > Bu linki geçen derste oluşturduğumuz. index.html sayfasına yapıştırıyoruz. head ın içine gelecek şekilde <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Suha </ title > < meta content = "width=device-width, initial-scale=1" name = "viewport" /> < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin = "anonymous" > </ head > ...