React JS Notları

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&#8221; 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.

should­Component­Update 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&#8221;); 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