Staj günlüğüm serisinin ikinci bölümünde staj yaptığım projede bugüne kadar kullandığım ve dolayısıyla fikir sahibi olup öğrenmeye başladığım teknolojilere değineceğim. Öğrendiklerimi notlar halinde paylaşmak istiyorum. En detaylı değineceğim teknoloji ise projenin bel kemiği niteliği taşıması sebebiyle React olacak.
Serinin ilk bölümünde stajım ve proje hakkında detaylı bilgi paylaştım. O bölümü okumayanlar dilerlerse buraya tıklayarak o bölüme ulaşabilirler.
1- React
a) React Nedir?
React (React.js veya ReactJS olarak da bilinir) kullanıcı arayüzleri oluşturmanızı sağlayan bir Javascript kütüphanesidir. Facebook, bireysel geliştiriciler topluluğı ve şirketler tarafından geliştirilmektedir.
React gibi birçok popüler Javascript kütüphaneleri piyasada mevcut. Bunlardan en çok bilinenlerinden bazıları Angular ve Vue.js’dir. Aslında Angular’ı ve Vue.js’i ufak çapta test etmiştim. (Hatta Vue.js’i ilk kez Selman Kahya’nın canlı yayında yaptığı xox oyunu sayesinde görmüştüm ve dolayısıyla benim de ilk yaptığım test projem o olmuştu.) Tabi bu testlerim sadece; bu teknolojilerin hangi ihtiyaca istinaden geliştirildikleri ve nelere çözüm sunduklarını öğrenmemi sağlayacak boyuttaydı. Bu teknolojiler hakkında uzun uzun nutuk çekebileceğim deneyime sahip değilim, henüz!
b) İlk React Deneyimim ve Öğrenme Sürecim
React ile ilk buluşmamız, stajyer olarak dahil olduğum bu proje ile gerçekleşti. Her yeni bir şey öğrenmeye başladığımda yaşadığım heyecanı React için de yaşadığımı söyleyebilirim.
React’i öğrenme sürecimi temel olarak 3 aşamada ele alabilirim.
- Üstünde çalıştığım proje
- Udemy üzerinde izlediğim React kursu
- İnternet üzerindeki araştırmalarım.
Aslında bu 3 madde aynı zamanda genel olarak herhangi bir şeyi öğrenirken kullandığım öğrenme sürecimin özeti diyebilirim.
Serinin ilk bölümünde bahsetiğim gibi, bence öğrenmenin et etkili yolu proje geliştirmektir. Proje geliştirmek, gerçek problemleri ele almanızı sağladığı için daha etkili bir öğrenme deneyimi sunar. Proje geliştirerek öğrenme aynı zamanda teorik öğrenimi de daha etkili hale getirir. Şöyle ki; bir proje geliştirirken yaşadığınız problemi araştırıyorsunuz ve birtakım teorik bilgilere ulaşarak karşılaştığınız problemi çözüyorsunuz, böylece teorik bilgi, sadece kuru bir bilgi olmaktan çıkarak pratik olarak kullanabileceğiniz bir bilgiye dönüşüyor. Kısaca, proje geliştirerek öğrenme yani uygulamalı öğrenme aynı zamanda etkili bir teorik öğrenmedir.
c) React Notlarım
React’i öğrenmeye başladığım günden itibaren önemli noktaları not alıyorum. Not almam hem öğrenmem açısından hem de bu notları herkesle paylaşabilmem açısından önem arz ediyor.
1- Render HTML - ReactDOM.render()
React’in en temel işlevlerinden biri diyebiliriz. Render fonksiyonun amacı istenilen HTML kodlarının istenilen HTML etiketi içerisinde göstermektir. Varsayılan olarak HTML kodlarını ‘root’ id’sine sahip div elementi içerisinde görüntüleriz. Özetle HTML sayfasında görünecek şeyleri işleyen fonksiyonumuz render fonksiyonudur.
2- JSX Nedir?
JavaScript XML anlamına gelen JSX; React ile kolay ve anlaşılır yoldan HTML kodları yazmamıza olanak sağlayan bir yapıdır. Normalde Javascript ile HTML kodlarına müdahale etmek istediğimizde pek de kullanışlı ve anlaşılır olmayan ‘appendChild()’, ‘createElement()’ gibi birtakım JavaScript metotlarından yararlanırız. React gibi JavaScript tabanlı ve front-end geliştirme görevini üstlenen bir framework’de arayüz oluşturmak için sürekli bu JavaScript fonksiyonlarıyla çalışmak bir hayli zor ve karmaşık olacağı için JSX denilen bu yapı kullanılmaktadır. Ancak merak etmeyin HTML biliyorsanız bu yapıyı öğrenmekte çok zorlanmayacaksınız.
JSX’in en önemli noktalarından birisi için süslü parantezler({ }) diyebiliriz. Süslü parantezlerin(curly braces) içine; React’in propertylerini, değişkenleri yani çıktı alabileceğiniz her türlü işlenebilir ifadeyi yazabilirsiniz. Aşağıdaki kod bloğu sayesinde süslü parantezlerin nasıl çalıştığını görebilirsiniz.
const element = 5+5 işleminin sonucu: {5+5};
Üstteki kod bloğunun çıktısı: 5+5 işeminin sonucu: 10
Üstteki gibi basit ifadeleri tek satır üzerinde gösterebiliyoruz. Ancak daha büyük HTML elementi içeren kod blokları yazacaksak alttaki yöntemi kullanıyoruz:
const listeElementi = (
Kiraz
Elma
Portakal
);
Üstteki kod gördüğünüz gibi daha büyük bir HTML bloğu içeriyor ve parantezler sayesinde kod bloklarını alt alta yazabiliyoruz.
JSX kodu yazarken aşağıdaki 2 temel kurala dikkat etmelisiniz:
- En üst seviyede birden fazla HTML elementi bulunamaz. Örneğin üstteki
<ul>elementi orada üst seviyededir ve onunla aynı seviyede birpelementi eklerseniz hata alırsınız. (Tabii buna da farklı çözümler sunulmuş durumda, ileriki derslerde değineceğim) - JSX, XML kurallarını baz aldığı için onun kurallarını miras alır ve dolayısıyla her element doğru bir şekilde kapatılmalı ve her etiket doğru hiyerarşide bulunmalıdır.
2- GraphQL
a) GraphQL Nedir?
GraphQL; açık kaynak kodlu, Facebook tarafından geliştirilmiş, sunucu taraflı çalışan, REST API’i çağrılarının optimize edilmişmiş versiyonu olarak düşünebileceğimiz bir teknolojidir. Klasik REST’e göre daha performanslı ve esnek bir yaklaşıma sahiptir.
b) Neden GraphQL?
RESTful çağrıları (RESTful API Calls); sade, kaynak odaklı ve güzel yapılandırılmış bir yaklaşıma sahiptir aslında. Ancak, veri yapısı karmaşık bir hâl aldıkça URL’ler (routes) çok fazla uzuyor. Çoğu zaman tek bir istek (request) ile istenilen veriye ulaşamayabiliyorsunuz. İşte tam bu noktada GraphQL yardımımıza koşuyor. GraphQL, veriyi; okumak, düzenlemek ve veriler arasında dolaşmak için grafik şeklinde yapılandırır. GraphQL daima tahmin edebileceğiniz sonuçlar döndürür (süpriz sonuçlara yer yok ;)). GraphQL kullanan uygulamalar hızlı ve stabildir.
c) GraphQL Bileşenleri (Components)
1- Server-Side Components
- Schema: GraphQL schema’sı herhangi bir GraphQL sunucu implementasyonunun merkezini oluşturur ve bağlanacak olan kullanıcıya kullanılabilir fonksiyonaliteleri açıklar.
- Query: GraphQL query’si; sunucudaki veri kaynağından veri çekmek üzere kullanıcı tarafındaki uygulamadan gelen istektir.
- Resolvers: Resolver’lar GraphQL operasyonlarını kullanarak veriyi işleyen fonksiyonlardır. Yani resolver’lar query’leri veriye dönüştüren fonksiyonlardır.
2- Client-Side Components
- GraphiQL: GraphQL sorgularını çalıştırmak, test etmek ve düzenlemek için kullanılan tarayıcı tabanlı kullanıcı arayüzüdür.
- Apollo Client: GraphQL istemcisi oluşturmak için kullanılan en popüler ve en iyi araçtır. JavaScript ile tamamen uyumlu halde çalışır.
Staj Günlüğüm serisinin ikinci bölümünde hived.app projesinde kullandığımız 2 temel teknoloji olan React ve GraphQL’e değindim. Daha sonraki derslerde bu iki teknolojiyi biraz daha ele alacağım ve sonrasında belki diğer teknlojilere değineceğim. Başta belirttiğim gibi daha sonraki bölümlerin React üzerinden devam etmesini planlıyorum. Zamanla farklı farklı konulara, deneyimlerime ve ipuçlarına değineceğim.
Sonraki bölümlerde görüşmek üzere, hoşçakalın!
Kaynaklar
React Course by Stephen Grider - Udemy
GraphQL Tutorial - tutorialspoint.com
React Görseli: https://code.fb.com/
GrapQL Görseli: graphql.org
Tanımlar: wikipedia.org