React, modern web uygulamaları geliştirmek için en popüler JavaScript kütüphanelerinden biridir. Özellikle frontend developer pozisyonları için yapılan mülakatlarda React bilgisi sıklıkla sorgulanır. Bu yazıda, React mülakat soruları ve örnek cevaplarıyla birlikte, hem junior hem de senior seviyelerinde karşılaşabileceğiniz 10 temel soruyu derledik. İşte React mülakatlarında sizi bir adım öne çıkaracak bilgiler!

1. React Nedir ve Avantajları Nelerdir?

Bu soru, özellikle junior seviyesindeki adaylar için temel bir başlangıç noktasıdır. React hakkında bilgi sahibi olduğunuzu göstermek için şu noktalara değinebilirsiniz:

• React, Facebook tarafından geliştirilen açık kaynaklı bir JavaScript kütüphanesidir.
• Component tabanlı yapısı sayesinde kod tekrarını azaltır ve uygulama geliştirmeyi hızlandırır.
• Virtual DOM kullanarak performans optimizasyonu sağlar. Virtual DOM, gerçek DOM üzerinde yapılacak değişiklikleri önce sanal bir kopyada uygular ve sadece gerekli değişiklikleri gerçek DOM'a yansıtır. Bu, performansı önemli ölçüde artırır.
• Geniş topluluk desteği ve zengin kaynaklar sunar. React, dünya çapında milyonlarca geliştirici tarafından kullanıldığı için sorunlarınızı çözmek için bolca kaynak bulabilirsiniz.

2. JSX Nedir ve Nasıl Çalışır?

JSX, React'in en temel özelliklerinden biridir. Bu soru, React'in nasıl çalıştığını anladığınızı göstermek için önemlidir:

• JSX, JavaScript XML'in kısaltmasıdır ve HTML benzeri bir sözdizimi kullanarak React component'lerini oluşturmanızı sağlar.
• JSX, tarayıcı tarafından doğrudan anlaşılamaz. Bu nedenle, Babel gibi bir transpiler kullanılarak JavaScript'e dönüştürülür.

Örnek JSX kodu:

const element = <h1>Merhaba, Techcareer.net!</h1>;

JSX, JavaScript'in tüm gücünü kullanmanıza izin verir. Örneğin, JavaScript ifadelerini süslü parantezler içinde kullanabilirsiniz:

const name = "Alperen";
const element = <h1>Merhaba, {name}!</h1>;

3. State ve Props Arasındaki Fark Nedir?

React'te state ve props, component'ler arasında veri aktarımı için kullanılan iki temel kavramdır:

• State: Bir component'in iç durumunu yönetir. Component içinde değiştirilebilir. Örneğin, bir kullanıcının formdaki girdilerini takip etmek için state kullanılır.
• Props: Bir component'e dışarıdan iletilen verilerdir. Salt okunurdur (immutable) ve değiştirilemez. Örneğin, bir component'e başka bir component'ten veri aktarmak için props kullanılır.

Örnek:

jsx
Copy
function Welcome(props) {
return <h1>Merhaba, {props.name}!</h1>;
}

4. React'te Lifecycle Metotları Nelerdir?

React component'lerinin yaşam döngüsü, özellikle senior seviyesindeki mülakatlarda sıkça sorgulanır. Temel lifecycle metotları şunlardır:

• componentDidMount: Component DOM'a eklendiğinde çalışır. Örneğin, API çağrıları bu metot içinde yapılabilir.
• componentDidUpdate: Component güncellendiğinde çalışır. State veya props değiştiğinde bu metot tetiklenir.
• componentWillUnmount: Component DOM'dan kaldırılmadan önce çalışır. Örneğin, abonelikleri temizlemek için kullanılır.
• useEffect Hook: Functional component'lerde lifecycle davranışını yönetmek için kullanılır. 

Örneğin:

useEffect(() => {
console.log("Component mount edildi!");
return () => {
  console.log("Component unmount edildi!");
};
}, []);

5. React Hooks Nedir ve Nasıl Kullanılır?

React Hooks, functional component'lerde state ve lifecycle özelliklerini kullanmanızı sağlar. En yaygın kullanılan hook'lar:
useState: State yönetimi için kullanılır. 

Örneğin:

const [count, setCount] = useState(0);

• useEffect: Side effect'leri yönetmek için kullanılır. Örneğin, API çağrıları veya DOM manipülasyonları.
• useContext: Context API ile global state yönetimi sağlar. 
   

Örneğin:

const theme = useContext(ThemeContext); 

6. Redux Nedir ve Ne Zaman Kullanılır?

Redux, React uygulamalarında state yönetimini kolaylaştıran bir kütüphanedir. Bu soru, genellikle senior seviyesindeki adaylara yöneltilir:

• Redux, uygulama state'ini merkezi bir store'da yönetir.
• Actions, reducers ve store gibi temel kavramlara hakim olmanız beklenir.
• Redux, büyük ölçekli uygulamalarda state yönetimini kolaylaştırır. Örneğin, bir e-ticaret uygulamasında sepetteki ürünleri yönetmek için Redux kullanılabilir.

7. React'te Key Prop'unun Önemi Nedir?

React'te listeleri render ederken key prop'u kullanılır. Bu, React'in hangi elementlerin değiştiğini, eklendiğini veya kaldırıldığını anlamasını sağlar. Key'ler, her bir element için benzersiz (unique) olmalıdır.

Örnek:

const listItems = items.map((item) => (
<li key={item.id}>{item.name}</li>
));
 

8. React'te Performans Optimizasyonu Nasıl Yapılır?

React uygulamalarında performans optimizasyonu, senior seviyesindeki adaylar için kritik bir konudur:

• React.memo: Component'lerin gereksiz render'larını önler.
• useMemo ve useCallback: Hesaplamaları ve fonksiyonları önbelleğe alır.
• Lazy Loading: Component'leri ihtiyaç duyulduğunda yükler. 

Örneğin:

const LazyComponent = React.lazy(() => import('./LazyComponent')); 

9. Context API Nedir ve Nasıl Kullanılır?

Context API, React'te global state yönetimi için kullanılan bir özelliktir.

• useContext Hook: Context API ile state yönetimini kolaylaştırır.

Örnek:
 

const ThemeContext = React.createContext('light');
function App() {
return (
  <ThemeContext.Provider value="dark">
    <Toolbar />
  </ThemeContext.Provider>
);
}

10. React Router Nedir ve Nasıl Kullanılır?

React Router, React uygulamalarında sayfa yönlendirmelerini yönetmek için kullanılan bir kütüphanedir.BrowserRouter, Route, Switch ve Link gibi temel component'leri öğrenmek önemlidir.

Örnek:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
 return (
   <Router>
     <Switch>
       <Route path="/about" component={About} />
       <Route path="/" component={Home} />
     </Switch>
   </Router>
 );
}

React mülakat soruları, hem temel bilgilerinizi hem de derinlemesine anlayışınızı test etmek için tasarlanır. Bu rehberde, junior ve senior seviyelerinde karşılaşabileceğiniz 10 temel React mülakat sorusu ve örnek cevaplarını paylaştık. Eğer bu sorulara hazırlanıyorsanız, Techcareer.net'in diğer kaynaklarına da göz atarak kendinizi daha da geliştirebilirsiniz.
 
React mülakat sorularına hazırlanırken kendini daha da geliştirmek ve sektördeki diğer profesyonellerle bağlantı kurmak mı istiyorsun? Techcareer.net'in özenle hazırladığı mülakat soruları rehberleri ve kapsamlı kaynaklarıyla bir sonraki mülakatında bir adım önde ol! Ayrıca, Slack topluluğumuza katılarak binlerce yazılımcı ve teknoloji meraklısıyla bilgi alışverişinde bulunabilir, kariyerine yön verecek değerli bağlantılar kurabilirsin. Hemen kayıt ol ve Techcareer.net'in sunduğu fırsatlarla kariyerini bir üst seviyeye taşı!