Cimri.com IT Team

1. REACT
A JAVASCRIPT LIBRARY FOR BUILDING USER
INTERFACES
Oğuz Kılıç
Front-End Software Developer @cimri.com

2. Tarihçe
Mayıs 2013 JSCONF

3. M’V’C

4. …Controllers
…Directives
…Templates
…Global Event Listeners
…Models
…View Models
Bulunmaz..
Sadece Component

5. One-Way Data
Binding

6. JSX
- Jsx xml-like bir JavaScript söz dizimi uzantısıdır. Amacı daha basit ve
anlaşılabilir bir söz dizimi yaratarak kod yazmayı kolaylaştırmasıdır.
- Söz dizimini JavaScript objelerine dönüştürür.
- İsteğe bağlı kullanılır, zorunlu değildir.

7. Virtual Dom
• Dom ile uğraşmak maliyetlidir
• Elementlerin css sınıflarını değiştirmek yada eklemek tüm dom ağacının
yeniden oluşmasına neden olur.
• Virtual Dom gerçek Dom’un bir yansımasıdır.
• Değişiklikler önce Virtual Dom’da yapılır.
• Değişiklikler tek seferde uygulanır
• Her state değişiminde gerçek dom ve virtual dom karşılaştılırarak render
mekanizması çalıştırılır.

8. Dom

9. Component
- Tekrar Kullanılabilirlik
- Bakım Kolaylığı
- Test Edilebilirlik

10. Mount

11. Props
Immutable

12. State
Mutable

13. Events

14. Mimari
Props State
Render
DOM
Events

15. Neden React?
• Component’ların tekrar kullanılabilirlik avantajı
• 16ms < Render tamamlanma süresi
• Backbone,Ember gibi diğer MVC framework’lar ile implementasyon kolaylığı
• Isomorphic olarak kullanılabilirliği ile server-side rendering yapılabilmesi
• Öğrenmesi kolay
• AngularJS’de ki gibi digest loop mekanizması olmadığı için büyüyen
uygulamalarda performans sorunları yaşanmaz.

16. –Ben Alman
“Really? Facebook React demo advocating
storing HTML in your JavaScript. Which is a
HUGE step back in terms of maintainability.
#jsconf #wtf”
Ön Yargılar

17. Sık Yapılan Eleştiriler
• JavaScript içinde Html kullanılması
• Full-Stack framework’lar varken Neden React ?

18. ES6 ve React
• React varsayılan olarak ES5 söz dizimi ile gelir.
İstenirse ES6 ile birlikte kullanılabilir.
• ES5 > ES6 compiler için Babel

19. Unit Test
• Unit Test için Jasmine tabanlı bir araç olan Jest
tavsiye edilmektedir. Jest Facebook tarafından
sunulmuştur.
• Jest React için özelleştirilmiştir.

20. Diğer Konular
• React Native ile native mobil uygulamalar
geliştirilebilir.
• React için Chrome devTools ile component
ağacı, state ve props’ları yönetmek
• Flux-Redux gibi yapılar ile büyük uygulamalarda
daha fazla kontrol
• Node.js ile server-side çalışabilme özelliği

21. React Gelişim Süreci

22. “Dinlediğiniz için Teşekkürler”

23. Sorular