İş görüşmelerinde en sık sorulan React mülakat soruları ve cevapları neler?
React, kendi mobil uygulamalarını geliştirmek isteyen yazılımcılar arasında oldukça popüler olarak kullanılan bir kütüphanedir. Özellikle single page application geliştirmek için kullanılan React, web ve mobil uygulama platformlarında görünüm katmanını işlemek için kullanılır.
Mobil uygulama pazarı oldukça geniş olduğundan dolayı pek çok şirket uygulama geliştirmek ve tek sayfa web siteleri oluşturmak için React geliştiricileri işe almak istiyor.
“React öğrenirken nasıl yol izlemeliyim?” sorusuna yanıt arıyorsanız, sizin için hazırladığımız React temel kaynaklar listesine göz atarak sıfırdan kendinizi geliştirmeye başlayabilirsiniz. Temel kaynaklar listesi sayesinde, Facebook’un 2013 yılında açık kaynaklı olarak yayınladığı JavaScript UI kütüphanesi olan React’ı teorik olarak inceleyerek hangi amaçla kullanılabileceğini, nerelerde tercih edilmesi gerektiğini hızlıca öğrenebilirsiniz.
React mülakatlarına girmeden önce sizin için hazırladığımız rehber niteliğindeki bu sorulara mutlaka göz atmalısınız! ????
En Popüler React Mülakat Soruları ve Cevapları
???? React nedir ve özellikleri nelerdir?
React, Facebook tarafından 2011 yılında geliştirilen bir JavaScript kütüphanesidir. 2015 yılında açık kaynaklı olmasına rağmen, React’ı destekleyen oldukça büyük bir topluluk vardır.
Yeniden kullanılabilir yapısı sayesinde UI bileşenleri oluşturmaya yardımcı olan bileşen tabanlı yaklaşımı takip eder.
React aynı zamanda karmaşık ve etkileşimli web ve mobil kullanıcı arayüzü geliştirmek için kullanılır.
React’in başlıca özellikleri:
Gerçek DOM yerine virtual DOM yapısı kullanır.
Sunucu tarafı oluşturmayı kullanır.
Tek yönlü veri akışını veya veri bağlamayı izler.
???? React’ın avantajları ve sınırlamaları nelerdir?
React’in başlıca avantajları:
React, uygulamanın performansını artıran bir yapıya sahiptir.
Hem istemci hem de sunucu tarafında kullanılabilir.
JSX yapısı ile kodun okunabilirliği büyük ölçüde kolaylaşır.
React’in Angular, Meteor gibi diğer frameworkler ile entegre edilmesi kolaydır.
React ile birlikte UI test senaryoları oluşturmak oldukça kolaydır.
React’in sınırlamaları ise:
React’ın framework değil kütüphane olması bazı noktalarda çalışmasını sınırlamakta.
React kütüphanesinin oldukça geniş olması, anlaşılma açısından zaman gerektirmekte.
Yazılıma yeni başlayanlar için anlaması zorlayıcı olabilir.
Satır içi şablonlama ve JSX ilk aşamada bilmeyenler için karmaşık görünebilir.
????JSX nedir?
JSX, JavaScript XML kısaltmasıdır. React’ın dökümantasyonunda belirtildiği gibi; JSX, React.createElement () işlevi için syntactic sugar sağlar.
JavaScript’in içine HTML yazılmasına ve appendChild () veya createElement () gibi işlevleri kullanmadan DOM’a yerleştirmemize olanak tanır.
Aynı zamanda JSX kullanmadan da React uygulamaları oluşturulabilir.
???? Tarayıcılar JSX’i neden okuyamıyor?
Mevcut tarayıcılar sadece JavaScript nesnelerini okuyabilir.
Aslına bakacak olursk, JSX’i normal bir JavaScript nesnesinde okuyamaz. Bu noktada bir tarayıcının JSX’i okumasını sağlamak için JSX dosyasını Babel gibi JSX dönüştürücüler kullanarak bir JavaScript nesnesine dönüştürmemiz ve ardından tarayıcıya iletmemiz gerekir.
???? Virtual DOM nedir? İşleyişini açıklayın.
DOM, bir web uygulamasının ayrılmaz parçasıdır, fakat DOM manipülasyonu, JavaScript’teki diğer işlemlerle karşılaştırıldığında oldukça yavaştır.
Birkaç DOM işlemi yapıldığında uygulamanın verimliliği oldukça etkilenir.
Virtual DOM ise, başlangıçta yalnızca gerçek DOM’un kopyası olan JavaScript’in nesnesidir.
Çalışma yapısı olarak 3 adımda incelenebilir:
Temel veriler değiştiğinde, kullanıcı arayüzünün tamamı Virtual DOM üzerinde yeniden oluşturulur.
Önceki DOM gösterimi ile yeni DOM arasındaki fark hesaplanır.
Hesaplamalardan sonra, gerçek DOM sadece gerçekten değişen şeylerle güncellenir.
???? “React’te her şey bir componenttir.” kavramını açıklayın.
Componentler, React uygulamasının kullanıcı arayüzünün yapı taşlarıdır ve tüm kullanıcı arayüzünü küçük bağımsız ve yeniden kullanılabilir parçalara ayırır.
Sonrasında ise, bu bileşenlerin her birini, UI’nin geri kalanını etkilemeden birbirinden bağımsız hale getirerek çalışmasını sağlar.
???? React’te render () işlevinin amacı nedir?
Her React bileşeni render () içermesi gerekir.
Tek bir elementten bahsediliyorsa render (), yerel DOM bileşeninin temsili olan tek bir React öğesi döndürür. Birden fazla HTML öğesinin oluşturulması gerekiyorsa, bunlar <form>, <group>, <div> gibi tek bir çevreleyen etiket içinde gruplanmalıdır.
???? Props nedir?
Props, React’teki özellikler’in kısaltmasıdır. Saf, yani değişmez tutulması gereken salt okunur bileşenleri ifade eder.
Uygulama boyunca her zaman üst bileşenlerden alt bileşenlere aktarılırlar. Bir alt bileşen asla üst bileşene bir destek gönderemez. Bu sayede sadece tek yönlü veri akışının sürdürülmesi gerçekleşir ve genellikle dinamik olarak oluşturulan verileri işlemek için kullanılır.
???? State nedir?
State, React bileşenlerinin kalbidir.
Stateler veri kaynağıdır ve olabildiğince basit tutulmalıdır. Temel olarak durumlar, bileşenlerin işlemesini ve davranışını belirleyen nesnelerdir.
Propslardan farklı olarak değiştirilebilirler ve dinamik ve etkileşimli bileşenler oluştururlar ve this.state () aracılığıyla erişilir durumdadırlar.
???? Arrow function nedir ve nasıl kullanılır?
Arrow fonksiyonları, fonksiyon ifadesini yazmak için daha kısa sözdizimidir. Aynı zamanda ‘şişman ok ‘ ( => ) işlevler olarak da adlandırılırlar.
ES6’da otomatik bağlama varsayılan olarak mevcut olmadığından, bu işlevler bileşenlerin bağlamını doğru bir şekilde bağlamayı sağlar. Arrow fonksiyonları çoğunlukla üst düzey fonksiyonlarla çalışırken kullanışlıdır.
???? React bileşenlerinin yaşam döngüsü sürecini açıklayın.
React’teki her bileşenin, yaşam döngüsünün belirli bir aşamasında değişiklikleri tetiklemek için yararlanabileceğimiz yaşam döngüsü yöntemleri vardır.
React’teki bileşenler üç aşamadan geçer: Mounting, Updating ve Unmounting.
En önemli yaşam döngüsü yöntemlerinden bazıları şunlardır:
componentWillMount ()
Oluşturma işlemi hem istemcide hem de sunucu tarafında gerçekleşmeden hemen önce yürütülür.
componentDidMount ()
İstemci tarafında yalnızca ilk oluşturmadan sonra çalıştırılır.
componentWillReceiveProps ()
props üst sınıftan alınır alınmaz ve başka bir render çağrılmadan önce çağrılır.
shouldComponentUpdate ()
Belirli koşullara göre doğru veya yanlış değeri döndürür. Bileşeninizin güncellenmesini istiyorsanız true, aksi takdirde false döndürür . Varsayılan olarak yanlış döndürür.
componentWillUpdate ()
DOM içinde işleme gerçekleşmeden hemen önce çağrılır.
componentDidUpdate ()
İşleme gerçekleştikten hemen sonra çağrılır.
componentWillUnmount ()
Bileşen DOM’den kaldırıldıktan sonra çağrılır. Hafıza alanlarını temizlemek için kullanılır.
???? React’te event nedir?
Event kavramı; fareyle üzerine gelme, tıklama, tuşa basma gibi belirli eylemlere karşı tetiklenen tepkilerdir.
Bu olayların işlenmesi, DOM öğelerindeki olayları işlemeye benzer fakat bazı sözdizimsel farklılıklar bulunur:
Eventler, yalnızca küçük harf yerine deve harfleri kullanılarak adlandırılır.
Eventler dizeler yerine işlevler olarak aktarılır.
Eventlerin bağımsız değişkeni, bir olaya özgü bir dizi özellik içerir. Her olay türü, yalnızca olay işleyicisi aracılığıyla erişilebilen kendi özelliklerini ve davranışını içerir.
???? “Synthetic event”ler ne için kullanılır?
Synthetic event’lar normal web tarayıcı eventları gibi çalışır, tarayıcının yerel olayı etrafında tarayıcılar arası sarmalayıcı görevi gören nesnelerdir.
Aralarındaki tek ana fark synthetic event’ların birden fazla farklı tarayıcıya uygulanabilen bir kod kullanırken normal event’ların sadece tek bir tarayıcıyı hedef almasıdır.
???? “Error boundaries” nedir?
Bir fonksiyondaki error boundary, child-component’ların içindeki bazı belirli olan türdeki hataları ayırır, izole eder ve bozuk olan alanları yedek UI ile değiştirir.
???? “Redux” nedir?
React mülakat soruları arasında en önemli sorulardan biri de, Redux kavramını biliyor olmanız.
Redux, Dan Abramov ve Andrew Clark tarafından geliştirilen bir state management kütüphanesidir.
Uygulamamızdaki verilerin yönetimden, kullanıcı giriş çıkışına kadar tüm dinamik gerçekleşen işlemleri Redux ile kontrolünü sağlayabilirsiniz.
Aynı zamanda Redux çok geniş bir topluluğa sahip olduğundan dolayı yaşadığınız sorunları çözmekte zorlanmazsınız.
Redux ile kullanılan bazı nesneler ve kavramlar mevcut. Redux’ın mantığını kavrayabilmek için “store”, “reducer” ve “action” kavramlarını tanımalısınız.
store: Redux ile birlikte oluşturacağımız dataların tutulacağı alandır. Uygulamalarda tek bir adet “store” bulunur ve state’ler bu store’un içinde depolanabilir.
reducer: Action’dan gelen dataları filtreleyerek store’da belirtilen datanın güncellenmesini sağlayan bir araçtır.
action: Reducer’lara ulaşan ve onları tetikleyen, store’daki güncellemesi gereken veriyi yollan bir araçtır.
???? Formlar nasıl oluşturulur?
React formları HTML formları ile benzerlik gösterir.
React’te durumlar yalnızca setState () aracılığıyla güncellenir. Bu nedenle, öğeler durumlarını doğrudan güncelleyemez ve gönderimleri bir JavaScript işlevi tarafından gerçekleştirilir. Bu işlev, kullanıcı tarafından bir forma girilen verilere tam erişime sahiptir.
???? StrictMode nedir?
StrictMode, bir uygulamadaki var olacak sorunları vurgulamak için React’in 16.3 sürümüne eklenen bir araçtır. Bu sayede React uygulamanda ek kontroller gerçekleştirir.
StrictMode başlıca aşağıdaki sorunlara yardımcı olur:
Güvenli olmayan yaşam döngüsü yöntemleriyle bileşenleri tanımlama,
Eski sürüm API kullanımıyla ilgili uyarıi
FindDOMNode kullanımıyla ilgili uyarı durumunda gerçekleşen sorunları gidermeyi hedefler.
???? React Hook kavramı nedir?
Hook kavramı, işlevsel bir bileşenden React durumuna ve yaşam döngüsü özelliklerine bağlanmamızı sağlayan işlevlerdir.
React hooks, bir class yazmadan React özelliklerini kullanmanıza olanak sağlar.
State management ve yaşam döngüsü yöntemlerinin kullanılacağı zamanlarda işlevsel bir bileşeni bir sınıf bileşenine dönüştürme ihtiyacı, Hook’ların geliştirilmesine yol açmıştır.
