Staj Günlüğüm #4

Staj günlüğümün bu serisinde React notlarımı paylaşırken bu notlara ek olarak Git ve Github’a dair bazı notlarımı da paylaşacağım.

1- React Notlarım

a) JSX vs HTML

Serinin ikinci bölümünde JSX’in ne olduğuna değinmiştik. Şimdi ise JSX ve HTML üzerinde aynı amaca hizmet eden fakat farklı isimdeki keywordlere ve bazı farklılıklara değineceğiz. Çok ciddi farklılıklar değil ancak React öğrenirken mutlaka bilinmesi gereken farklılıklar olduğunu söyleyebilirim.

1- class vs className

HTML’de kullandığımız class özelliği, HTML için olduğu gibi React için de çok önemlidir. Özellikle stillendirme için kullanılan class‘ın karşılığı React’de className‘dir. Hem HTML’de hem de JSX’de aynı görevi üstlendiğini tekrar hatırlatırken, bu farkın sadece React’in karmaşayı önlemek amacıyla benimsediği standarttan kaynaklı olduğunu belirtelim.

2- for vs htmlFor

Yine karmaşayı önlemek amacıyla değiştirilen bir keyword olan for‘un JSX’deki karşılığı htmlFor‘dur. for veya JSX karşılığıyla htmlFor, hangi form elemanının hangi label elemanına ait olduğunu belirtmek amacıyla kullanılır.

3- Inline Styling (Satır içi Stillendirme)

Buradaki farklılığın önemli bir farklılık olarak karşımıza çıktığını söyleyebilirim. HTML’de kullandığımız style özelliğinin JSX’de de aynı isimle kullanıldığını; ancak, style özelliğinin içerisinde yazdığımız stil(css) kodlarının syntax ve yapısal olarak farklı olduğunu sakın unutmayın. Peki bu söz dizimsel(syntax) ve yapısal fark tam olarak nasıl bir fark? Korkmayın, alttaki basit kuralla bu fark, CSS’in söz dizimini bilenler için hiç sorun olmayacak:

JSX’te style özelliğinin içerisinde stil kodlarında kelimeleri ayıran tire(-) işareti yerine, ikinci kelimenin baş harfini büyük yazıyoruz. Yani CSS özelliklerini camelCase formatında yazıyoruz. Buna ek olarak stilleri yazarken string yerine JavaScript objesi kullanıyoruz. Alttaki tablodaki örnekle olayı daha iyi kavrayabilirsiniz:

JSX’de stillerin 2 tane süslü parantezlerin arasında {{ }} olmasının sebebi şu: dıştaki süslü parantezler verilecek değerin bir JavaScript değişkeni olacağını belirtiyor, içteki parantezler ise değişkenin JavaScript objesi olmasından kaynaklı. Yani biz style özelliğinin değerini JavaScript objesi olarak veriyoruz. Ayrıca üstteki son örnekte göreceğiniz gibi birden fazla still yazmak istediğimizde araya noktalı virgül değil virgül koyuyoruz. Bu zaten JavaScript objesinin özelliklerini ayırırken kullandığımız standart olmasından dolayı yabancılık çekmeyeceğinizi düşünüyorum.

b) Class vs Function Components

Componentlerin ne olduğuna serimizin üçüncü bölümünde değinmiştik, hatta iki çeşit component tipimiz olduğundan da bahsetmiştik. Tekrar hatırlatmak gerekirse; React’de, class(sınıf) ve function(fonksiyon) tipinde 2 çeşit component vardır. Sınıf tabanlı component React’in ilk versiyonlarından beri olan bir yapıyken, fonksiyon tabanlı componentler; daha yeni sürümlerle gelmiş ve hooks ile artık sınıf tabanlı component’i tahtından etmiştir. Hooks’un ne olduğuna serimizin sonraki bölümünde değineceğim, şimdilik sadece sınıf ve fonksiyon tabanlı componentleri göreceğiz.

1- Class-Based Components

Eğer React’de class tabanlı component oluşturuyorsanız, bu sınıfı mutlaka React.Component ile extends etmelisiniz yani miras almalısınız. Class tabanlı bir component render() fonksiyonunu içermek zorundadır.

Aşağıda basit bir sınıf tabanlı component örneğini görebilirsiniz:

class Merhaba extends React.Component {
  render() {
    return Merhaba, {this.props.name};
  }
}

Bu Merhaba isimli component, props’tanname ismindeki değişkeni de kullanarak, p elementi içerisinde “Merhaba, Fırat” şeklinde mesaj gösteriyor. Gördüğünüz gibi React.Component ile extends edilmiş ve render() fonksiyonu kullanılmış. Class tabanlı compınent temel olarak böyle, lifecycle adı verilen componentlere özgü fonksiyonlara bir sonraki bölümde değineceğiz.

2- Function-Based Component

Fonksiyon tabanlı componentler şu an önceliğe sahip olsalar da ilk çıktığı zamanlar sınıf tabanlı componentlere göre birçok eksiği olduğu için sadece karmaşık olmayan tipteki componentlerde kullanılıyordu. Şimdi ise React’in hooks dediğimiz özelliği ile fonksiyon tabanlı sınıflar sınıf tabanlı sınıfların yerini alabilecek konuma gelmiş bulunmakta. Hooks dediğimiz bu olayı sonraki bölümde ele alacağız. Şimdi ise üstteki örneğin aynısını fonksiyon tabamlı sınıf kullanarak yapalım:

function Merhaba(props) {
  return Hello, {props.name};
}

Gördüğünüz gibi JavaScript’ten aşina olduğumuz fonksiyonu kullanarak resmen bir component oluşturabiliyoruz. Tercih sebeplerinin başında; sadeliği, kullanım kolaylığı, esnekliği ve genel olarak dosya boyutunun daha az olması gibi konular gelmektedir.

React ekibi sınıfların kullanımdan kalkmayacağını ancak yeni projelerimizde fonksiyon tabanlı component kullanmamızı öneriyor.

2- Git/GitHub Notlarım

Git ve GitHub’ı projeye başlamadan önce kullanmama rağmen, projeye dahil olduktan sonra Git ve GitHub’a dair birçok şey öğrendim. Bu öğrendiklerimi başlıklar altında ufak özetlerle aktarmaya çalışacağım.

1- Protected Branch

Daha önce dikkatimi çekmeyen ve çok hoşuma giden bir özellik. Örneğin çoğu zaman kodumuzun bulunduğu ana branchı(varsayılan olarak master’dır) çalışır halde tutmak veya istenmeyen durumların önüne geçemk için korumak isteriz. İşte bu özellik burada devreye giriyor. Bu özellik bizlere şu seçenekleri sunuyor:

• Pull Request’lerin status check‘den geçmeden merge edilmesini engellemek.
• Pull Request’lerin herhangi birisi tarafından review edilip onaylanmadan merge edilmesini engellemek.
• Web üzerinden dosya düzenlemeyi ve dosya upload etmeyi engellemek.
• Pull Request’lerin kod sahibinin/sahiplerinin onayı olmadan merge edilmesini engellemek.
• Onaylanmamış commit’lerin push edilmesini engellemek.

2- Fetch Remote Pull Request

Gördüğünüz üzere başlığı Türkçe’ye pek uyarlayamadığım için tamamen İngilizce yazmak zorunda kaldım :). Buradaki amaç, henüz merge edilmemiş, bir başka takım üyesinin gönderdiği pull request’i kendi localinize alıp test etmektir. Bunu aşağıdaki komut satırı koduyla yapabiliyoruz:

git fetch upstream pull/ID/head:BRANCHNAME

Bu üstteki komut satırı kodunda; ID locale almak istediğimiz pull requestin ID’si, BRANCHNAME ise pull requestteki değişiklikleri tutmak amacıyla oluşturulacak olan yeni branchın ismidir.

Ayrıca; ben burada upstream kullandım, eğer çekmek istediğiniz PR sizin fork ettiğiniz repoda ise origin kullanabilirsiniz.

Bu özellik; takımda arkadaşınızın kodlarını review etmek veya bu kodları merge edilmeden görmek istediğinizde yardımınıza koşuyor.

3- Git Hooks (.git/hooks)

Git hooks, belirli olaylardan(events) önce çalıştırmak istediğimiz scriptleri belirtebildiğimiz bir özelliktir. Initialize edilmiş bir Git klasöründe cd .git/hooks && ls komutuyla Git’in bize sunduğu tüm hookları aşağıdaki şekilde listeletebilirsiniz:

Gördüğünüz gibi birçok olay için hook mevcut durumda, ihtiyacımız doğrultusunda istediğimiz hooku kullanabiliriz. Örneğin; pre-push hook’u sayesinde git push komutu çalıştırıldığında push işleme alınmadan önce istediğimiz test scriptlerini çalıştırabiliriz. Böylece eğer testler başarılı olmazsa push işlemini iptal edebiliriz.

Bonus olarak şunu söyleyebilirim ki; eğer bu hook dosyalarının içeriğiyle uğraşıp detaylara bulaşmadan daha kolay ve hızlı şekilde hookları kullanmak isterseniz, bizim de projede kullandığımız Husky paketi tam size göre diyebilirim. Husky ile dökümantasyonda belirttiği gibi package.json dosyanıza ekleyeceğiniz birkaç satırla hookları kolaylıkla kullanmaya başlayabilirsiniz.

Evet serimizin dördüncü bölümünün de sonuna geldik. Bir sonraki bölümde görüşmek üzere, hoşçakalın!