React ve React Native’e Giriş
React, açık kaynak olan, kullanıcı ara yüzleri yaratmak için kullanılan bir Javascript kütüphanesidir. Ara yüz yaratmak adına yeniden kullanılabilen bileşenler, component adı verilen yapılar kullanılmaktadır. JSX formatı dediğimiz format sayesinde Javascript içerisine HTML yazmaya olanak sağlar. Sanal (Virtual) DOM (Document Object Model) yapısı kullanır ve performans olarak büyük bir etkiye sahiptir.
Tarihçesi
- 2010’da Facebook tarafından XHP tanıtıldı.
- 2011’de React’ın Prototipi kabul edilen FaxJS yayınlandı.
- 2013 Mayıs sonunda React yayınlandı.
- 2014 yılında hot-loader ve developer tool extension gibi yeniliklerle büyümeye devam etti.
- 2015 Mart ayında React-Native for IOS, Eylül ayında React Native for Android yayınlandı.
- Günümüzde de yeni hook yaklaşımı ile React 17.0.1, React Native 0.64.0 versiyonu ile kullanılabilir durumda.
Component bazlı geliştirme( Atomic Design Pattern )
Atomik dizayn tasarım sistemleri geliştirmek için kullanılan bir metottur. Bu metot içerisinde belirtilen 5 evre vardır. Resim-1’de bu 5 evreyi görebilirsiniz. Atom dediğimiz şey aynen kimyadaki gibi en küçük yapı taşıdır aslında. Bu da React mimarisinde Component’e denk gelmektedir. Örnek vermek gerekirse; button, checkbox vs.. Molekül dediğimiz ise React mimarisinde modüle denk gelmektedir. Birden fazla Textfield ve bir Buton’dan oluşan ve birçok yerde ortak kullanıma sahip bir yapıyı da modül olarak tanımlayabiliriz. Konu hakkında çok daha detaylı bilgi edinmek isterseniz bu linke tıklayarak ilgili dokümana erişebilirsiniz.
JSX nedir?
Hem HTML hem de JavaScript kodunu bir arada barındıran söz dizimidir.
Örnek bir JSX:
const myelement = <h1 className=“class”>Hi JSX!</h1>;
ReactDOM.render(myelement, document.getElementById(‘root’));
Virtual DOM
En özet haliyle, React’ da 2 adet DOM nesnesi vardır; bunlardan 1 tanesi bildiğimiz gerçek DOM diğeri ise genelde Virtual DOM olarak anılan Türkçe’ye Sanal DOM olarak çevirebileceğimiz nesnedir. Burada yapılan işlem; birbirinin eşleniği 2 nesne arasındaki farkı ortaya çıkarak, sadece o kısmın tekrar çizilmesini sağlamaktır.
React’da Prop nedir? State nedir?
Prop’lar bir Component’den başka bir Component’e veri akışını sağlamak amacıyla kullanılır. React, kod yazımında oldukça esnek olmasına rağmen, sadece bir tek kuralı şart koşmaktadır. Bütün React bileşenleri Prop’larını asla değiştirmemelidirler. Props’lar read-only datalardır.
State bir componentin o anki durumunu gösteren ve farklı property’lerden oluşan bir Javascript objesidir. Her component kendi içerisinde state’lere sahip olabilir ve state’ler kullanıldığı componentler tarafından yönetilir. State’ler componentin o anki durumunu simgeler.
React native
React Native, JavaScript kullanan açık kaynaklı bir mobil uygulama platformudur. Tek bir platform kullanarak IOS ve Android için uygulamalar geliştirebilirsiniz. React ile yazılabildiği için JSX formatını kullanır. React Native’i bugün mevcut Android ve iOS projelerinizde kullanabilir veya sıfırdan yepyeni bir uygulama oluşturabilirsiniz.
Mimarisi
Metro-bundler yardımıyla JSC ile haberleşiyor. JSC android’de apk’ya dahil edilmesi gerekiyor. Bridge’ler yardımıyla native taraf ile javascript tarafının haberleşmesi sağlanır. Bridge yapıları async olup json gönderip json alırlar. Arada bridge olduğu için JSC tarafı Native UI’a doğrudan erişemiyor ve Shadow Tree üzerinden haberleşme sağlanıyor.
Bir sonraki yazımızda React ve React Native konusunda daha detaylı bilgilere yer verecek ve 3rd party dediğimiz paketlerden en çok işimize yarayanlara değineceğiz.
Okuduğunuz için teşekkür ederim.
Aşağıdaki hesaplar üzeriden benimle iletişime geçebilirsiniz.
Referanslar
[1] https://bradfrost.com/blog/post/atomic-web-design/ (Atomic Design Pattern)
[2] https://s3.amazonaws.com/media-p.slid.es/uploads/63938/images/2379617/virtual-dom-update.png ( Virtual DOM )
[3] https://formidable.com/blog/2019/lean-core-part-4/ ( React Native Architecture Diagram)
