ilk defa bir konuyu türkcelestirerek ve de bu kadar acik anlatani görüyorum, aslinda bu konuyu biliyordum ama ezberledigimi anladim videoyu izleyince, simdi ise gercekten yerli yerine oturdu. kesinlikle bütün videolarinizi izleyecegim, emeginize saglik
Bu konu ile ilgili en az 10 video izlemişimdir. Fakat şimdi anladım diyebiliyorum. setTimeOut ile ilgili düşüncenize katılıyorum. Tamamen kafa karıstırıcı. Keşke bu konuları anlatırken Callback' ide anlatsaydınız Umarım callbak nedir videonuz da gelir :) Sağolun
Hocam çok net bir şekilde, konuya açıklık getirmişsiniz, teşekkürler öncelikle. Fakat benim aklıma şöyle bir soru takıldı. Şimdi senkron(async olmayan) metotların içindeki işlemler sırayla, yani adım adım çalışır, sıradaki işlem bitmeden diğerine geçmez şeklinde. En azından ben öyle biliyorum. Asenkron metotlar(async) ise, içindeki işlemleri aynı anda çalıştırabilir, işlemlerin birbirlerini beklemesine gerek yok. Bu dediğim de bu şekildeyse asıl soruma geliyorum :) Madem asenkron metotların içindeki işlemler, birbirlerini beklemeden çalışabiliyor, neden metodun içindeki işleme await diyerek çalışan işlemin bitmesini bekliyoruz. Burada işlemin bitmesini bekliyorsak async kullanmamızın ne avantajı oluyor, bunun yerine senkron metotta kullanamaz mıyız. Cevaplarsanız çok sevinirim :)
Sync davranışı taklit etmek için. Eğer async işlem bir veri döndürüyorsa ve bir sonraki satırda o veriye ihtiyacınız varsa bekleyip sonraki satıra geçiyorsunuz.
Hocam javascriptte hangi konuya denk geliyor bilmiyorum ama veriGetir.then(cevap => console.log(cevap)) niye içerisine böyle arrow function gibi yazdınız. Düz console.log(cevap) yazsak cevap tanımlı olmadığı için hata alacaktık ama bu syntaxında mantığını anlamadım tam. Doğru mu emin değilim ama şöyle yorumladım bize bir değer dönüyor biz onu cevap değişkenine atıyoruz onuda kullanıyoruz arrow function içinde ama yardımcı olabilir misiniz?
Mantığı şu: Oraya girdiğiniz fonksiyona bir değer gönderilerek çalıştırılıyor. O değeri cevap değişkenine atıyorsunuz. Sonra onu console.log ile konsola yazdırıyorsunuz. Diğer bir yöntem ise .then(console.log) olarak yazılmasıdır. Mantık yine aynı, içeri girilen fonksiyon, size verilecek olan değer girilerek çağırılıyor.
JS single-threaded oldugundan dediginiz sey teknik olarak dogru degil. Su kaynaklara bakabilirsiniz: www.sohamkamani.com/blog/2016/03/14/wrapping-your-head-around-async-programming/ frontendmasters.com/courses/rethinking-async-js/single-threaded-javascript/#:~:text=In%20the%20context%20of%20programming,executed%20at%20any%20given%20time.
@@ReactDersleri Benim icin onemliydi hocam tesekkur ederim. Ikinci linki john snow gibi izledim :d Bende soyle bir link paylasayim baska merak eden olursa katkida bulunmus olayim : dev.to/steelvoltage/if-javascript-is-single-threaded-how-is-it-asynchronous-56gd
Merhabalar hocam. Izninizle bir sorum olacak. API den axios ile aldigim veriyi nasil state'e baslangic state olarak verebilirim. Sorunum verinin ilk gelen hali undefined olarak tanimlandigi icin useState icerisinde verdigim baslangic degeri, o state ile islem yapan diger statelere context api ile baslangic olarak undefined degeri gonderiliyor. useEffect ile bu stateleri tekrar set etmeye calisiyorum ve isler karmasiklasiyor. Tesekkur ederim simdiden.
API baglantisi bir yan etki (side effect) oldugundan oradan gelen veri baslangicta elinizde degil. Bu yuzden state parcaniz undefined olarak basliyor. Bunun onune gecmek icin, eger veriniz dizi olarak geliyorsa state baslangicini bos bir dizi olarak ayarlayabilirsiniz bu sayede .map() kullandiginiz yerde hata almazsiniz. Diger bir alternatif ise state parcanizi dummy data ile baslatmak. Veri gelir gelmez dummy data ile yer degistirir.
@React Dersleri Hocam yanitiniz icin tesekkur ederim. Bos array ile baslattigim durumda, bu state parcasini initial olarak alan diger state parcalarini handle etmem gerekiyor. Burada takildigim bir kisim var. Bir butona tiklandiginda, bir setState fonksiyonu ve bu state'in degeriyle islem yapan ikinci bir fonksiyon calisiyor. Bu noktada setState fonksiyonu async calistigi icin (bu kisimdan cok emin degilim. Kendi yaptigim testler sonucunda, butona sadece ilk tiklanildiginda yasanan bir durum) state'in yeni degerini set edemeden state ile islem yapan ikinci fonksiyon calisiyor ve sonuc olarak yanlis state degeriyle islem yapiyor. Yapmaya calistigim sey ise api'den gelen post listesinin bir kismini ikinci bir state'e atip bunu sayfa yuklenince yayinlamak. Butona her basildiginda, kac kere basildigini bir state parcaciginda tutmak boylece sayfalar arasi dolasinca veya ilk state degisince kaldigi sayfadan okumaya devam edebilme. Kendimce cozmeye calistim ancak bir cozum uretemedim hocam. Mantigimda bir yanlis var mi? Aydinlatirsaniz cok sevinirim. Simdiden tesekkur ederim. Kod kismi: imgur.com/a/9zaFvME
Hocam turk dilinde variable lari ve name leri vermeniz kesinlikle yalnish.Dunya diline uyqunlashkmak zorundayiz kafa karishdirmaya iytiyac yok.Azerbaycandan sevgiler sayqilar
Hocamızın .then içindeki yapısını await ile yaptıktan sonra olası hatalar için catch içindeki hata yakalama olayını da try catch bloğu yapısını kullanarak yakalayabilirsiniz arkadaşlar try içinde awaitli kod statementi catch içinde error statementi olacak şekilde.
Hocam javascripte this anahtar kelimesi ve bunu react'ın tavsiye ettiği bind ile kullanımı üzerine de bir video yapma imkanınız olur mu arrow function lar yerine neden bind i tavsiye ediyor. bazı videolara bakıyorum arrow function ile değil özellikle bind ile yazıyorlar. this ve bind biraz kafa karıştırıcı. js ne kadar sade ve esnek olsa da bu konuda cidden baş döndürüyor
Hooklardan once boyle bir video guzel olabilirdi ama kanalda class component ile hicbir sey yapmiyoruz. Yoksa gizli gizli class component mi kullaniyorsunuz? 🧐
@@ReactDersleri Bu farkı bilmiyordum hocam öğrenme aşamasındayım. Tekrar tekrar eğitimlere bakıyorum da arada kacırdığım detay var mı diye bir tutorialda özellikle this ve bind i tavsiye etmişlerdi. yani fonksiyonel bileşenlerde this ve bind olayını kullanmayacağımızı bilmiyordum. Eğer öyleyse bu güzel oldu ileriye dönük bir göz korkum vardı :D
ilk defa bir konuyu türkcelestirerek ve de bu kadar acik anlatani görüyorum, aslinda bu konuyu biliyordum ama ezberledigimi anladim videoyu izleyince, simdi ise gercekten yerli yerine oturdu. kesinlikle bütün videolarinizi izleyecegim, emeginize saglik
Off harika anlatım. Elleriniz dert görmesin ya. 🎉🎉
Gerçek bir işlem üzerinden harika bir sadelikte anlatmışsınız, ağzınıza sağlık
Karmaşık gibi görünen konuyu gerçek projelerde kullanılabilir şekilde sade ve anlaşılır bir tarzda anlatmışsınız, çok faydalı oldu. Teşekkürler...
Harika bir ögretmensiniz, soru isaretlerinin cogu giderildi.
Değerli hocam çok karmaşık gibi görünen konuları bu kadar basit ve anlaşılır anlattığınız için çok teşekkürler. Saygılarımı sunarım.
Teşekkür hocam , karmaşık bir konuyu yine sadelikle anlaşılır bir şekilde anlatmışsınız.Emeğinize sağlık ...
bu hocayi yeni kesf etdim mukemmel supersiniz hocam (Azerbaycandan yaziyorum)
Başarılı anlatımınız için teşekkürler hocam umarım kanalınız daha büyük kitlelere hitap eder.
Video harika aciklanmis her zaman ki gibi, tesekkurler hocam.
Bu konu ile ilgili en az 10 video izlemişimdir. Fakat şimdi anladım diyebiliyorum. setTimeOut ile ilgili düşüncenize katılıyorum. Tamamen kafa karıstırıcı. Keşke bu konuları anlatırken Callback' ide anlatsaydınız Umarım callbak nedir videonuz da gelir :) Sağolun
emekleriniz için çok teşekkür ederim hocam .
Muhteşemsiniz hocam 👍
Video için teşekkürler,
Çok güzel bir seri olmuş
Hocam anlatımınız efsane.
Dayı sen çok sevdim ya... :)))
Eyvallah 😀
bilmek var birde bildigini anlatabilmek var! Sizin videolarinizi ve anlatim tarzinizi takdir ediyorum!
Terrrtemiz bir anlatım hocam teşekkürler o7 yeni ders videoları gelecek mi?
Xocam azerbaycan selamlar. Bir dersde javascript ve react nasıl çalışıyor diye bir video çekseniz super olurdu))
console.log'u vs-code'da nasıl çalıştırıyoruz?
👍
Hocam çok net bir şekilde, konuya açıklık getirmişsiniz, teşekkürler öncelikle. Fakat benim aklıma şöyle bir soru takıldı.
Şimdi senkron(async olmayan) metotların içindeki işlemler sırayla, yani adım adım çalışır, sıradaki işlem bitmeden diğerine geçmez şeklinde. En azından ben öyle biliyorum.
Asenkron metotlar(async) ise, içindeki işlemleri aynı anda çalıştırabilir, işlemlerin birbirlerini beklemesine gerek yok. Bu dediğim de bu şekildeyse asıl soruma geliyorum :)
Madem asenkron metotların içindeki işlemler, birbirlerini beklemeden çalışabiliyor, neden metodun içindeki işleme await diyerek çalışan işlemin bitmesini bekliyoruz. Burada işlemin bitmesini bekliyorsak async kullanmamızın ne avantajı oluyor, bunun yerine senkron metotta kullanamaz mıyız. Cevaplarsanız çok sevinirim :)
Sync davranışı taklit etmek için. Eğer async işlem bir veri döndürüyorsa ve bir sonraki satırda o veriye ihtiyacınız varsa bekleyip sonraki satıra geçiyorsunuz.
Aşağıdaki konsolda kodumu çalıştırmam için hangi eklentileri yüklemem gerekiyor?
Node.js yüklü olması yeterli.
Hocam javascriptte hangi konuya denk geliyor bilmiyorum ama veriGetir.then(cevap => console.log(cevap)) niye içerisine böyle arrow function gibi yazdınız. Düz console.log(cevap) yazsak cevap tanımlı olmadığı için hata alacaktık ama bu syntaxında mantığını anlamadım tam. Doğru mu emin değilim ama şöyle yorumladım bize bir değer dönüyor biz onu cevap değişkenine atıyoruz onuda kullanıyoruz arrow function içinde ama yardımcı olabilir misiniz?
Mantığı şu: Oraya girdiğiniz fonksiyona bir değer gönderilerek çalıştırılıyor. O değeri cevap değişkenine atıyorsunuz. Sonra onu console.log ile konsola yazdırıyorsunuz. Diğer bir yöntem ise .then(console.log) olarak yazılmasıdır. Mantık yine aynı, içeri girilen fonksiyon, size verilecek olan değer girilerek çağırılıyor.
yanlis anlamadiysam promise ve await/async yeni bir thread olusturuyor. tesekkur ederim
JS single-threaded oldugundan dediginiz sey teknik olarak dogru degil. Su kaynaklara bakabilirsiniz:
www.sohamkamani.com/blog/2016/03/14/wrapping-your-head-around-async-programming/
frontendmasters.com/courses/rethinking-async-js/single-threaded-javascript/#:~:text=In%20the%20context%20of%20programming,executed%20at%20any%20given%20time.
@@ReactDersleri Benim icin onemliydi hocam tesekkur ederim. Ikinci linki john snow gibi izledim :d
Bende soyle bir link paylasayim baska merak eden olursa katkida bulunmus olayim : dev.to/steelvoltage/if-javascript-is-single-threaded-how-is-it-asynchronous-56gd
Merhabalar hocam. Izninizle bir sorum olacak. API den axios ile aldigim veriyi nasil state'e baslangic state olarak verebilirim.
Sorunum verinin ilk gelen hali undefined olarak tanimlandigi icin useState icerisinde verdigim baslangic degeri, o state ile islem yapan diger statelere context api ile baslangic olarak undefined degeri gonderiliyor. useEffect ile bu stateleri tekrar set etmeye calisiyorum ve isler karmasiklasiyor.
Tesekkur ederim simdiden.
API baglantisi bir yan etki (side effect) oldugundan oradan gelen veri baslangicta elinizde degil. Bu yuzden state parcaniz undefined olarak basliyor. Bunun onune gecmek icin, eger veriniz dizi olarak geliyorsa state baslangicini bos bir dizi olarak ayarlayabilirsiniz bu sayede .map() kullandiginiz yerde hata almazsiniz. Diger bir alternatif ise state parcanizi dummy data ile baslatmak. Veri gelir gelmez dummy data ile yer degistirir.
@React Dersleri Hocam yanitiniz icin tesekkur ederim. Bos array ile baslattigim durumda, bu state parcasini initial olarak alan diger state parcalarini handle etmem gerekiyor. Burada takildigim bir kisim var.
Bir butona tiklandiginda, bir setState fonksiyonu ve bu state'in degeriyle islem yapan ikinci bir fonksiyon calisiyor. Bu noktada setState fonksiyonu async calistigi icin (bu kisimdan cok emin degilim. Kendi yaptigim testler sonucunda, butona sadece ilk tiklanildiginda yasanan bir durum) state'in yeni degerini set edemeden state ile islem yapan ikinci fonksiyon calisiyor ve sonuc olarak yanlis state degeriyle islem yapiyor.
Yapmaya calistigim sey ise api'den gelen post listesinin bir kismini ikinci bir state'e atip bunu sayfa yuklenince yayinlamak. Butona her basildiginda, kac kere basildigini bir state parcaciginda tutmak boylece sayfalar arasi dolasinca veya ilk state degisince kaldigi sayfadan okumaya devam edebilme.
Kendimce cozmeye calistim ancak bir cozum uretemedim hocam. Mantigimda bir yanlis var mi? Aydinlatirsaniz cok sevinirim. Simdiden tesekkur ederim.
Kod kismi: imgur.com/a/9zaFvME
Ilk state’in degerine bagli useEffect ile denediniz mi?
@@ReactDersleri Dediginiz useEffect'in dependency array'ine ikinci parametre olarak pageState'i verince cozuldu hocam. Cok tesekkur ederim
@@laptoprecaia.k.aagentsmith3328 Bahsettigim sey buydu.
evet hocam bütün afganlari .get'ledik
🤣
Hocam turk dilinde variable lari ve name leri vermeniz kesinlikle yalnish.Dunya diline uyqunlashkmak zorundayiz kafa karishdirmaya iytiyac yok.Azerbaycandan sevgiler sayqilar
Hadi len.
Hocamızın .then içindeki yapısını await ile yaptıktan sonra olası hatalar için catch içindeki hata yakalama olayını da try catch bloğu yapısını kullanarak yakalayabilirsiniz arkadaşlar try içinde awaitli kod statementi catch içinde error statementi olacak şekilde.
then/catch ya da async/await + try/catch hangisi kolayiniza geliyorsa
Hocam javascripte this anahtar kelimesi ve bunu react'ın tavsiye ettiği bind ile kullanımı üzerine de bir video yapma imkanınız olur mu arrow function lar yerine neden bind i tavsiye ediyor. bazı videolara bakıyorum arrow function ile değil özellikle bind ile yazıyorlar. this ve bind biraz kafa karıştırıcı. js ne kadar sade ve esnek olsa da bu konuda cidden baş döndürüyor
Hooklardan once boyle bir video guzel olabilirdi ama kanalda class component ile hicbir sey yapmiyoruz. Yoksa gizli gizli class component mi kullaniyorsunuz? 🧐
@@ReactDersleri Bu farkı bilmiyordum hocam öğrenme aşamasındayım. Tekrar tekrar eğitimlere bakıyorum da arada kacırdığım detay var mı diye bir tutorialda özellikle this ve bind i tavsiye etmişlerdi. yani fonksiyonel bileşenlerde this ve bind olayını kullanmayacağımızı bilmiyordum. Eğer öyleyse bu güzel oldu ileriye dönük bir göz korkum vardı :D
Hüzeyfe TAŞ this ve bind class component’a ozel. Illa ki ogrenmek istiyorum dersen, once JS’in class ifadesine bakmani tavsiye ederim.