React 11 – React Route

React route belirlediğimiz sayfamızı belirlediğimiz path’lere yönlendirmeyi sağlar. Herhangi bir web sitesini düşünün. Mesela Facebook. Facebook’a ilk giriş yaptığınızda sizi anasayfa karşılar. Sonrasında profile gitmek isterseniz /kullaniciadi gibi bir path’e yönlendirir. Ya da arkadaşlarınızın listesini görmek isterseniz sizi /friends gibi bir path’e yönlendirir. Biz de kendi sayfamızda sayfalar arası geçiş yapmak için route componentini kullanabiliriz. … 

 

React 10 – Props ile Tanışalım.

Bir projemiz var diyelim. Bu projemizde de bazı standartlar yapmak istiyorsunuz. Çok basit bir örnek vermek gerekirse, kendinize ait özelleştirilmiş bir input yapmak istiyorsunuz. Boyutu, arka plan rengi, boşluklar vs. Bunun için kendi özelleştirilmiş input componentimizi yazabiliriz. “MyInputComponent” adında bir class component oluşturalım. Bu component içerisinde sadece bir label ve bir input barındırsın. Label bu … 

 

React 9 – Style Dosyaları Oluşturmak

Bir önceki yazımızda stillerin “.css” dosyalarında tutulmasının daha tercih edilir ve doğru bir yaklaşım olduğundan bahsetmiştik. Peki “.css” dosyaları ile nasıl stiller tanımlarız. Öncelikle kodumuzu önceki haline getirelim. Componentimiz içinde herhangi bir stil kodu kalmadı. Şimdi de aynı dizinde bir “ButtonExample.css” dosyası tanımlayalım. Az önceki örnekten farklı olması için bu kez arka plan rengini mavi … 

 

React 8 – Inline Style Tanımlamak

Nasıl JSX içine javascript kodu ekeyebiliyorsak benzer şekilde inline olarak stiller ekleyebiliriz. Örneğin, butonumuzun boyutunu büyütmek istedik diyelim. Bunu normalde css içinde “font-size= 30px” diyerek yapabiliriz. Benzer şekilde arka plan rengini “background-color: green” diyerek değiştirebiliriz. Bir css dosyası yerine inline olarak bu stilleri vermek istersek dikkat etmemiz gereken bazı kurallar var. İlk olarak JSX içinde … 

 

React 7 – State ile Tanışalım

Bir önceki yazımızda bir butona basıldığında nasıl bir fonksiyon çağrılacağını gördük. Peki ya bir butona basıldığında başka bir elementin üzerinde bir değişiklik yapmak istesek? Örneğin butonun yanında bir de label olsa ve butona basıldığında clicked, tekrar basıldığında unclicked yazdırmak istesek, bunu en basit hali ile nasıl yaparız? State işte tam da bunun gibi durumlar için … 

 

React 6 – onClick Metodu

Öncelikle önceki örnekte oluşturduğumuz dosyaları components klasörü altına düzenli şekilde taşıyalım ki, daha büyük karmaşalar yaşamadan düzenli hale getirmiş olalım. Ardından bu components klasörünün altına bir tane “button-example” adından bir klasör oluşturalım. Bunun altına da “ButtonExample.js” isminde, onClick metodunu anlatabilmek için bir js dosyası oluşturalım . Hepsinden önce bu componentteki değişiklikleri görebilmek için App componenti … 

 

React 5 – Class Component vs Functional Component

React’ta bir component tanımlamanın iki yolu vardır. Birincisi önceki örneklerimizde de yaptığımız gibi functional component tanımlamak. İkincisi ise class component tanımlamak. Functional Component Class Component Javascript’ten aşina olduğumuz bir fonskiyondur aslında. Her bir functional component bir JSX ifadesi döndürür. Bir JavaScript class’ıdır ve React.Component classını extend eder. render() metodunu implemente ederek yine bir JSX kodunu … 

 

React 4 – Nereye Ne Yazacacağız?

React geliştirmeye başlarken, eğer daha önce gerçekten React ile hiç uğraşmadıysanız bu soruyu sormanız muhtemel. Önceki yazımızda ilk fitili “index.html” den ateşliyoruz demiştik. “index.html” bir adet div içeriyordu ve id’si de “root” idi. “index.js” içinde ise bu elementi “App” componenti ile dolduruyorduk. Yani aslında bütün olayımız App içinde dönecek. App içinde şu anda sadece bir … 

 

React 3 – React’a Genel Bir Bakış

React kendini tam olarak şöyle tanımlar: Kullanıcı arayüzleri geliştirebileceğiniz bir JavaScript kütüphanesi React yazarken JSX adında bir söz dizimi kullanacağız. HTML’e oldukça benzeyen, içinde küçük farklılıklar bulunduran basit bir söz dizimidir. JSX kullanımı zorunlu olmamakla beraber kullanılması tavsiye edilir. package.json dosyası en önemli dosyalardan biridir. Burada bağımlılıklarımızı (dependencies) belirtiriz. Java’daki pom.xml dosyasına benzer özellikler taşır. … 

 

React 2 – Yeni Bir React Projesi Oluşturmak

İlk react projemizi oluşturalım. Bunun için Visual Studio Code da üst menüde bulunan “terminal” sekmesinden “new terminal” seçeneğine tıklıyoruz. Bu seçeneğe tıkladığınız anda aşağıda bir terminal açılacaktır. Bu terminale gelip hangi klasörde projenizi oluşturmak istiyorsanız o dizine gidip; yazıyoruz ve enter a basıyoruz. İlgili dizine “cd” komutuyla gidiyoruz. Örneğin ben terminali açtım ve “system32” dizini …