Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
React.js
Web Uygulama Geliştirme
www.cihanozhan.com
React Tarihçesi
• Facebook ana akış(news) için geliştirildi.
• Instagram için de kullanıldı.
– Instagram ekibi Facebook ko...
React Neden Gerekliydi?
• Real-time web uygulamalarının DOM üzerinde sürekli gerekli olmayan veri
manipülasyonlarıyla uğra...
React Nedir?
• Kullanıcı arayüzleri oluşturmak için geliştirilen JavaScript kütüphanesidir.
– Bir Framework değildir.
• Re...
MVC Nedir?
• MVC bir yazılım tasarım desenidir.
• ASP.NET MVC, Angular React ya da diğer teknolojilerden bağımsızdır.
• MV...
MVC
(Kısa Tarih)
• 1979’da Trygve Reenskaug tarafından sunuldu.
• MVC tasarım deseni ilk olarak Smalltalk-80 framework’ünd...
MVC Kullanılan Bazı Teknolojiler
• Microsoft Foundation Classes(MFC) (aka Document/View architecture)
• Java Swing
• Qt To...
MVC?
MVC?
MVC?
MVC?
MVC?
MVC’nin Parçaları
• Model
– Business Layer, Model Logic
• View
– Display Layer, View Logic
• Controller
– Input Control, C...
Model
• Model katmanı uygulamanın veri operasyonlarını yönetmekten sorumludur.
• MVC deseninin veriye en yakın katmanıdır....
View
• View’in temel görevi veriyi kullanıcıya göstermektir.
• View katmanı modele bilgi isteği yapar. Elde edilen bilgi v...
Controller
• Controller kullanıcı etkileşimini ele alan uygulama katmanıdır.
• Tipik bir controller view’den, kullanıcı ve...
Bağımlılık Hiyerarşisi
• MVC tasarım deseninde bir çeşit bağımlılık hiyerarşisi vardır.
• Model katmanı sadece kendisi hak...
Bağımlılık Hiyerarşisi
Neden Kullanılır?
• Temel hedef bağımlılıkları minimize etmektir.
• View nesnesinin değiştirilmesi ...
React Nedir?
• Angular
– Modules
– Controllers
– Directives
– Scopes
– Templating
– Linking Functions
– Filters
– Dependen...
React Neden Kullanılır?
• Kolay okunur(declarative yaklaşım) ve anlaşılır View katmanı.
• Bileşen temelli/modüler web uygu...
React Neden Hızlıdır?
• One-way data binding kullanır.
• MVC’nin sadece View katmanına odaklanır.
• Gerçek DOM yerine Virt...
React’in Dezavantajı yok mu?
• IE8 ve önceki versiyonlarında çalışmaz.
• En az ES6 desteği gerekir(babel ile). Ancak en gü...
DOM?
DOM
• Sayfadaki tüm HTML elemanlarına(elements) ulaşabilir.
• Sayfadaki tüm HTML niteliklerine(attributes) ulaşabilir.
• S...
Virtual DOM Nedir?
• Virtual DOM, DOM’un yeniden oluşturulması için kullanılır.
• Sadece state değişimi olduğunde re-rende...
DOM ve Virtual DOM
Her Güncellemede…
(Virtual DOM)
• React yeni bir Virtual DOM ağaç yapısı oluşturur.
• Eski Virtual DOM ile farklarını alır...
Virtual DOM Hızlı!
• Çünkü, gerçek DOM yavaş.
• Çünkü, minimum DOM operasyonları hesaplanır.
• Çünkü, optimum DOM performa...
Data Binding Yöntemleri
• Two-Way Data Binding
• One-Way Data Binding
Two-Way Data Binding Nedir?
(Data Binding Yöntemleri)
One-Way Data Binding Nedir?
(Data Binding Yöntemleri)
React Sözdizimi
• React basit ve anlaşılır kod yapısına sahiptir.
• İki tür kodlama yaklaşımı var:
– Imperative
– Declarat...
Declarative Vs. Imperative
Component Nedir?
Component’ler, template’ler değildir
• Bir uygulamanın bağımsız olarak çalışabilmesini sağlayan temel yap...
Kurulum
• Node.js Kurulumu (https://nodejs.org/en/)
– npm install –g create-react-app
– create-react-app --version
– creat...
Demo
(Component)
• Örnek proje oluşturma.
• Yeni bir komponent oluşturup ilgili projeye eklemek ve çalıştırmak.
• Komponen...
React
Kod Yapısı
React…
• node_modules
– npm install komutuyla yüklenen paket kütüphaneler bulunmaktadır.
– Npm modülleri kontrol ederken p...
Props
(Stateless Data)
• Render maliyetlerini azaltmak için geliştirilmiş Property nesnelerine denir.
• Değişmeyecek, yani...
State
(Stateless Data)
• Props’un aksine, State’ler değişen veriler için kullanılır.
• Verinin her değişiminde, o bileşen ...
State
React 16’dan önce
• React 16’dan önce constructor içerisinde tanımlıyorduk.
State
React 16’dan sonra
• React 16’dan sonra constructor içerisinde olma zorunluluğu kalktı.
JSX Nedir?
• JSX -> (Transpilers) -> JS
• XML’den miras alan sözdizime sahiptir. Yani XML kuralları geçerlidir.
• HTML üre...
JSX Olmasaydı?
Ama JSX var…
JSX Kuralları
• Açılan eleman mutlaka kapatılmalıdır.
• Alt elemanlar tek bir eleman içinde sarmalanmalıdır.
• JSX elemanl...
React.js Web Programlama
React.js Web Programlama
React.js Web Programlama
React.js Web Programlama
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0

Share

React.js Web Programlama

Download to read offline

www.cihanozhan.com
www.deeplab.co
www.darkfactory.co

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

React.js Web Programlama

  1. 1. React.js Web Uygulama Geliştirme www.cihanozhan.com
  2. 2. React Tarihçesi • Facebook ana akış(news) için geliştirildi. • Instagram için de kullanıldı. – Instagram ekibi Facebook kodlarını incelerken… • JSConf’da tanıdıldı ve açık kaynak hale getirildi. • React ile ilgili ilk tepkiler negatifti… – Bilinen yöntem ve best practice’lere aykırı olması vs. Yeniliğe karşı çıkmak! • Sonra, yükseliş devri… • React Native
  3. 3. React Neden Gerekliydi? • Real-time web uygulamalarının DOM üzerinde sürekli gerekli olmayan veri manipülasyonlarıyla uğraşmak zorunda olması. • MVC’nin dar kaldığı kısımlarda daha esnek olabilmek. • Büyük çaplı projelerin(Facebook) UI katmanlarının karmaşık hale gelmesi. • Two-way data binding modelinin her zaman gerekli olmaması ve bunu değiştirmek. • DOM ağacındaki kademeli güncelleme(cascading updates) sebebiyle oluşan yetersiz kullanıcı deneyimi(UX).
  4. 4. React Nedir? • Kullanıcı arayüzleri oluşturmak için geliştirilen JavaScript kütüphanesidir. – Bir Framework değildir. • React sadece MVC’nin View katmanına odaklanır. – Model ve Controller katmanlarıyla ilgili bir özellik desteklemez. • Açık kaynaklıdır ve Facebook tarafından yönetilir. • ES6 ve Babel kullanır. • UI’i render eder ve event’leri yanıtlar. • Virtual DOM konseptini kullanır. In-Memory veri yapısı cache’i oluşturur, sonucun farklarını numaralandırır ve sonra da tarayıcının DOM’unu verimli şekilde günceller.
  5. 5. MVC Nedir? • MVC bir yazılım tasarım desenidir. • ASP.NET MVC, Angular React ya da diğer teknolojilerden bağımsızdır. • MVC kullanıcıya açılan sunum/tasarım katmanını uygulamadan ayırır.
  6. 6. MVC (Kısa Tarih) • 1979’da Trygve Reenskaug tarafından sunuldu. • MVC tasarım deseni ilk olarak Smalltalk-80 framework’ünde kullanıldı. – Apple(Lisa ve Macintosh) arayüzlerinde kullanıldı.
  7. 7. MVC Kullanılan Bazı Teknolojiler • Microsoft Foundation Classes(MFC) (aka Document/View architecture) • Java Swing • Qt Toolkit • Cocoa • GNUstep • ASP.NET MVC • ASP.NET API (Core, Web etc) • React.js (Sadece View)
  8. 8. MVC?
  9. 9. MVC?
  10. 10. MVC?
  11. 11. MVC?
  12. 12. MVC?
  13. 13. MVC’nin Parçaları • Model – Business Layer, Model Logic • View – Display Layer, View Logic • Controller – Input Control, Control Logic
  14. 14. Model • Model katmanı uygulamanın veri operasyonlarını yönetmekten sorumludur. • MVC deseninin veriye en yakın katmanıdır. • Model katmanına domain layer da denir.
  15. 15. View • View’in temel görevi veriyi kullanıcıya göstermektir. • View katmanı modele bilgi isteği yapar. Elde edilen bilgi view’in sunum katmanı olarak çıktı üretmesini sağlar. • MVC genellikle HTML sayfalarından oluşur.
  16. 16. Controller • Controller kullanıcı etkileşimini ele alan uygulama katmanıdır. • Tipik bir controller view’den, kullanıcı veri giriş kontrollerinden ve gönderilen giriş kontrollerinden veri alır ve modele iletir.
  17. 17. Bağımlılık Hiyerarşisi • MVC tasarım deseninde bir çeşit bağımlılık hiyerarşisi vardır. • Model katmanı sadece kendisi hakkında bilgi sahibidir. • Model katmanı kaynak kodunun View ya da Controller’a referansı yoktur. • View katmanı Model katmanını tanır. Gösterilecek veriyi tanımak için… • Ancak View katmanı Controller ile ilgili bilgiye sahip değildir. • Controller katmanı hem Model hem de View’i tanır.
  18. 18. Bağımlılık Hiyerarşisi Neden Kullanılır? • Temel hedef bağımlılıkları minimize etmektir. • View nesnesinin değiştirilmesi Modelin çalışmasını engellemez. • Uygulama bir masaüstü uygulamadan bir mobil uygulamaya dönüştürülse bile Model katmanı değiştirilmeden aktarılabilir. • Ancak yukarıdaki örnekteki bir değişiklik View ve Controller’ın değişmesini gerektirebilir.
  19. 19. React Nedir? • Angular – Modules – Controllers – Directives – Scopes – Templating – Linking Functions – Filters – Dependency Injection • React – Component
  20. 20. React Neden Kullanılır? • Kolay okunur(declarative yaklaşım) ve anlaşılır View katmanı. • Bileşen temelli/modüler web uygulama geliştirmek. • Değeri ya da elemanın kendisinin sayfa üzerinde çok sık değiştirilmesi gerektiğinde... Yani Real-time tarzındaki uygulamalarda… • Genel mimariyi anladıktan sonra uygulama geliştirmenin kolay olması.
  21. 21. React Neden Hızlıdır? • One-way data binding kullanır. • MVC’nin sadece View katmanına odaklanır. • Gerçek DOM yerine Virtual DOM kullanır. – KeyValuePair ile in-memory’de veri saklar. • DOM güncelleme yavaş, JavaScript ise hızlıdır. • Virtual DOM kullanarak gerçek DOM’a toplu güncellemeler iletilerek performans artışı sağlanır. • Server-Side Rendering yapabilir. • Sayfanın tamamını değil, sadece Virtual DOM’da güncellenen elemanları gerçek DOM’a aktarır.
  22. 22. React’in Dezavantajı yok mu? • IE8 ve önceki versiyonlarında çalışmaz. • En az ES6 desteği gerekir(babel ile). Ancak en güçlü haliyle ES6 ile kullanılır. • Dökümantasyonu berbat değil, ancak müthiş de sayılmaz.
  23. 23. DOM?
  24. 24. DOM • Sayfadaki tüm HTML elemanlarına(elements) ulaşabilir. • Sayfadaki tüm HTML niteliklerine(attributes) ulaşabilir. • Sayfadaki tüm CSS stillerine(styles) ulaşabilir. • Sayfadaki tüm HTML Element ve Attribute’lerini silebilir. • Sayfadaki tüm HTML Element ve HTML Attibute oluşturabilir. • Sayfadaki tüm HTML Element ve Attribute’ler ile çalışabilir. • Sayfadaki tüm elemanlar için olay(event) oluşturabilir.
  25. 25. Virtual DOM Nedir? • Virtual DOM, DOM’un yeniden oluşturulması için kullanılır. • Sadece state değişimi olduğunde re-render edilir ve gerçek DOM güncellenir. • 2 adet Virtual DOM ağacı üzerinde farklar(diff) hesaplanır ve gerekli olan optimum adım bulunarak gerçek DOM’a aktarılır. – Fark Algoritması : 10 değişim içn 10 üzeri 3, yani 10*10*10=1000. React’da ise sadece 10’dur. • Virtual DOM üzerindeki her değişiklik hemen aktarılmaz. Repaint, Reflow tek seferde uygulanır.
  26. 26. DOM ve Virtual DOM
  27. 27. Her Güncellemede… (Virtual DOM) • React yeni bir Virtual DOM ağaç yapısı oluşturur. • Eski Virtual DOM ile farklarını alır. • Minimum DOM manipülasyonu için gerekli hesaplamaları yapar ve sıraya koyar. • Ve tüm güncellemeleri çalıştırır.
  28. 28. Virtual DOM Hızlı! • Çünkü, gerçek DOM yavaş. • Çünkü, minimum DOM operasyonları hesaplanır. • Çünkü, optimum DOM performansı için toplu okuma ve yazma yapar. • Çünkü, genellikle manuel DOM operasyonlarından daha hızlıdır. • Çünkü, otomatik top-level event delegation(with cross-browser HTML5 events)
  29. 29. Data Binding Yöntemleri • Two-Way Data Binding • One-Way Data Binding
  30. 30. Two-Way Data Binding Nedir? (Data Binding Yöntemleri)
  31. 31. One-Way Data Binding Nedir? (Data Binding Yöntemleri)
  32. 32. React Sözdizimi • React basit ve anlaşılır kod yapısına sahiptir. • İki tür kodlama yaklaşımı var: – Imperative – Declarative • React Declarative kod yaklaşımını benimser ve kullanır.
  33. 33. Declarative Vs. Imperative
  34. 34. Component Nedir? Component’ler, template’ler değildir • Bir uygulamanın bağımsız olarak çalışabilmesini sağlayan temel yapıdır. • Komponentler Idempotent fonksiyonlardır. – Çıktısı değişmeyen, her seferinde aynı çıktıyı üreten fonksiyonlara denir. • Kullanıcı arayüzünü(UI) server-side render edilmiş bir uygulama gibi tanımlamayı sağlar. • İç İçe(ChildComponent) oluşturulabilir.
  35. 35. Kurulum • Node.js Kurulumu (https://nodejs.org/en/) – npm install –g create-react-app – create-react-app --version – create-react-app todolist – cd todolist – code . – npm start
  36. 36. Demo (Component) • Örnek proje oluşturma. • Yeni bir komponent oluşturup ilgili projeye eklemek ve çalıştırmak. • Komponent’ler de değişken kullanımı.
  37. 37. React Kod Yapısı
  38. 38. React… • node_modules – npm install komutuyla yüklenen paket kütüphaneler bulunmaktadır. – Npm modülleri kontrol ederken package.json dosyasını kontrol eder ve belirtilen versiyonlara göre ilgili modülleri indirip node_modules klasörüne indirir. • ES6(EcmaScript6) – Javascript’in 2015 yılında belirlenen yeni standartlarını temsil eder. – ES6'nın an itibari ile çoğu tarayıcı tarafından standart olarak kabul edilmediği için, production için kullanılması biraz sorun yaratabiliyor. Bu tip durumlarda transpile eden bir ek kütüphane kullanılması gerekiyor. Babel.js ile ES6 kodlarını compile edebiliyoruz. • WebPack – Bir modül paketleyicisidir. Script, Style, Resim dosyalarınızı tek bir bundle altında toplar. – Tam olarak bir Task Manager(Grunt, Glup) olmasa da bir Task Manager’dan beklenen temel şeyleri karşılar. Javascript, CSS, png, less, sass vb. tüm dosyaları statik bir hale getirir ve tek çatı altında toplar.
  39. 39. Props (Stateless Data) • Render maliyetlerini azaltmak için geliştirilmiş Property nesnelerine denir. • Değişmeyecek, yani sabit veriler için kullanılır. • Komponentler arası veri aktarımı için kullanılan declerative nesnelerdir.
  40. 40. State (Stateless Data) • Props’un aksine, State’ler değişen veriler için kullanılır. • Verinin her değişiminde, o bileşen yeniden render edilir. • this.state komutuyla erişilir ve this.setState ile tanımlanırlar. – setState ile veri değiştirilir. Bu sayede her veri değişiminde render metodu çağrılır.
  41. 41. State React 16’dan önce • React 16’dan önce constructor içerisinde tanımlıyorduk.
  42. 42. State React 16’dan sonra • React 16’dan sonra constructor içerisinde olma zorunluluğu kalktı.
  43. 43. JSX Nedir? • JSX -> (Transpilers) -> JS • XML’den miras alan sözdizime sahiptir. Yani XML kuralları geçerlidir. • HTML üretmek için component’ler içerisine yazılır.
  44. 44. JSX Olmasaydı?
  45. 45. Ama JSX var…
  46. 46. JSX Kuralları • Açılan eleman mutlaka kapatılmalıdır. • Alt elemanlar tek bir eleman içinde sarmalanmalıdır. • JSX elemanları kendi içlerinde HTML Attribute barındırabilir. • İstisnalar – JS’deki class yerine JSX’de className kullanılmalıdır. – JS’deki for yerine JSX’de htmlFor kullanılmalıdır.

www.cihanozhan.com www.deeplab.co www.darkfactory.co

Views

Total views

601

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

5

Shares

0

Comments

0

Likes

0

×