Sign in

Bu yazı blogumdaki ilk yazı. Açıkçası insan ilk yazıda ne yazacağına karar veremiyor. Ama bir yerden başlamak gerekiyordu. Umarım faydası olur.🙂

Küçük bir açıklama,

2 yönlü veri iletişimi (Two-way data binding), kullanıcının girdiği değere bağlı olarak sayfadaki ilgili tüm yerlerdeki değerlerin eş zamanlı olarak değişmesini sağlar.

Mesela bir iletişim formunda Ad bilgisi değiştiyse geri gidip tamamını değiştirmesine gerek kalmaz. Ya da örneğin kullanıcıdan aldığınız her yeni veriye göre sayfadaki bir değeri eşzamanlı olarak değiştirebilirsiniz.

Aşağıdaki örnekte sayfamızdaki input elementine v-model attribute ekleyerek değerine name verdik.

Vue.js kodu içerisindeki name elementinin varsayılan değeri ne olursa olsun, input içine girilen değer hem script içindeki değeri hem de buna bağlı olarak sayfadaki tüm name değerlerini eş zamanlı olarak güncelleyecektir.

Örnek kod:


Reactjs hayatımıza yumuşak ama sağlam bir giriş yaptı. Tabii ki her fani gibi bir gün React de bir gün aramızdan ayrılacak / popülaritesi bitecek. Ancak one-way data binding , dilediğiniz zaman state güncelleyebilme, atomik düzeyde geliştirmeye imkan tanıması gibi özellikleri React’i benim için vazgeçilmez kılıyor. Öyleyse öğrenmeye, denemeye ve paylaşmaya devam.

Bu yazıda sizlerle Axios ile React tabanlı projeleriniz json datalarını okumanın pratik bir yolunu göstereceğim. Yazı biraz uzun olsa da aslında axios ile get işlemi sadece tek satırlık bir işlem. Gerisi React lifecycle metodları ve state yönetimi gibi rutin işlemler.

İlk olarak Axios nedir buna bir değinelim:

Axios, async-await…


Reactjs ile geliştirdiğiniz bir projede er ya da geç routing işlemleri için React Router’a ihtiyacınız oluyor. Özellikle landing page dediğimiz tek sayfalık, ürün tanıtımını hedefleyen marketing odaklı sitelerde kullanıcıları sayfada gezdirirmek ekstra bir özen gerektiriyor. Gezinti esnasında 3 farklı senaryo karşımıza çıkıyor. Önce senaryolara kısaca göz atalım ardından çözümleri birlikte inceleyelim:

Sayfa içi gezinti

Kullanıcımızın anasayfada “kayan menüde” linklere tıklayarak keyifli ana sayfa içinde esnek bir şekilde geziniyor. Bu senaryoyu gerçekleştirmek için React Router Hash Link paketini kullanacağız.

Başka bir sayfaya geçiş

Kullanıcımızın “http://anadomain.com/blog” benzeri bir linke tıkladığında Blog sayfamızın (daha doğrusu Blog component’inin) render edilmesini istiyoruz. Bu senaryoyu gerçekleştirmek…


While developing SPA project, we sometimes need to use API keys. Although it is possible to hide these API keys with .ENV file importing method, you must find another method on production process because of the fact that:

  • .env files’ content are visible to client when they investigate your .js files.
  • .env importing is used for when you want to hide api key on Github 🙂

Quick fix for this problem:

You can try to create a new express.js project to get request from your client then forward this request this to 3rd party endpoint with API key (on backend side).

After it gets response…

Murat Umutlu

At the Intersection of the Development, Front-End, Back-End, and Mobile || JavaScript, Python, and AWS || murat@muum.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store