1.KURS
Yazılım Bilimi React youtube yayınlarından elde edilen notlardır. İlk kez alınan eğitim için hap niteliğinde olduğu için izleme ve not tutma gereği duydum 🙂 kanal sahibine anlatımı için çok teşekkürler..
Ders 1
ttps://nodejs.org/en/
adresinden node js stable sürüm indirldi ve kurulumu yapıldı.
cmd uygulaması yönetici olarak çalıştırıldı ve ekranda aşağıdaki komut çalıştırıldı
npm install -g create-react-app
vs code u açıyoruz
create-react-app reactApp
UYARI ALINIRSA
aynı ekranda terminalde
set-executionpolicy remotesigned => y denilir
tekrar create-react-app reactApp dediğimizde bu sefer oluşturdu
daha sonra cd reactapp diyerek uygulama klasörüne gidiyorum, son olarak da npm run start dediğimde uygulama localhost ta bize sunuluyor
ctlr c komutuna basınca da yayını durduruyor
react developer tools u chrome eklenti olarak ekliyoruz
redux tool unu eklemek istersek de
react dosyaları içerisinde görünümle ilgili bir değişiklik yapınca bu hemen yayında olan siteye yansır, örneğin aşağıdaki gibi MERHABA EROL yazıp ctrl s yapınca, sayfa hemen render edilir otomatik olarak ve değişiklik yansır
public dosyaları altında index.html dosyamız var, src dosyaları altında da asıl işleri yapan js dosyalarımız var.
sayfaya sağ tıklayıp baktığımızda, bir tane component(app) bir tane de ona bağlı prop lduğunu görüyprum.
app component te henüz prop gönderilmediği için boş.
control k+c yorum satırına alır
ders 6 ReactJS Eğitim Serisi 6 – React ve JSX
http://www.youtube.com/watch?v=_qxqKAR9ofM&list=RDCMUCZNZj3mkdCGJfCoKyl4bSYQ&index=6
jsx dosyası javasctript extension demekteidr. javasctipt içerisine html kod yazmayı sağlar. app.js dosyasındaki gibi.
her bir return altında sadece 1 component olabilir. burada mesela 1 tane div var sadece. 2.ci bir component yani örneğin input, p , pre, h1 gibi gibi birşey yazarsak </div> den sonra, hata alır uygulama.
ders 7 JSX Nedir
http://www.youtube.com/watch?v=8NkCNIoju4Y&list=RDCMUCZNZj3mkdCGJfCoKyl4bSYQ&index=7
jsx dosyası için js yazmak için süslü parantezleri kullanıyoruz
parantez içine aldığımızda js dosyası gibi davranıp hesaplamaları yapıyor
ders 8 İlk Component’i Oluşturma
http://www.youtube.com/watch?v=QZcZG6jesFY&list=RDCMUCZNZj3mkdCGJfCoKyl4bSYQ&index=23
componentlerimizi düzenli bir yerde durması için, src altına bir components klasörü açarız
vs code ta geliştirme yapılıryorsa aşağıdaki eklenti bizim için component vs oluşturmada kısa yollarla yardımcı olacak.
örneğin component oluşturma kısayılu için rcc yazıp tab a bastığımzda kod bloğunu kendisi ekleyecek default olarak
user.js e girip KISAYOL rcc tab yaptığımda beniö için defautl olarak oluşturdu
bu arada tab a basınca autocomplete yapmıyorsa, sol alt köşe settings tab cond yazılıp aşağıdaki seçim ON yapılır
ya da
preference => settings e girip json dosyası içine aşağıdaki kodu yapıştırmak gerekiyor autofill için
“editor.tabCompletion”: “on”,
“emmet.triggerExpansionOnTab”: true,
“emmet.syntaxProfiles”: { “javascript”: “jsx” },
“emmet.includeLanguages”: { “javascript”: “javascriptreact” }
devam diyoruz;
oluşturduğumuz user dosyamızı import ile app dosyamızda çağırırız
çağırma işlemini de sadece User componentimizi tag içine alarak yapıyoruz;
bu hali ile yapı dot netteki partialview e benzemektedir.
React Eğitim Serisi 9 – React CSS , Bootstrap
http://www.youtube.com/watch?v=ifzIyy6UDjQ&list=RDCMUCZNZj3mkdCGJfCoKyl4bSYQ&index=24
Inline css i de aşağıdaki gibi veriyoruz
<h4 style= {{color:”blue”,fontSize:”25px;”}}>Inline Css</h4>
css class ı import etmek için de, h4 tag ine jsx formatı olan className i ekleyip css class ına onu veriyoruz;
örneğin app.css içinde App-header class ı var.
App-header class ını h4 tagi içinde şu şekilde çağırıyorum;
css ekleme bu kadar, bootsrap ise;
bootsrap 4 ün cdn linkini index html e eklyioruz
BOOSTRAP İN JS DOSYALRINI da yine index in en alt sayfasına kopyalıyoruz
ReactJS Dersleri 10 – Functional Components
class base component ve functional component olmak üzere 2 componnet var.
oluşturduğumuz user.js class base componet idi
yenisini navbar.js olarak açıyoruz bu functional olacak;
bu şekilde navbar.js i oluşturuyoruz
APP.JS de de aşağıdaki gibi çağırıyoruz
bu fonksiyonel componenti rfc KISAYOL u ile de direkt olarak hazır oluşturabiliriz.
ReactJS Dersleri 11 – Propsların Kullanımı
http://www.youtube.com/watch?v=14M8Z-ui7jc
props lar bir componentten diğerine veri aktarımına yararlar
user.js i aşağıdaki gibi değiştiriyorum
app.js de de çağırıyorum;
dinamik olarak navbar.js i çağırdığım componetteki verilerin değişmesini istiyorsam aşağıdaki gibi değiştiriyorm
daha sonra da;
app.js de de aşağıdaki gibi çağırırsam yine o kaydın değişmesini sağlarım;
console ekranında da bu probla ilgili bilgiyi görebiliyrum artık
aynı işlemi class base component olan User.js de de denersek;
App.js de argümanalrın gönderiminde bir değişiklik yok
fakat user.js de
parametrelerin alımında şöyle bir değişklik var; objeleri alırken yine js notasyonu içinde süslü parantezlerle this.props…. diyerek alıyoruz
değişikli de bu şekilde yansıyor
ikinci user ı da eklersem
this.prop şeklinde çekmektense destructing yaparak
const {name, department , salary} = this.props; diyerek parametrelerle bu çekme işlemini yaparız.
React Dersleri 12 – PropTypes ve Default Props
http://www.youtube.com/watch?v=eSqjokUrOPg&list=RDCMUCZNZj3mkdCGJfCoKyl4bSYQ&index=8
proptypes larla göndeirlecek olan parametrelerin data tipini ve zorunlu olmadığı gibi verileri bildirebiliyoruz, buradaki fonksiyonel componenti çağırdığımız app.js de eğer parametreyi yani props değerini vermezsek de defaultprops tan alması gereken değerleri göndermiş oluruz.
PropTypes ı impt tab diyerek KISAYOL ile de dosyamıza ekleriz;
aynı işlemi user.js componenti içinde yapıyoruz;
React Dersleri 13 – User Arayüzü ve Font Awesome
http://www.youtube.com/watch?v=8ZxhVr2YFbY
ctrl k+f kodları ekranda daha düzenli hale getirir, vs de ctrl k+d idi
font için sitesinden çekiyoruz
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css” integrity=”sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==” crossorigin=”anonymous” referrerpolicy=”no-referrer” />
boostrapt 4 ve font awesome ile biraz daha güzel bir arayüz elde ettik
elementleri açarken örneğin div.card-header tab dediğiniz sizin için otomatik olarak div elementini card-header classname i ile birlikte açmakta.
React Dersleri 14 – State Nedir ve Statelerin Özellikleri
http://www.youtube.com/watch?v=Q5MtgP7DFio&list=RDCMUCZNZj3mkdCGJfCoKyl4bSYQ&index=9
state ler o componentin o anki durumunu simgeler.state o componentin üzerine tıklanmış mı, seçilmiş mi gibi şeyleri state objesi içinde barındırır.
virtual dom sadece değişen state in olduğu componenti görüyor ve sayfada sadece o ilgili componentin değişmesini sağlıyor, yani sayfanın tamamı yerine sadece değişen o componentin olduğu alan etkileniyor. Böylece yine sayfanın yüklenmesinde vs çok hızlı bir aksiyon alınmış oluyor.sadece state i değişen compoennt yeniden render ediliyor.
state deki değişiklikler probs lar yardımıyla diğer componentlere de göndrilebiliyor.
redux veya context api orta/büyük ölçekli uygulamalrda bu statelerin durumu daha çok kullanılıyor.
React Dersleri 15 – State Oluşturma
http://www.youtube.com/watch?v=9HuUDqqswqc&list=RDCMUCZNZj3mkdCGJfCoKyl4bSYQ&index=10
state ler component lerin en tepesinde kullanılır.2 yntemi vardır, ilki constructor içerisinde tanımlanıp kullanılabilir.
user componenti altında state i constructor methodu altında tanımlıyoruz, burada tanımladığımız test state ini de 39.cu satırdaki gibi jsx notasyonu ile çağırıyoruz. false olduğu için ilk değer maaş bilgileri vs gösterilmiyor gibi oldu.
Yeni yapı ile birlikte chrome daki eklentiden de görebileceğimiz üzere, user componentinin 3 adet prop u, 1 adet de state i vardır;
2. yöntem ise normal olarak tanımlanır;
React Dersleri 16 – React Eventler
http://www.youtube.com/watch?v=2B9FT_5_K0M&list=RDCMUCZNZj3mkdCGJfCoKyl4bSYQ&index=11
h4 tag imize bir event tanımladık, bu event in methodunu da render üzerinde olacak şekilde yazdık. argüman olarak da event ı ekledik, method içinde event.target vs diyerek verileri alabiliriz, this in çalışması için de OnclickedEvent sonrası bind(this) fonksiyonu eklenmeli. eklendiği taktirde h4 tag ine tıkladığımızda user componentine ait verilere erişebilir oluruz. diğer türlü this ile çağırdığımızda null bir değer dönecektir. kendi yazdığımız methodlarda bu şekilde kullanım sonrası this altındaki veriler erişebiliriz.
bind etme işlemini bu şekilde de yapabiliriz veyahut constructor altında da yapabiliriz;
3.cü olarak da arrow function lar var, arrow function lar otomatik olarak bind etme işini halletmektedir.
onClickedEvent = (event) => { console.log(this); } kodu bu şekilde belirtince de otomatik olarak bulunduğu component içinde alana erişebilir olacağız.
event den parametre göndermeyi de yine bind fonksiynu ile yapıyoruz, ilk parametre yine this olmalı, ondan sonra istenilen paramtreler gönderilebilir.
alıcı tarafta ise önce alınacak olan parametreler belirtiilir, en son event a ait paramtre alınır gösterilir. örnekte de h4 tag ine yazılan event ve onclick sonrası 34 değerini okumuş oluyoruz;
React Dersleri 17 – State Değiştirme – setState
http://www.youtube.com/watch?v=zCUMRU0whZA&list=RDCMUCZNZj3mkdCGJfCoKyl4bSYQ&index=12
event ler yardımıyla state lerin durumunu değiştireceğiz. bir yukarıda state lerle ilgili ön çalışma yapılmıştı.
state lerin değerleri setstate methodu ile değiştirilmekte, aşağıdaki örnekte, isvisible state inin durumu her onclick te değil ini almak suretiyle false ise true, true ise false ı alacak şekilde değişmektedir.
örneğimizde de 47.ci satırda isVisible true ise alt kısmı görünür olsun şeklinde bir kod yapısı var.
kısaca user defined bir toggle yapmış olduk.
React Dersleri 18 – Componentlar Arası İletişim (Props Drilling)
http://www.youtube.com/watch?v=L6sKlQvLSdk&list=RDCMUCZNZj3mkdCGJfCoKyl4bSYQ&index=13
app.js altında biz bu user componeti verileri statik olarak yazıyorduk. Şimdi bu verileri state lerden göndereceğiz.
State’ler sadece class component’da kullanılabiliyor olduğundan, Function yapısında olan APP.JS i, class component’e çeviriyoruz, rcc tab daki gibi yani.
Daha sonra çok da önerilmeyen bir yöntem ile state içindeki verileri birer propsmuş gibi başak bir component içine göndereceğiz. Örneğin User.js şeklinde bir componentimiz vardı, Users.js diye bir component daha oluşturup app.js teki state te yer alan verileri props gibi göndereceğiz;
ilk önce aşağıdaki gibi state olarak users json datasını oluşturuyoruz, daha sonra onu Users componente gönderiyoruz, Users componente datayı gönderirken users olarak belirledik parametreyi
dolayıısyla users componentinde destruct ederken de users olarak alıyoruz verileri.
daha sonra da map fonksiyonu ile bilrikte verileri user componentine gönderiyoruz, bu şekilde ekranımızda componetler tekrar listelenmiş oluoyr. map fonksiyonu ile de Users componenti içinde birden fazla User componenti göndermiş olacağız. Böylece alt alta listeleme olacak.
User componentine bu şekilde bir de KEY probu vermemizin nedeni, bizden bunu zorunlu olarak istemesidir, çünkü bu componentlerle ilgili işlem yapmak istediğinde virtual dom da buna göre hareket edecektir..
React Dersleri 19 – State Yönetimi Neden Önemli (Redux ve Context Api )
http://www.youtube.com/watch?v=VnqU4g5Xo3I
state yönetimi;
sadece 1 componentin kendi içinde kullanılabilen state (IsVisible gibi)
birden fazla component içierisinde kullanılabilecek olan state ler (User componenti gibi)
birden fazla state olması durumunda bunu prop drilling ile yönetemiyoruz, karışıklıktan dolayı, o yüzden ya react içinde default gelen context API ile bu state leri yöneteceğiz ya da REDUX ile yöneteceğiz.
Bunlar sayesinde de stateleri component içerisine değil de REDUX için konuşacak olursak store içinde, context api de ise PROVIDER içinde bu state leri tutacağız.
soldaki resimde state adım adım taşınırken en alttaki componentlere, sağdaki resimde her yerden direkt olarak erişilebilir olacak.
context api orta ölçekli uygulamalarda ,redux büyük ölçekli uygulamalarda, prop drilling ise küçük ölçekli uygulamalarda daha çok kullanımı uygun.
React Dersleri 20 – Context API – Provider ve Consumer Oluşturma
http://www.youtube.com/watch?v=F6QHZWn2kpE&list=RDCMUCZNZj3mkdCGJfCoKyl4bSYQ&index=14
ilk olarak src klasörü altına context.js isminde bir component oluşturuyoruz. context.js için de 2 yapı kullanılacak, biri provider 2.cisi ise provider tarafından gönderilen verileri tükecek olan consumer.
uygulama içinde kullancağımız bir tane context oluşturuyoruz; örneğin UserContext olacak bu senaryomuz için;
https://tr.reactjs.org/docs/context.html
https://dev.to/evertoont/introduction-to-react-context-how-to-use-it-simply-38jk
props.children otomatik olarak prop ları gönderiyor.
app.js de tanımlanmış olan state ini context imizin içerisine tanımlıyoruz;
burdaki kod bloğunu context imiz altında render üstünde yine tanımlıoyoruz;
context.js dosyasında ilk olarak context imizi oluşturduk, sonra export edilecek olan sınıfın adını UserProvider olarak değiştirdik.
app.js den aldığımız state verisini buraya kopyaladık.
daha sonra UserContext için provider tag i açıp, value olarak göndermek istediğimiz state i gönderdik.
tag ler arasına ise userprovider altında app i döneceğimiz için children birimleri ekelndi.
en alt kısımda ise consumer da oluşturuldu ve bu consumer defaul olarak dönülecek olan değer olarak kaydedildi.
React Dersleri 21 – Context Api – Provider ve Consumer Kullanımı
http://www.youtube.com/watch?v=2nTCnGNNOO8
app.js’de de aşağıdaki değişiklikleri yapıyoruz;
index.js de aşağıdaki gibi sarmallama işlemini gerçekleştiriyoruz;
sarmallama işlemini de gerçekleştirdik sonra;
context provider ve altındaki veriler görülüyor
Şimdi kısaca bu context api için ne yaptık o adımları tekrar yazalım;
- src dizini altına context.js dosyayı oluşturuldu
- context js altındaki veriler rcc tab ile oluşturuldu ve class ismi UserProvider olarak değiştiirldi, export class kalmaya devam edecek, consumer ı da oluşturduk ve export default olarak belirledik.
- app.js de Users componenti tag ini yalınlaştırdık ve sadece o component gelsin dedik.
- index.js altında App componentini sarmallıyoruz, context altında oluşturduğumuz Userprovider tag leri arasına alıyoruz
- son olarak da users.js de return de UserConsumer ı yakalayıp gönderilen value değeirini user componenti için map de dönüyoruz;
böylece context api deki provider ve consumer ı kullanmış oluyoruz;
React Dersleri 22 – Action, Reducer ve Dispatch Kavramları
http://www.youtube.com/watch?v=WAve3MupvIo&list=RDCMUCZNZj3mkdCGJfCoKyl4bSYQ&index=15
Action; Context api de, provider componentinin içinde hangi işlemin gerçekleşeceğini ve hangi verilerin gönderileceğini belirten js objesidir. 2 türlü property barındırır;
- type : hangi işlemin yapılacağını
- payload: hangi verinin gönderileceğini
type de örneğin addUser(), deleteUser() şeklinde hangi işlemlerin yapıalcağını belirtebiliriz. state teki verileri de değiştirmek isteyebiliriz, buradaki verileri de payload ta gönderilen değerlerle değiştiririz.
Dispatch; Action ları context e göndermekle görevli js fonksiyonudur, provider state i içerisinde bulunur
Reducer; dispatch ile gönderilen action tipine göre state i değiştirecek işlemlerden sorumlu js fonksiyonudur.
React Dersleri 23 – Action, Reducer ve Dispatch Kullanımı
http://www.youtube.com/watch?v=9OYkjp7iWos
silme ekleme gibi işlemleri dispatch ile yapacağız, state imize ekliyoruz. alt componentlerden gelen action ile setState çalıştırılacak.
dispatch altında state in değişmesi için oluştrduğumuz EAreducer fonksiyonunu aşağıda action objesinde çağırıyoruz;
EAreducer ile güncellenmemiş state verisini göndereceğiz,
UserContext.Provider ın value suna da state i gönderiyorduk zaten, böylece veri akışı sağlanmış oldu.
spread operatörü (…state) kullanıldığı yerde bir önceki halin veirlerini çağırmış olur. aşaüıdaki örnekte a değeri artık 10 değil 14 olmuş olur
kendi reducer fonksionumuzda ise aynı yapıyı aşağıdaki gibi kullanabiliriz, aciton type ı DELETE_USER şeklinde göndriyorum, return dönüş tipinde ise spread operatörü ile aldığım verilerden action type da etkilene componentin id si eşitse dğeiştirip göndriyoruz.
dispatc ile reducer fonksiyonlarımız tanımlandı, son olarak action için user componenti içerisine giidyoruz;
action =>
import UserConsumer from ‘../context’; /* dispatch i kullanmak için consumer ı çağırıyoruz */ ile consumerı kullanmak için seçmiş oluyoruz;
daha sonra return altında ilk olarak bu consumerın class ını çağırıp value su içeriisnde dispatch verisini alıyoruz, asıl dönecek olan componet yapısı içinde silme işlemini gerçekleştireceğimiz tag içinde onclick event ine ondeleteuser şeklinde bir fonksiyon yazacağımızı söylüyoruz, bind işleminde de yine ilk olarak, this, sonra da göndermek istediğimiz parametreyi yazıyoruz.
son olarak da ondeleteuser altında propslardan id leri alıyorum ve dispatch işleminde type veriyorum, ve de user id sini gönderiyorum. context.js altında bu id üzerinden işlemi yaptıracağız.
ve son olarak da USERS.js componenti altında USER compoennetini çağırırken props olarak id nin de olması gerekiyor.
npm run build, npm run start deyip kontrol ediyoruz;
silmiş olduk, böylece dispatch action ve reducer ı kullanmış olduk.
ne yapmış olduk,
silme işlemi için kullanılan fonksiyınu dispatch içinde action a bağlı oluşturduk,dispatch i de state altında tanımladık, verisini de alt componentlere provider ın value su olarak gönderdik.
context.js de tanımladığımız yapıya göre de aslında yapmış olduğumuz, tıkladığımız componentin id si dışındakilerin listelenmesini sağlamak. yani 1,2,3 id leri var ve ben 3 tıkladıysam 1 ve 2 yi filtrele demiş oldum.
React Dersleri 24 – Kullanıcı Ekleme Formu
http://www.youtube.com/watch?v=2WRETD1x4ME
bu derste kullanıcı ekleme formu yapacağız, onun için de addUser.js componenti altında bu tanımları yapacağız.
src => component altında bunu ekliyoruz;
App.js de de import edip return altında çağırıyoruz.
html leri de oluşturuyoruz, name alanı gibi 2 veri giriş alanına da ihityacımız var
formumuzu oluşturduk
React Dersleri 25 – React Pose Animation
http://www.youtube.com/watch?v=ifK8msfNcwc
react pose kütüphanesi için aşağıdaki linkten https://popmotion.io/pose/learn/install/ npm komutunu alıp çalıştırıyoruz uygulamamızda
npm install react-pose komutu ile projemize kütüphaneyi alıyoruz.
şimdi pose kütüphanesini dahil ettikten sonra
https://popmotion.io/pose/learn/popmotion-get-started/ şuradaki yönergeleri de takip ederek, animasyonu kullanacağımız componente paketi ekliyoruz import ile.
daha sonra bir tane sanal tag oluşturuyoruz ve ona isim veriyoruz, burada biz bir div oluşturduk ve de visible hidden özelliklerinin ne olduğunu söyledik.
sonra da bir state oluşturduk bu component için, hide dediğimizde add user form u kapanacak, ve artık orada show form yazması için. destruct ile yine state içindeki visible versini çekiyoruz.
buraya kadar ki işlemleri daha önce de yapmıştık.
bu aşamada son olarak card ların animasyona dahil olması için sanal tag lerimiz arasına alıyoruz;
tag lerin arasına aldıktan sonra pose attr sinde js notasyonu ile hangi animasyonu alacağına karar verdiriyoruz.
React Dersleri 26 – Dinamik CSS
http://www.youtube.com/watch?v=DxVeNYf9XkM
user component lerinden birine tıkladığımızda onu seçtiğimizi anlayabilmek için dinamik bir css verme işlemi gerçekleştireceğiz.
style={isVisible ? { backgroundColor: “#4288ae” } : null}
React Dersleri 27 – Controlled Components
http://www.youtube.com/watch?v=itxYiLEEN64
adduser componenti içineki state e name,department ve salary isminde props lar ekleyeceğiz. daha önce zaten isVisibile: true props u vardı.
textbox lara verileri girince state in otomatik olarak dğeişmesi sağlanacak.
render ın hemen altında, destruct ile veirleri alıyorduk, buraya da name department ve salary i ekliyoruz. textbox ların value attr lerine de bu parametreleri js notasyonu ile veriyoruz.
react da input texttype , textarea ve select ler kontrollü componentler olarak gçeiyor. Bunların kullanılabilmesi için onchange eventlerinin olması gerkeiyor.
input lara onchagen eventleri verdikten sonra (changeInput()) render üzerinde fonksiyonlar yazılır ve setstate ile props lar değiştirilir.
chrome eklentisi ile add user componentini görüntüledikten sonra altındaki prop larda artık textbox lara girilen değerlere set olmaya başlar.
[event.target.name] bu js de dinamik olarak hangi input ta isek onun değerine set olmasını sağlar.
React Dersleri 28 – Kullanıcı Ekleme ve Context Api
http://www.youtube.com/watch?v=JNnflO4OoU4
form un onsubmit event inde çalışacak olan fonksiyonu yazıyoruz, render üstünde de bu fonksiyonunun içini yazacağız yine.
bu yeni user eklerken ek olarak unique id lere ihtiyacımız olacak, bunun için de bir kütüphane yükleyeceğiz
https://www.npmjs.com/package/uniqueid sitesinden çekiyoruz;
npm i uniqueid –save-dev
komutunu da vs code terminal de çalışıtırıyoruz..
adduser fonksiyonunu aşağıdaki gibi yazıyoruz, uniqid den bir örnek alıp o isimi bir fonksiyon gibi id nin karşısında çağırıyoruz.
şu anki hali ile formda oluşturulan user ı alabiliyoruz.
şimdi dispatch ile bunu eklettireceğiz. Consumer ı da kullanmamız gerekecek, context js de bunu eklettirebilmek için.
adduser.js te import UserConsumer from ‘../context’; bunu ekliyoruz
onsubmit te de bu dispatch i gönderiyorz adduser fonksiyonuna, bu adımdan sonra context altında, switch case te yöneteceğiz.
dispatch altındaki action ı, reducer a gönderirken, type da yine kontrol ediyoruz. spread ile users verilerini yine alıp array olarak dönecek şekilde, gelen action daki datayı da eklemiş olduk.
verileri giriyoruz
ve kaydet e bastığımızda eklemiş oldu.
form boşalmadığı için;
React Dersleri 29 – Life Cycle Methods – Yaşam Döngüsü Metodları
http://www.youtube.com/watch?v=mUCjCb0Z1nc
görsel sürüme göre güncellenebilirmiş…
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
en güncel dökümanlara ulaşmak için;
https://tr.reactjs.org/docs/react-component.html
React Dersleri 30 – Yaşam Döngüsü – Mounting
http://www.youtube.com/watch?v=x-96s_toMGI
yerleştirme aşamasında ilk, yapıcı metotları kullanırken ki logları inceliyoruz,
Test isminde bir component yani class daha oluşturuyoruz, bunu app.js de çağırıyouz ve render altında da bir test props u gönderecek şekilde yazıyoruz.
app.js de props u gönderdiğimizde test.js de yapıcı metotda super props tan sonra log olarak yazdırdığımızda props değerini görebiliriz.
tabi bunun için app js de aşağıdkai gibi çağırılması gerekiyor;
render methodu sayfaya mount edilirken, yani yerleştirilirken çalışmaktadır, constructor ise önce çalışmaktadır.
render altında sadece jsx formatında componentler olmalı, state değiştirme gibi şeyleri render altında yapılmamalı, sonsuz döngüye gireceğinden.. state çalışında render çalışıyor,render çalışınca tekrar state çalışacak gibi gibi.
render da sadece componentin yapısı dönmeli.
sonuç olarak bir class ın componentin ilk yapıcı metodu çalışıyor, daha sonra render fonksiyonu çalışıyor, daha sonra varsa componentDidMount çalışıyor ki sayfa yerleştikten hemen sonra burası çalışıyor. bu nokta da api isteklerini yaptırabiliyoruz. eğer tam bu esnada bir setstate çalışırsa, render fonksiyınumuz tekrar tetikleniyor ve sayfa yenileniyor.
React Dersleri 31 – Yaşam Döngüsü – Updating
http://www.youtube.com/watch?v=LMBe0hBN28s
yaşam döngüsü metotlarından componentDidUpdate in nasıl çalıştığına bakacağız.
sayfaya component mount edildi, sonra render çalıştı. fakat daha sonra tekrar bir state güncellemesi geldi. yukarıdaki örnekte state güncellendikten hemen sonra render ın tekrar çalıştığını söylemiştik.
o son render çalıştıktan hemen sonra da (ya da forceupdate çalıştıktan sonra) componentDidUpdate çalışıyor aslında.
buarada componentDidUpdate(prevProps, prevState) çalışırken aldığı parametrelere dikkat edersek, state veya prop verileri değişmeden hemen önceki hallerini de bize vermiş olduğunu görebiliriz.
aşağıdaki sayfada biraz daha genişlettikten sonra diagramı, ara katmanda bir method daha kullanıldığiını görüyoruz.
shouldComponentUpdate methodu eğer component te çağırılmazsa true dönüyor ve RENDER otomatik olarak tekrar çalışıyor. bu da şu anlama geliyor, eğer bu methodu çağırıp false döndürürsek RENDER ı tekrar çalıştırmadan devam edebiliriz.
shouldComponentUpdate i kullanınca görüldüğü gibi componentDidMount tan hemen sonra render değil bu sefer shouldComponentUpdate methodu çalışıyor. Araya girmiş oldu.
React Dersleri 32 – Yaşam Döngüsü – Unmounting
http://www.youtube.com/watch?v=YgsWlRh1RnI
componentWillUnmount methodu ise sayfadan bir component jkaldırıldığında çalışan bir fonskyiondur, aşağıda örneğin erol akgül ün olduğu vomponenti sil dediğimde hemeni ilk olarak burası çalışmış olacak. daha sonra component silme işlemini gerçekleştirecek. bu fonk altında örneğin kullanılan kaynakların kaldırılması işlemi yapılabilir, varsa cookie temizleme vs işlemlri yapılabilir.
React Dersleri 33 – Json Place Holder ve PostMan
http://www.youtube.com/watch?v=a1mwqFq5_qw
rest api’ye yapılacak işlemlerde post put delete http metotlarının kullanımını inceleyeceğiz.
testlerimizi json place holder da yapacağız.
https://jsonplaceholder.typicode.com/
https://jsonplaceholder.typicode.com/ buradaki url i kullanarak /posts dediğimizde tüm postları alıyoruz. aynı zamanda /post ve /put /delete işlemleri ile de diğer işlemleri yaptırabiliyoruz.
postman uygulamasında http req type ları ile yukarıdaki url leri kullanrak get post put işlemleri gerçekleştirildi.
React Dersleri 34 – Json Server Kullanımı
http://www.youtube.com/watch?v=TRnoE5MA3Gk
https://github.com/typicode/json-server
npm install -g json-server komutu ile vs code terminal de kurulumunu yapıyoruz ilk;
daha sonra src altında api ismminde bir klasör, ve altında da db.json isminde json dosyamızı atıyoruz.
context.js altında state içinde users json datası vardı, onu oradan kaldırıyoruz, sadece users : [], şeklinde bırakıyoruz,oradaki datayı da alıp db.json içine gömüyoruz.
db.json son hali;
context.js son hali;
veriyi hazırladıktan sonra
json-server --watch src/api/db.json komutu ile buradaki değişiklikleri göreceğiz. rest api nin çalıştığı
resource adresinde işlemleri nereden yapacağımız yazıyor.
src nin altından api/ klasörünü alıp reactapp in altına taşıyoruz; json-server komutunu tekrar çalıştrıyoruz.
json-server –watch src/api/db.json –port 3004 şeklinde yazarsak da json server ı url:3004/users şeklinde hizmet verecektir. her iki uygulama da aynı porttan yayın yapmasın.
hata alırsan npm run build, npm run start dedikten sonra size başka porttan yayın yapayım mı diye soracaktır, Y derseniz siteyi yeni bir porttan yayınlayacaktır.
React Dersleri 35 – Axios ve Get Request
http://www.youtube.com/watch?v=jD6lJ7HgYfg
https://axios-http.com/docs/post_example
json server a istekleri atarken axios kütüphanesini kullanacağız; normalde js te fetch ile bu işlemi gerçekleştirebiliyorduk;
npm install axios ile package.json a dahil ediyoruz;
context.js de import axios ile class a dahil ediyoruz;
sonra da render üzerinde componentDidMount altında
const response = await axios.get(“http://localhost:3000/users”); ile dataları bize dönmesini istiyoruz.
console a yazdırdığımızda da aşağıdaki görseldeki verileri de görebiliyoruz. şuana kadar sorun yok.
son oalrak setstate dediğimizde, state deki datalar güncellenmiş oluyor ve ekrana yansıyor
bu şekilde uyarı görürsek; cmd ekranında aağıdaki kod çalıştırılır
netstat -a -o -n
daha sonra 3000 portunun olduğu adresin PID si alınır
taskkill /F /PID PID_of_port
komutu ile kill edilir.
2.KURS
React JS + .NET Core Web API + Microsoft SQL | full stack app tutorial
https://www.youtube.com/watch?v=ON-Z1iD6Y-c
visual studio 2019, sql server,node js yüklendi.
sql server da department, employee tabloları açıldı ve veri atıldı.
vs 2019 da React_WithWebApi isminde ASP.NET Core WEB API projesini net 5.0 alt yapısında açıyoruz;
json paketini ekliyoruz api ye, json ın son sürümü 6.0 için dotnet 6.0 istiyor.
CORS ayarları: Cross-Origin Sharing hizmetini service methodunda çağırarak (addcors ile) çalışma zamanına ayarlıyoruz. Burada hangi originden gelirse gelsin,hangi methodtan gelirse gelsin, header ı ne olursa olsun gibi bir ayar yapmış olduk.
configure methdunda ise usecors ile yine yukarıdaki çağrıyı middleware tarafında doğruladık.
oradaki kodu aşağıdkai gibi yapmış olsaydık sadece o linkten gelen çağrıları güvenli bul demiş gibi olurduk.
app.UseCors(org=>org.WithOrigins("http://localhost:3001"));
ya da aşağıdaki gibi değiştirirsek o originden gelen sadece get ve post methodlarına cevap ver demiş olurduk.
app.UseCors()org=>org.WithOrigins("http://localhost:5000".WithMethods("GET","POST").AllowAnyHeader());
reference loop handling artık desteklenmediği için ignore ediliyor,
daha da genel açıklamasıyla, http://fabrikam.com/api/products endpoint ine yapılan isteklerde aynı kökteki url den gelen isteklere izin verirken, aşağıdaki görsele göre de (Burak Selim Şenyurt sitesinden alınma) isteğin yapıldığı adreslerde portun protokolün domainin sub domainin değişmesi durumunda api nin nasıl davranması gerektiğini söylüyoruz kısaca.
projeye mvc.newtonsoft paketini yükledikten sonra da JSON Serializer ı servise ekliyoruz.
12.dk
Employee ve Department modelleri oluşturuldu
appsettings.json dosyasına connectionstring tanımlanır;
data.sql paketi projeye eklenir.
system.data ve sqlclient namespace lerini import ettikten sonra;
yeni oluşturulan department controller da bir GET methodu yazıyoruz.
string query = @" Select DepartmentId,DepartmentName from dbo.Departments;";
DataTable dataTable = new DataTable();
string sqlDataSource = _configuration.GetConnectionString("ConDB");
SqlDataReader sqlDataReader;
using (SqlConnection con = new SqlConnection(sqlDataSource))
{
con.Open();
using (SqlCommand cmd =new SqlCommand(query,con))
{
sqlDataReader = cmd.ExecuteReader();
dataTable.Load(sqlDataReader);
sqlDataReader.Close();
con.Close();
}
}
return new JsonResult(dataTable);
POST işlemimiz
string query = @" INSERT INTO dbo.Departments VALUES (@DepartmentName);";
DataTable dataTable = new DataTable();
string sqlDataSource = _configuration.GetConnectionString("ConDB");
SqlDataReader sqlDataReader;
using (SqlConnection con = new SqlConnection(sqlDataSource))
{
con.Open();
using (SqlCommand cmd = new SqlCommand(query, con))
{
cmd.Parameters.AddWithValue("@DepartmentName",dep.DepartmentName);
sqlDataReader = cmd.ExecuteReader();
dataTable.Load(sqlDataReader);
sqlDataReader.Close();
con.Close();
}
}
return new JsonResult(dataTable);
Güncelleme işlemimiz PUT
string query = @" UPDATE dbo.Departments SET DepartmentName = @DepartmentName WHERE DepartmentId == @DepartmentId;";
DataTable dataTable = new DataTable();
string sqlDataSource = _configuration.GetConnectionString("ConDB");
SqlDataReader sqlDataReader;
using (SqlConnection con = new SqlConnection(sqlDataSource))
{
con.Open();
using (SqlCommand cmd = new SqlCommand(query, con))
{
cmd.Parameters.AddWithValue("@DepartmentId", dep.DepartmentId);
cmd.Parameters.AddWithValue("@DepartmentName", dep.DepartmentName);
sqlDataReader = cmd.ExecuteReader();
dataTable.Load(sqlDataReader);
sqlDataReader.Close();
con.Close();
}
}
return new JsonResult(dataTable);
son olarak da DELETE işlemimiz;
string query = @" DELETE FROM dbo.Departments WHERE DepartmentId == @DepartmentId;";
DataTable dataTable = new DataTable();
string sqlDataSource = _configuration.GetConnectionString("ConDB");
SqlDataReader sqlDataReader;
using (SqlConnection con = new SqlConnection(sqlDataSource))
{
con.Open();
using (SqlCommand cmd = new SqlCommand(query, con))
{
cmd.Parameters.AddWithValue("@DepartmentId", id);
sqlDataReader = cmd.ExecuteReader();
dataTable.Load(sqlDataReader);
sqlDataReader.Close();
con.Close();
}
}
return new JsonResult(dataTable);
POSTMAN üzerinde şimdi htpp methodları üzerinden işlemlerimizi test ediyoruz;
GET işlem sonucu;
POST işlemi;
Güncelleme işlemi, PUT
silme işlemi;
DELETE methodunda endpoint sonunda parametreyi belirtmedik, aşağıdaki gibi değiiklik ypaıyoruz;
postman işlem sonucu
Aynı işlemleri employee için de yapıyoruz; controller ve method ların eklenmesi ve de postman de testleri..
25.dk
{ } Veritabanı & Yazılım Geliştirme 