Bilinmesi Gereken En İyi 50 React Röportaj Soruları ve Cevapları

ReactJS geliştiricileri çok rağbet görüyor ve bunun için iyi bir sebep var. Ancak işi alabilmek için çerçevedeki yeterliliğinizi kanıtlamanız gerekecek.

Aşağıdakiler, sık sorulan React geliştirme soruları ve bilmeniz gereken yanıtlarıdır. Temel bilgilerden daha ileri konulara kadar her şeyi içerir.

1. Tepki nedir?

React ücretsiz ve açık kaynak Tek sayfalı uygulamalara yönelik çıktı oluşturmak amacıyla bileşenleri kullanan, kullanıcı arayüzü geliştirmeye yönelik JavaScript kitaplığı. React, Facebook (Meta) tarafından geliştirilmiştir ve bir geliştirici topluluğu tarafından sürdürülmektedir.

2. React'in önemli özelliklerini listeleyin

React'in en önemli özellikleri şunlardır:

1. Kullanım kolaylığı
2. Hızlı geliştirme
3. bileşenlerin kullanımı
4. JSX
5. Sanal DOM
6. Yüksek performans
7. Tek yönlü veri bağlama

3. React'in proje deposu nerede?

React, şu adreste yaşayan bir mono-depodur. https://github.com/facebook/react. Mono-repository olması, daha kolay geliştirme ve yönetim için tüm kodunun ve diğer kaynaklarının aynı yerde saklanması anlamına gelir.

4. React'in mevcut kararlı sürümü nedir?

React'in 14 Haziran 2022 tarihli en güncel kararlı sürümü 18.2.0'dır.

5. React Native ve ReactJS arasındaki farkları belirtin

React ve ReactJS aynıdır, React Native ise React üzerine kuruludur. Farklılıkları nedeniyle, React, web uygulamaları için dinamik ve duyarlı kullanıcı arayüzleri oluşturmada kullanılırken, React Native, mobil uygulamalar olarak uygulamalar oluşturmak için tasarlanmıştır.

6. Bir Öğe ile Bileşen arasındaki fark nedir?

Bir React öğesi, bir DOM düğümünü temsil etmek için oluşturulmuş basit ve değişmez bir nesnedir. Değişmez olması, oluşturulduktan sonra DOM'a işlendiği için değiştirilemeyeceği anlamına gelir. Bir React bileşeni ise değişkendir ve işlendikten sonra JSX çıktısı üretir.

7. Bir Bileşeni nasıl yaratırsınız?

React'te bileşen oluşturmanın iki yolu vardır: 1.) İşlev bileşenleri ve 2.) sınıf bileşenleri. Adlarından da anlaşılacağı gibi, bir işlev bileşeni bir işlev bildirimi kullanılarak oluşturulurken, bir sınıf bileşeni bir sınıf bildirimi kullanılarak oluşturulur.

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. Bir React Bileşeninin 4 aşamasını listeleyin

Bir React bileşeni, yaşam döngüsünde aşağıdaki 4 aşamadan geçer:

1. İlk aşama – İlk aksesuarlarla varsayılan durumda bileşen yapısı
2. Montaj Aşaması – Bileşenin JSX oluşturması
3. Güncelleme Aşaması – Bileşen durumu değişiklikleri ve uygulamanın yeniden çizilmesi
4. Sökme Aşaması – DOM'den bileşen kaldırma

9. Üst düzey bir Bileşenin ne anlama geldiğini açıklayın

Daha yüksek dereceli bir bileşen (HOC), bileşenleri oluşturmak için bir React metodolojisidir. Ekstra işlevselliğe sahip yeni bir bileşen oluşturmak için mevcut bir bileşeni kullanır. Başka bir deyişle, bir HOC, bir bileşeni argüman olarak alan ve eklenen özelliklere sahip yeni bir bileşen döndüren bir işlevdir.

10. Kontrollü ve kontrolsüz bileşenler nelerdir?

Kontrollü bir bileşen, değerini proplar aracılığıyla alan ve herhangi bir değişikliği sisteme geri aramalar yoluyla bildiren bir React bileşenidir. Yöneten bir ana bileşen tarafından kontrol edilir. belirtmek, bildirmek ve değerleri kontrol edilen bileşene props olarak iletir. Kontrolsüz bir bileşen ise durumunu yönetir ve KARAR kullanma ref değerini almak için.

11. React'te Props nedir?

React'teki Props, özellikleri söylemenin basit bir yoludur ve bununla bir bileşenin özelliklerinden bahsediyorsunuz. Proplar, bir üst bileşenden bir veya daha fazla alt bileşene veri aktarmak için kullanılır ve alt bileşene salt okunurdur.

12. Props.children nedir?

Props.children özniteliği, açılış ve kapanış etiketine sahip bir bileşenin tüm içeriği hakkında bilgi içerir. Bu alt öğeler, geçerli bileşen içinde tanımlanan tüm öğelere atıfta bulunur ve bir, çok veya hiçbiri olabilir.

13. React'te sahne donanımlarını güncelleyebilir misiniz?

Hayır, React'teki aksesuarlar yukarıdan aşağıya ve değişmezdir. Bu, bir bileşenin beğendiği özellikleri çocuklarına gönderebileceği, ancak donanımlarını güncelleyemeyeceği anlamına gelir. Yalnızca ebeveyni, aksesuarlarını güncelleyebilir.

14. JSX nedir?

JSX, JavaScript XML anlamına gelir. Tepki kodunun içine HTML yazmayı mümkün kılan bir JavaScript sözdizimi uzantısıdır. Tarayıcı zaten JSX'i anlamıyor, bu nedenle React'in onu okunabilir HTML koduna dönüştürmesi gerekiyor.

15. Bir Bileşen ile Bir Öğe Arasındaki Fark Nedir?

Bir öğe, bir sanal DOM düğümünün durumsuz ve değişmez bir tanımıdır. Hem tür hem de özellik içerir, ancak bileşen gibi yöntemler yoktur. Bu yöntem eksikliği onu hızlandırır.

16. React'te durum nedir?

React'teki bir durum, o bileşenle ilgili bilgileri tutmak ve yönetmek için kullanılan bir bileşendeki yerleşik bir nesneyi ifade eder. Bir durum zamanla değişebilir ve bu nedenle o bileşenin yeniden oluşturulmasını tetikler. Durumu bileşenin yapıcı yönteminde tanımlamanız gerekir, aksi takdirde bileşen durumsuz hale gelir.

17. Durumsuz Bileşen nedir?

Durum bilgisi olmayan bir React bileşeninin durumu yoktur. Bu, durumunu ikisiyle de ayarlayamayacağınız anlamına gelir. this.setState() ne yöntem ne de render. Durum bilgisi olmayan bir bileşenin sahne donanımı olabilir.

18. React'te bir durumu nasıl güncellersiniz?

Bir bileşeni çağırarak bir bileşenin durumunu güncellersiniz. this.setState() yöntemi.

19. React'in Strict Modunu Açıklayın

React'in katı modu, bileşenler üzerinde daha derin düzeyde kontrolleri etkinleştirerek ve daha fazla uyarıyı vurgulayarak geliştiricinin uygulamadaki olası sorunları keşfetmesine yardımcı olan bir araçtır. Katı mod, yalnızca geliştirme modunda kullanılabilir.

20. Tepkide Yükselme Durumu Ne Anlama Geliyor?

Bu, alt bileşenlerin ortak bir durumu üstlerinden paylaşmasına izin vermek anlamına gelir, çünkü bu, her bir alt bileşenin ortak durumu ayrı ayrı yönetmesinden daha kolay yönetilmesini sağlar.

21. React'te Verileri Nasıl Geçirirsiniz?

Props ve callback'leri kullanarak React'te veri iletirsiniz. React'in donanımları tek yönlüdür ve özelliklerin yalnızca ana bileşenlerden çocuklarına geçmesine izin verir. Bir alt bileşenden bir üst öğeye veri aktarmak için bir geri arama işlevi kullanmanız gerekir.

22. Tanımla Akı React'te

Flux, bir uygulamadaki veri akışını yönlendirmek için tek yönlü bir kavramdır. Tek yönlü olmak, verilerin yalnızca ebeveynden alt bileşenlere geçebileceği anlamına gelir. Flux, uygulama başına birden çok veri deposu da içerebilir.

23. Tanımla Redux React'te

Redux, bir uygulamadaki karmaşık durumları yönetmek için yararlı bir açık kaynaklı JavaScript kitaplığıdır. Bağımsızdır ve Angular gibi diğer çerçevelerde kullanılabilir. Flux'tan farklı olarak Redux, bir uygulamanın durum yönetimini merkezileştirerek karmaşık UI'ler oluşturmayı kolaylaştırır.

24. Redux'u Ne Zaman Kullanmalısınız?

Tüm uygulamaların Redux'a ihtiyacı yoktur. Ancak aşağıdaki koşullarda yararlıdır:

1. Uygulamanızda çok miktarda uygulama durumu olduğunda
2. Uygulamanızın mantığı karmaşık olduğunda
3. Uygulamanızın büyük bir kod tabanı olduğunda
4. Uygulamayı sık sık güncellemeniz gerektiğinde
5. Uygulama üzerinde çalışan çok sayıda kişi olduğunda

25. Redux ve Flux Arasındaki Büyük Fark Nedir?

İkisi arasındaki en büyük fark, Redux'un tüm uygulama verilerini tek bir mağazadan yönetmesi ve Flux altında birden fazla mağazaya sahip olmanızdır.

26. Redux Bileşenlerini Listeleyin

Redux'un 4 ana bölümü vardır:

1. mağaza – Uygulama durumunu burada saklarsınız.
2. Action – Bunlar, uygulamanın Redux mağazasına veri göndermesine neden olan olaylardır.
3. redüktör – Bu, geçerli uygulama durumunu ve bir eylemi bağımsız değişken olarak kabul eden ve ardından sonuç olarak yeni bir durum döndüren bir işlevdir.
4. Middleware – Bu özellik, bir geliştiricinin, bir bileşendeki tüm eylemleri, indirgeme işlevine ulaşmadan önce yakalamasını sağlar.

27. React Hooks nedir?

React kancaları, durum verileri ve işleme güncellemeleri gibi farklı React özelliklerine erişmenize izin veren işlev bileşenlerinin bir özelliğidir. React 16.8'de tanıtıldı.

28. React'teki Hook'ların türünü listeleyin

React'te useState, useEffect ve useContext gibi temel kancalardan, useCallback, useReducer, useMemo, useRef vb. gibi ek kancalara kadar 15'ten fazla kanca vardır.

29. Fragmanlar nedir?

Bir React parçası, bir bileşendeki birden çok alt öğeyi DOM'a eklemeden gruplandırmanın uygun bir yoludur. Etiketi aşağıdakileri kullanarak tanımlamanız yeterlidir:

<>

or

ve içine istediğiniz tüm alt öğeleri yükleyin. Tek fark, kısa sürüm <> anahtarları ve nitelikleri kabul etmezken, uzun sürüm kabul ediyor.

30. React-dom paketinin ana yöntemlerini listeleyin

Bunlar, çocukları harici bir DOM'ye dönüştürmek için createPortal() ve güncellemeleri temizlemek için flushSync()'tir. React 18'den beri createRoot() ve hidratRoot() ile değiştirilen render() ve hidrat() yöntemleri de vardır.

31. Tepki Anahtarları nedir?

Anahtarlar, listeleri yönetmek için en iyi şekilde kullanılan benzersiz tanımlayıcılardır. Anahtarlar, bir listedeki tek tek öğeleri tanımlamayı ve her bir öğenin ne zaman güncellendiğini, silindiğini veya herhangi bir şekilde değiştirildiğini bilmeyi kolaylaştırır.

32. React Keys Neden Önemlidir?

Anahtarlar, gerçek DOM'nin verimli bir şekilde oluşturulmasına yardımcı olduğu için React'te önemlidir. React iyidir, çünkü bir olaydan sonra hangi bileşenleri yeniden oluşturduğunu en aza indirmeye çalışır ve bir listedeki anahtarları kullanmak, React'in tüm listeleri yeniden oluşturmasını engeller, bu da büyük listelerde sorun olabilir.

33. React'te Olay Nedir?

Olay, bir uygulamadaki kullanıcıdan veya sistemden gelen herhangi bir eylemdir. Bir olay, bir fare tıklamasından veya mobil cihazlara dokunmadan bir pencerenin yeniden boyutlandırılmasına, tuşa basılmasına, sürüklenmesine, odaklanmasına vb. kadar değişebilir.

34. Ne olduğunu açıklayın Sentetik Olay Anlamına geliyor

Sentetik bir olay, bir tarayıcının yerel olaylarının etrafındaki bir sarmalayıcıdır ve sorun, farklı tarayıcıların olaylarını farklı şekilde adlandırmasıdır. React, tüm farklı tarayıcılar için birden fazla uygulama ve yöntem oluşturma sorununu önlemek için sentetik olayları kullanır. Bu şekilde React, tüm farklı tarayıcı olayları için birleşik bir API olarak ortak adlar tutar.

35. Web Paketi Nedir?

Webpack, JavaScript ve CSS dosyalarını birleştirmek ve küçültmek için kullanılan bir modül paketleme sistemidir. Node.js üzerine kuruludur ve çok sayıda dosyayla veya resimler ve yazı tipleri gibi kod dışı varlıklarla çalışırken yararlıdır.

36. Create-react-app Nedir?

Create-react-app, Node.js ortamınızda tek sayfalık bir React uygulaması oluşturmanıza yardımcı olan bir araçtır. Temel bir uygulamayı başlatmak için ihtiyacınız olan tüm dosya ve klasörleri oluşturur ve oradan alırsınız. Düğüm sürümü 14.0.0'dan yukarı ve sürümden npm gerektirir. 5.6.

Kullanımı basittir:

npx oluştur-tepki-app myNewApp

cd benimYeni Uygulamam

npm başlangıç

37. React ile Sunucu Tarafını Render Edebilir Misiniz?

Evet, yapabilirsiniz ancak büyük projeler için yoğun kaynak gerektirebilir. Sunucu tarafı oluşturma, kullanıcı deneyimini iyileştirdiği için faydalıdır ve SEO. Bir Node.js ortamına, Webpack gibi bir paketleyiciye ve şunun gibi bir çerçeveye ihtiyacınız olacak: Next.js ve Remix React uygulamalarını çalışma zamanında işlemek için. Yoğun kaynak kullanımına çözüm, statik site oluşturucuNext.js tabanlı gibi Gatsby.

38. Ok İşlevinin Ne Yaptığını Açıklayın

Ok işlevi, işlevleri tanımlamanın daha kısa bir yoludur. Aşağıdakilerin yerini alan bir ES6 kısayoludur:

= işlev() ile ()=>.

Örneğin:

test = işlev(){

dönüş “Bu bir testtir”;

}

sonra olur:

deneme = () => {

dönüş “Bu bir Testtir”;

}

veya tek satırlık ifadeler için:

test = () => “Bu bir Testtir”;

39. a nedir React Yönlendirici?

React yönlendirici, bir React uygulamasında yönlendirme işlevi sağlayan bir kitaplıktır. Büyük veya karmaşık projeler için çok yararlı olabilecek zengin gezinme bileşenlerini dahil etmeyi ve kullanmayı kolaylaştırır.

40. React Router Kullanmanın Başlıca Avantajları Nelerdir?

Uygulamanız için farklı url yolları oluşturur ve window.location değerleri ve bir geçmiş nesnesi sağlar.

41. ComponentWillUnmount() nedir?

Bu, React bileşeni yok etmek üzereyken çağrılan bir bileşen yöntemidir. İşleri temizlemek, zamanlayıcıları temizlemek, ağ isteklerini iptal etmek ve diğer önemli başlatma sorunlarını çözmek için güzel bir yerdir.

42. Yapıcı() nedir?

Yapıcı, bileşenin başlatılması sırasında çağrılan bileşenin yöntemidir. Genellikle yerel durumları başlatmak ve olay işleyici yöntemlerini bağlamak için kullanılır.

43. Sanal DOM Nedir?

React'in sanal DOM'si, gerçek HTML belgesinin DOM'sinin hafif bir kopyasıdır. Gerçek DOM üzerindeki değişikliklerin etkin yönetimi ve güncellenmesi için kullanılır.

44. Sanal DOM'un Gerçek DOM'a Göre Avantajları Nelerdir?

Sanal DOM hafiftir ve gerçek DOM'den daha hızlı oluşturulur ve bu, önce sanal DOM'de oluşturmayı ve yalnızca ihtiyaç olduğunda gerçek DOM'de değişiklik yapmayı daha verimli hale getirir. Gerçek DOM üzerindeki her düğümün sanal DOM üzerinde karşılık gelen bir bileşeni vardır ve oluşturma işleminden sonra sanal bir bileşende değişiklik olduğunda, React tam olarak hangi gerçek HTML düğümünün güncelleneceğini veya silineceğini bilir.

45. Terimi açıklayın Mutabakat React'te

Mutabakat, React'in gerçek DOM'yi yalnızca gerektiğinde, sanal DOM'nin güncellenmiş sürümlerini farklılaştırarak kontrol ederek ve yalnızca gerçek DOM'de değişen tam düğümleri güncelleyerek güncelleme yöntemidir.

46. Terimi açıklayın Profiler React'te

Profiler, bir uygulamanın kaç kez işlendiğini ve her bir bileşenin ne kadar sürede işlendiğini ölçerek bir uygulamayı optimize etmeye yardımcı olan bir React aracıdır. Bu, geliştiricinin uygulamanın optimizasyon gerektirebilecek bölümlerini belirlemesine yardımcı olur.

47. Terimi açıklayın bağlam React'te

Bağlam, verileri props kullanarak her bir yuvalama düzeyinden geçirmek zorunda kalmadan birçok düzeyde React bileşenleri arasında veri aktarma yöntemidir. Tema bilgileri ve kullanıcı verileri gibi sürekli güncelleme gerektirmeyen birçok bileşenle kolay veri paylaşımı için en iyi şekilde kullanılır. Dezavantajı, bileşenlerin yeniden kullanımını zorlaştırabilmesidir.

48. Terimi açıklayın Montaj React'te

React'te montaj, bir bileşeni DOM'a düğüm olarak ekleme işlemidir. Kaldırma işlemi bunun tam tersidir.

49. Terimi açıklayın rendering React'te

Oluşturma, bir bileşeni çizme işlemidir. Genellikle bileşenin durumu değiştiğinde ve React'in kullanıcı arayüzünü yeniden çizmesi gerektiğinde ortaya çıkar. Oluşturma sırasında bir bileşen yeniden çizilirse, alt bileşenleri de yeniden çizilir.

50. Terimi açıklayın Hata Sınırı React'te

Hata sınırı, alt bileşenlerinden JavaScript hatalarını yakalayan, hataları günlüğe kaydeden ve çöken düğümlerin yerine bir geri dönüş kullanıcı arayüzü görüntüleyen bir React bileşenini ifade eder. React 16'da hata sınırları getirildi.

Sonuç

Bilinmesi gereken en iyi 50 React mülakat sorusunun bu listesinin sonuna geldik ve şimdiye kadar neler bekleyebileceğiniz konusunda iyi bir fikre sahip olduğunuzu umarız.

Ayrıca hiçbir şeyin aynı kalmayacağını ve görüşmenizin herhangi bir yöne gidebileceğini de unutmamalısınız. Bu nedenle, çalışmaya devam etmeli ve güncel kalmalısınız.