2. ● 40+ consultants
● Cloud/DevOps, Microservices, Test
● Kloians working remotely
● Quarterly Summits
● Offices in London & İstanbul & Netherlands
● Customers from TR, US, UK, EU, TZ, UAE, RUS
6. React nedir?
● UI oluşturmak için Facebook tarafından yaratılmış esnek ve verimli bir
JavaScript kütüphanesidir.
● Component olarak adlandırdığımız küçük ve izole parçalar sayesinde
karmaşık arayüzler oluşturmamıza olanak sağlar.
● En temel özelliği olarak bileşenlerin birleşimini gösterebiliriz. Farklı kişilerin
yazdığı farklı bileşenler birlikte mükemmel çalışırlar.*
● One-way data flow tercih eder.*
7. ReactDOM nedir?
● React ve DOM arasında ki bağlantıyı sağlayan bir kütüphanedir.*
● Çoğunlukla React’i render etme aşamasında kullanılır.
● Beş tane metodu vardır.
● render()
● hdyrate()
● unmountComponentAtNode()
● findDOMNode()
● createPortal()
10. Component nedir?
● Küçük, izole ve tekrar kullanılabilir UI parçasıdır.
● React Element döndüren bir sınıf veya fonksiyondur.
● İsteğe bağlı olarak input(props) alırlar.
● Orkestramızın başlıca üyesidir.
14. Element vs Component
● Component isimleri, Componentleri HTML
elementlerinden ayırabilmek için Pascal
Case olarak verilmelidir.
● React, Pascal Case olarak verilen
isimlendirmeleri Component olarak algılar.
17. Props vs State
● Düz JavaScript nesnesidir
● Component’e iletilir
● Değişiklik olursa render’ı tetikler
● Kullanıldığı Component içerisinde
değişikliğe uğratılmaz*
● Düz JavaScript nesnesidir
● Component’te yönetilir
● Değişiklik olursa render’ı tetikler
● Bulunduğu Component içerisinde
değişikliğe uğratılabilir*
19. JSX nedir?
● JavaScript için oluşturulmuş bir syntax extensiondır.
● React içersinde HTML yazmayı veya eklemeyi çok daha kolay hale getirir.
● JSX, HTML elementlerini, createElement() ya da appendChild() metodlarını kullanmadan
DOM’a eklememizi sağlar.
● XSS(cross-site-scripting) ataklarını önler.
● JavaScript ifadelerini JSX içerisinde { } içerisinde kullandırır.
● Type-safe olmasından dolayı çoğu hatalar derleme esnasında yakalanabilir.
28. Handson
● Güncel Döviz kurlarını static olarak göstermelisiniz.
● Bunu bir tablo üzerinde yapmalısınız.
● Olabildiğince küçük parçalara ayrılmış Component’ler oluşturmalısınız.
● Tasarım önemli değildir.
42. Higher-order Component(HOC) nedir?
● Component businessını tekrar kullanmak için gelişmiş bir teknik olarak
tanımlar Facebook.
● Parametre olarak Component alır ve yeni bir Component döndürür.
● HOC, side-effects barındırmayan saf bir fonksiyondur.
● Cross-Cutting Concerns için biçilmiş kaftandır.
46. Pure Component nedir?
● Bir Component’tir :)
● State yada props için shallow karşılaştırma yapar.
● State veya props’da değişiklik görmezse re-render yapmaz.
● Bazı durumlar da daha performanslıdır.
49. React memo nedir?
● Higher-order Component’tir :)
● Props için shallow karşılaştırma yapar.
● Props’da değişiklik görmezse re-render yapmaz.
● Bazı durumlar da daha performanslıdır.
52. Hooks nedir?
● React state ve lifecycle özelliklerini fonksiyonel component’ler de
kullanmamıza olanak sağlayan fonksiyonlardır.
● Class Component’ler de kullanılmaz.
● useState(), useEffect() gibi built-in hooklar vardır.
● Custom hook’da oluşturulabilir.
62. 33 Queen St, London EC4R
1AP, United Kingdom
blog.kloia.com @kloia_com
AND Binası 10-12, 34752
Kozyatagi/Istanbul, Turkey
kloia.com
kloia is a solution provider that
moves you onto the new-era in
DevOps, Cloud and architecture.
Kabelweg 57 1014 BA,
Amsterdam/Netherlands
Editor's Notes
JSX aslında React.createElement için bir syntatic sugardan ibaret gördüğün gibi. Bu iki kod parçacığı da aynı çıktığı verecek. JSX’in faydalarını sanırım direkt olarak anlamışsınızdır. Her bir element için bu şekilde bir kod yazsaydık sanırım kimse React kullanmazdı diyebilirim :)
JSX aslında React.createElement için bir syntatic sugardan ibaret gördüğün gibi. Bu iki kod parçacığı da aynı çıktığı verecek. JSX’in faydalarını sanırım direkt olarak anlamışsınızdır. Her bir element için bu şekilde bir kod yazsaydık sanırım kimse React kullanmazdı diyebilirim :)
JSX aslında React.createElement için bir syntatic sugardan ibaret gördüğün gibi. Bu iki kod parçacığı da aynı çıktığı verecek. JSX’in faydalarını sanırım direkt olarak anlamışsınızdır. Her bir element için bu şekilde bir kod yazsaydık sanırım kimse React kullanmazdı diyebilirim :)
