React Bootcamp

1. React Bootcamp
11.09.2021
@yunusdemirpolt

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

3. Kloia in-a-nutshell:
Solutions in
DevOps/DevSecOps
Cloud/Kubernetes
Microservices
Test Automation
Within four nominated AWS Partners
globally for Modernization Projects
Several ongoing modernization projects
Customers from:
USA
UK Germany
Finland Austria
Turkey
Malta Tanzania
UAE Netherlands
Switzerland
Denmark
Russia

4. Ben Kimim?
Yunus Demirpolat
Kod yazar araştırmacı
Front End Consultant @kloia
Gezgin

5. REACT

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()

8. ReactDOM.render()

9. Components

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.

11. Component Hiyerarşisi

12. Class Component

13. Functional Component

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.

15. Properties

16. State

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*

18. JSX

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.

20. React.createElement(compone
nt, props, ...children)

21. SETUP

22. git —version
Git MAC’de default olarak yüklüdür. Yüklü değil ise yukarıda ki komutu
çalıştırmanız yeterli bu yüklemeniz için bir ekran açacaktır.

23. https://nodejs.org/en/downlo
ad/
NodeJS için bu adrese gidip size uygun platformu seçip indirebilirsiniz.

24. https://github.com/yunusd/b
ootcamp-vanilla
Buradan boilerplate’i indirebilir sonrasın da uygulamayı yazmaya
başlayabilirsiniz.

25. Folder Structure

26. package.json

27. npm install && npm run start

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.

30. REVIEW

31. Lifecycles

32. Bir Component’in aşamaları
● Initialization
● Mounting
● Updating
● Unmounting

33. constructor()

34. render()

35. componentDidMount()

36. componentDidUpdate()

37. componentDidUnmount()

38. Component Lifecycle metodları

39. FORM

40. Controlled Components

41. Higher-order Component

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.

43. Peki, HOC neyin
dermanı?

44. HOC sonrası

45. Pure Component

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.

47. React.PureComponent

48. React Memo

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.

50. React.memo()

51. H00KS

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.

53. State Hook

54. Effect Hook

55. useMemo()

56. Custom Hook

57. Handson
● Not uygulaması yazacağız.
● Not oluşturabilmeli, listeleyebilmeli ve silebilmeliyiz.
● Tasarım önemli değildir.
● Süre: 2 saat

59. REVIEW

60. Neler öğrendik?
● React
● Props, State
● Components, JSX
● HOCs
● Pure Component, React.memo()
● Hooks

61. Dinlediğiniz için teşekkürler.

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