En Popüler React Mülakat Soruları ve Cevapları

React, çeşitli uygulamalar oluşturmak için yaygın olarak kullanılmaktadır. Stack Overflow'un 2022 geliştirici anketine göre, tüm web çerçeveleri arasında 2. sırada yer alıyor!

React'in popülaritesi gün geçtikçe artmaya devam ediyor. Hal böyle olunca da şirketlerin React Developer’lara olan ihtiyacı da artmaya başladı.

Bir React Developer mülakatına girecekseniz gelebilecek teknik sorulara çalışmanızı tavsiye ederiz. Teknik mülakat soruları korkulacak bir şey değil, özellikle olası sorulara önceden hazırlandıysanız…

Alıştırma yapmak, mülakat sırasında daha güvenli olmanızı sağlar. Bu nedenle, React Developer’lar için mülakatlarda sorulan en popüler React mülakat soruları ve cevaplarını listeledik. 

 

1. React nedir?

2011 yılında Facebook tarafından geliştirilen React, web ve mobil kullanıcı arayüzleri oluşturmaya yönelik bir JavaScript kütüphanesidir.

React, geliştiricilerin yeniden kullanılabilir UI bileşenleri oluşturmasına olanak tanır. Büyük bir React topluluğu da bulunur. 

 

2. React ne işe yarar?

React, web uygulamalarında kullanıcı arayüzlerinin oluşturulması, güncellenmesi ve yönetilmesi için kullanılır. React, bileşen tabanlı bir yaklaşım kullanır. Yani uygulama içindeki her bir parçayı tek tek ele alır ve bu parçaların değişikliklerine dinamik olarak reaksiyon gösterir. Bu sayede, kullanıcı arayüzleri daha hızlı ve verimli bir şekilde oluşturulur. 

 

3. React bileşenleri nedir? 

React kullanarak oluşturulan kullanıcı arayüzünün parçalarına React bileşenleri denir. 

✔️ Bileşenler, bir kullanıcı arayüzünü yeniden kullanılabilir parçalara ayırır. 

✔️ Kod tekrarını önler. 

✔️ Kodun anlaşılmasını kolaylaştırır.

✔️ Zamandan ve çabadan tasarruf sağlar.

✔️ Arayüzün test edilmesini kolaylaştırır. 

 

4. React’de işlevsel bileşen ve sınıf bileşeni nedir?

React’de sınıf bileşenleri ve işlevsel bileşenler olmak üzere iki tür bileşen vardır.

• İşlevsel bileşenler, en temel React bileşeni türüdür. Görüntü için çalışır ve veri alma veya görüntüleme işlemi için Props’u kullanır. Basit ve hızlıdırlar.  
• Sınıf bileşenleri, geliştiricilerin bileşen yaşam döngüsü yöntemlerini ve bir bileşenin durumunu yönetmesine izin veren karmaşık React bileşenleridir. Gelişmiş özelliklere sahip olup daha kompleks işlemler için kullanılır. 

⚠️ Her iki bileşen türü de React'de kullanılır. Bileşenin ihtiyaçlarına göre seçim yapılır.

 

5. ReactJs Event Handling nedir?

ReactJs Event Handling, bir UI düğmesine tıklamak, bir UI nesnesinin üzerine fareyi getirmek, UI ile klavye komutlarını kullanmak gibi olayların yönetimi için kullanılan bir özelliktir. Bir kullanıcının React JavaScript kütüphanesinde UI ögesine etki ettiği zaman oluşan olayların yönetmeyi sağlar.

 

6. JSX nedir?

1. JSX, JavaScript'te HTML stil kodu yazmaya izin veren HTML benzeri bir syntax’tır.
2. React ile web siteleri veya uygulamalar oluşturmak için JSX kullanılmasına gerek yoktur. Ancak, JSX kullanmak kod karmaşıklığını azaltır.
3. JSX, React uygulamalarının performansını artırır.
4. JSX, HTML gibi görünen nesne tanımlamalarına izin verir.

JSX kod örneği 👇:

 

7. Tarayıcılar JSX’i neden okuyamıyor?

Mevcut tarayıcılar sadece JavaScript nesnelerini okuyabilir. 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ürülür. Daha sonra nesneler tarayıcıda okunabilir.

 

8. React Sanal DOM nedir?

React Sanal DOM, React tarafından kullanılan ve gerçek DOM (Belge Nesne Modeli) yerine kullanılan bir yapıdır. 

Sanal DOM, gerçek DOM'un bir kopyasıdır ve React tarafından kullanılan UI ögelerinin modellenmesini sağlar.

 

9. React Sanal DOM nasıl çalışır?

1️⃣ Web tarayıcıları sitenin veya uygulamanın nasıl düzenlendiğini gösteren Belge Nesne Modeli (DOM) adında bir yapı oluştururlar.

2️⃣ React, sitenin gerçek DOM'unun bir kopyası olan Sanal DOM kullanır.

3️⃣ React, sanal DOM’u kullanarak gerçek DOM'un hangi bölümlerinin değişmesi gerektiğini belirler. Değişiklikleri Sanal DOM'dan alır ve gerçek DOM'u buna göre günceller.

 

10. Gerçek DOM ile Sanal DOM arasındaki farklar nelerdir?

 

11. React’deki hatalar nasıl ayıklanır? 

React kodundaki bir hatayı ayıklamak için hata ayıklama araçları kullanılır. Örneğin Google Chrome için DevTools kullanılabilir. 

Hata ayıklama araçları, tarayıcıda oluşan JavaScript hatalarını ve konsol çıktılarını görmeye yardımcı olur.

 

12. Kullanıcı arayüzleri oluştururken React kullanmanın avantajları nelerdir? 

• ✅ Sanal DOM modeli aracılığıyla uygulama performansı artırılır.
• ✅ JSX ile verimlilik artırılır.
• ✅ Bileşenler birden çok projede yeniden kullanılır.
• ✅ Açık kaynak topluluğu tarafından yardım alınır.
• ✅ Çok sayıda eklenti araçları vardır.

 

13. React’in dezavantajları nelerdir?

React'in dezavantajlarından bazıları şunlardır:

1. React JS bir JavaScript kütüphanesidir ve karmaşık projelerde yeterli olmayabilir. 
2. React'i anlamak için biraz zaman alabilir. 
3. React, JavaScript ve UI geliştirme alanında deneyimli olmayan kullanıcılar için zor bir kütüphane olabilir.
4. React’in bazı dokümantasyonları yeterli olmayabilir.
5. React, sürekli olarak güncellenir. Bu da mevcut özelliklerin sürekli değişmesi anlamına gelir. Geliştiriciler sürekli olarak güncellenen yeni özelliklere uyum sağlamaya çalışır.

 

14. Redux nedir?

Redux, React’i tamamlayıcı bir kütüphanedir. React ve diğer JavaScript framework ve kütüphaneleri ile uyumludur. 

Redux, geliştiricilerin test etmesi kolay web uygulamaları oluşturmasına yardımcı olur. Ayrıca hata ayıklama araçlarını da içerir. 

 

15. React'de Flux kavramı nedir?

Flux, Facebook tarafından geliştirilen bir veri yönetimi yapısıdır. Framework veya kütüphane değildir. React uygulamalarında, verilerin tek yönlü akışını sağlamak ve veri yönetimini düzenlemek için kullanılır.

 

16. React Router nedir?

React Router, React uygulamaları için URL yönlendirme ve sayfa akışları eklemeyi sağlayan bir JavaScript kütüphanesidir. React uygulamalarının dinamik ve interaktif web sayfalarına dönüştürülmesine yardımcı olur. Böylece uygulamanın kullanımını kolaylaştırır ve uygulamanın performansını arttırır.

 

17. React’de <> </> etiketleri ne işe yarar?

React'de; <> </> boş etiketler, JSX (JavaScript XML) sözdizimi tarafından desteklenir. Bu boş etiketler, componentlerin görüntülenmesini kolaylaştırmak için kullanılabilir.

 

18. Birden fazla ifade satırı olduğunda ne yapılır?

JSX ifadesi kullanılır.

 

19. React’de render () işlevinin amacı nedir?

Her React bileşeni render () içerir. Birden fazla HTML ögesinin oluşturulması gerekiyorsa, bunlar <form>, <group>, <div> gibi tek bir çevreleyen etiket içinde gruplanmalıdır.

 

20. StrictMode nedir?

StrictMode, bir uygulamadaki var olacak sorunları vurgulamak için React’in 16.3 sürümüne eklenen bir araçtır. 

• ✅ Güvenli olmayan yaşam döngüsü yöntemleriyle bileşenleri tanımlamayı sağlar. 
• ✅ Eski sürüm API kullanımıyla ilgili uyarıları verir. 
• ✅ Debug sürecini kolaylaştırır.

 

21. React Hook kavramı nedir?

React Hook bir class yazmadan React özelliklerini kullanmaya olanak sağlayan bir yapıdır.

 

22. İki veya daha fazla bileşen nasıl bir araya getirilebilir?

 

23. Props ve State nedir?

Props ve State React bileşenlerinin, veri alma ve görüntülemesini sağlayan iki farklı mekanizmadır. Bileşenin davranışını ve verileri kontrol ederler. 

• ✅ Props, React bileşeninin içindeki değerleri tanımlar. Bu değerler, bileşen tarafından okunabilir ama değiştirilemez.
• ✅ State, React bileşeninin içindeki verileri tanımlar.  

 

24. Bir bileşenin durumu nasıl güncellenir?

Bir bileşenin durumu this.setState() kullanılarak güncellenebilir 👇.

25. React'te Arrow function nedir ve nasıl kullanılır? 

Arrow function, JavaScript dilindeki arrow function yapısının React bileşenlerinde kullanımıdır. Bunlara 'şişman ok ' ( => ) işlevleri de denir. 

Bu işlevler bileşenlerin bağlamını düzgün bir şekilde bağlamaya izin verir. Ok işlevleri çoğunlukla daha yüksek düzey işlevlerle çalışırken kullanışlıdır.

 

26. React’ta stateful ve stateless components nedir?

👉 Stateful components, bileşenin durum değişikliği hakkındaki bilgilerini bellekte saklar. Durumdaki geçmiş, şimdiki ve gelecekteki olası değişikliklerin bilgisini bulundurur. Durum değiştirme yetkisine de sahiptir. 

👉 Stateless components, bileşenlerin iç durumunu hesaplar. Durum değiştirme yetkisi olamayacağı gibi, geçmiş, şimdiki ve gelecekteki olası durum değişiklikleri hakkında bilgi de içermez.

 

27. React bileşenlerinin yaşam döngüleri nelerdir?

1. componentWillMount () – Bileşenin oluşturulmadan önce yani bileşenin "mount" aşamasında çağrılan bir yaşam döngüsü yöntemidir. 
2. componentDidMount () – İstemci tarafında yalnızca ilk işlemeden sonra çalıştırılan yöntemdir.
3. componentWillReceiveProps () – Donanımlar ana sınıftan alınınca ve başka bir işleme alınmadan önce çağrılan yöntemdir.
4. shouldComponentUpdate () – Bileşenin güncellenip güncellenmeyeceğini belirlemek ve performans iyileştirmeleri için kullanılır.
5. componentWillUpdate () – DOM'da oluşturma gerçekleşmeden hemen önce çağrılan yöntemdir.
6. componentDidUpdate () – Bileşen güncellendikten sonra çağrılır. Yeni güncellenmiş bileşen durumlarına erişim sağlar.
7. componentWillUnmount () – Bellek boşluklarını temizlemek için kullanılır.

 

28. React'te event nedir?

React'te bir olay (event), kullanıcının tarayıcı üzerinde gerçekleştirdiği etkileşimlerin bir sonucu olarak meydana gelen bir durumdur. Bunlar, farenin üzerine gelme, fare tıklaması, tuşa basma vb. belirli eylemler olabilir. 

Bu eventleri işlemek, DOM öğelerindeki olayları işlemeye benzer. Ancak bazı sözdizimsel farklılıklar vardır:

 

1️⃣ Eventler, sadece küçük harf kullanmak yerine camel harfi kullanılarak adlandırılır.

2️⃣ Eventler, dizeler yerine işlevler olarak iletilir.

 

29. React'te kod nasıl modüler hale getirilir?

Export ve import özelliklerini kullanarak kod modüler hale getirilebilir 👇.

 

30. React'te formlar nasıl oluşturulur?

React formları, HTML formlarına benzer. React'te durumlar, bileşenin durum özelliğinde bulunur. Bu durumlar, 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.