Kapitel 18: Interviewfragen

In diesem Kapitel lernen wir häufige React-Interviewfragen für Anfänger.

---

18.1 Grundlegende Konzepte

📝 Frage 1: Was ist React?

Antwort: React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, die von Facebook (Meta) entwickelt wurde.

Wichtigste Punkte:

• Komponenten-basiert
• Virtuelles DOM
• Einweg-Datenfluss (One-Way Data Binding)

---

📝 Frage 2: Was ist JSX?

Antwort: JSX (JavaScript XML) ist eine Syntaxerweiterung, die es erlaubt, HTML-ähnlichen Code in JavaScript zu schreiben.

Beispiel:

// JSX
const element = <h1>Hallo Welt!</h1>;

// Nach Kompilierung
const element = React.createElement('h1', null, 'Hallo Welt!');

---

📝 Frage 3: Was ist der Unterschied zwischen einem Funktions- und einem Klassenkomponente?

Merkmal	Funktionskomponente	Klassenkomponente
Syntax	Funktion	Klasse (erweitert Component)
State	useState Hook	this.state
Lifecycle	useEffect Hook	Lifecycle-Methoden
Empfehlung	✅ Ja (modern)	❌ Nein (veraltet)

Beispiel Funktionskomponente:

function Welcome() {
  return <h1>Hallo!</h1>;
}

---

18.2 Core Syntax

📝 Frage 4: Was ist useState?

Antwort:useState ist ein Hook, der es Funktionskomponenten erlaubt, State zu verwalten.

Syntax:

const [state, setState] = useState(initialValue);

Beispiel:

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

---

📝 Frage 5: Was ist useEffect?

Antwort:useEffect ist ein Hook für Seiteneffekte (Daten abrufen, DOM-Manipulation, Timer).

Syntax:

useEffect(() => {
  // Effekt-Logik
  
  return () => {
    // Cleanup-Logik
  };
}, [dependencies]); // Abhängigkeiten

Beispiel:

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick...');
  }, 1000);
  
  return () => clearInterval(timer); // Cleanup
}, []);

---

📝 Frage 6: Was ist der Unterschied zwischen props und state?

Merkmal	props	state
Datenfluss	Von Eltern zu Kind	Innerhalb der Komponente
Veränderlichkeit	❌ Unveränderlich (read-only)	✅ Veränderlich (setState)
Verwendung	Datenübergabe	Datenverwaltung

Beispiel:

// props (Eltern zu Kind)
function Welcome({ name }) {
  return <h1>Hallo {name}!</h1>;
}

// state (innerhalb der Komponente)
function Counter() {
  const [count, setCount] = useState(0);
  return <p>{count}</p>;
}

---

18.3 Komponenten-Kommunikation

📝 Frage 7: Wie gibt man Daten von Eltern zu Kind weiter?

Antwort: Verwenden Sie props.

Beispiel:

// Elternkomponente
function App() {
  return <Child name="Max" />;
}

// Kindkomponente
function Child({ name }) {
  return <p>Hallo {name}!</p>;
}

---

📝 Frage 8: Wie gibt man Daten von Kind zu Eltern weiter?

Antwort: Verwenden Sie eine Callback-Funktion als Prop.

Beispiel:

// Elternkomponente
function App() {
  const handleData = (data) => {
    console.log('Vom Kind erhalten:', data);
  };
  
  return <Child onSend={handleData} />;
}

// Kindkomponente
function Child({ onSend }) {
  return <button onClick={() => onSend('Hallo!')}>Senden</button>;
}

---

📝 Frage 9: Was ist useContext?

Antwort:useContext ist ein Hook, der es erlaubt, Daten ohne Props-Drilling an tief verschachtelte Komponenten weiterzugeben.

Beispiel:

// Context erstellen
const UserContext = createContext();

// Provider
function App() {
  return (
    <UserContext.Provider value={{ name: 'Max' }}>
      <Header />
    </UserContext.Provider>
  );
}

// Consumer
function Header() {
  const user = useContext(UserContext);
  return <h1>Willkommen {user.name}!</h1>;
}

---

18.4 Fortgeschrittene Themen

📝 Frage 10: Was ist der Unterschied zwischen useMemo und useCallback?

Merkmal	useMemo	useCallback
Zweck	Wert cachen	Funktion cachen
Rückgabe	Memorisierten Wert	Memorisierten Funktion

Beispiel:

// useMemo (Wert cachen)
const doubled = useMemo(() => count * 2, [count]);

// useCallback (Funktion cachen)
const handleClick = useCallback(() => {
  setCount(count + 1);
}, [count]);

---

📝 Frage 11: Was ist React.memo?

Antwort:React.memo ist eine Higher-Order Component (HOC), die unnötige Renderings verhindert.

Beispiel:

const Button = memo(function Button({ label, onClick }) {
  console.log('Button gerendert');
  return <button onClick={onClick}>{label}</button>;
});

---

📝 Frage 12: Was ist der Unterschied zwischen Controlled und Uncontrolled Components?

Merkmal	Controlled	Uncontrolled
Datenquelle	React State	DOM
Formularwert	value + onChange	ref
Empfehlung	✅ Ja	⚠️ Nur selten

Beispiel Controlled:

function App() {
  const [value, setValue] = useState('');
  
  return (
    <input 
      value={value} 
      onChange={(e) => setValue(e.target.value)} 
    />
  );
}

---

18.5 Performance-Optimierung

📝 Frage 13: Wie optimiert man React-Anwendungen?

Antwort:

1. ✅ React.memo für Komponenten
2. ✅ useMemo für teure Berechnungen
3. ✅ useCallback für Funktions-Referenzen
4. ✅ Code-Splitting (React.lazy, Suspense)
5. ✅ Listen virtuallisieren (react-window)

---

📝 Frage 14: Was ist Lazy Loading?

Antwort: Lazy Loading verzögert das Laden von Komponenten, bis sie benötigt werden.

Beispiel:

const About = lazy(() => import('./About'));

function App() {
  return (
    <Suspense fallback={<p>Lädt...</p>}>
      <About />
    </Suspense>
  );
}

---

18.6 Zustandsverwaltung

📝 Frage 15: Was ist Redux?

Antwort: Redux ist eine Zustandsverwaltungsbibliothek für JavaScript-Anwendungen.

Kernkonzepte:

1. Store: Zentraler Zustand
2. Action: Beschreibt, was passieren soll
3. Reducer: Ändert den Zustand basierend auf Action

Modern: Verwenden Sie Redux Toolkit (vereinfacht).

---

📝 Frage 16: Was ist der Unterschied zwischen Context API und Redux?

Merkmal	Context API	Redux
Komplexität	Einfach	Komplex
Geeignet für	Kleine bis mittlere Apps	Große Apps
DevTools	❌ Keine	✅ Hervorragend
Boilerplate	✅ Wenig	❌ Viel (aber RTK verbessert)

---

18.7 Routing

📝 Frage 17: Was ist React Router?

Antwort: React Router ist eine Bibliothek für Client-Side-Routing in React-Anwendungen.

Wichtigste Komponenten:

• <BrowserRouter>: Router-Container
• <Routes>: Container für Routen
• <Route>: Einzelne Route
• <Link>: Navigation (ohne Seitenaktualisierung)
• <NavLink>: Navigation mit aktivem Zustand

---

📝 Frage 18: Was ist der Unterschied zwischen <Link> und <a>?

Merkmal	<Link>	<a>
Seitenaktualisierung	❌ Nein (SPA)	✅ Ja
Geeignet für	React-Routing	Externe Links
Performance	✅ Besser	❌ Schlechter

---

18.8 Best Practices

📝 Frage 19: Was sind Best Practices in React?

Antwort:

1. ✅ Verwenden Sie Funktionskomponenten und Hooks
2. ✅ Halten Sie Komponenten klein und fokussiert
3. ✅ Verwenden Sie Destrukturierung für props
4. ✅ Extrahieren Sie wiederverwendbare Logik in Custom Hooks
5. ✅ Verwenden Sie Fragment (<>...</>) statt unnötiger <div> Wrapper
6. ✅ Schreiben Sie bedeutungsvolle Namen für Komponenten und Variablen

---

📝 Frage 20: Wie strukturiert man ein React-Projekt?

Empfohlene Struktur:

src/
├── components/       # Wiederverwendbare Komponenten
├── pages/           # Seitenkomponenten
├── hooks/           # Benutzerdefinierte Hooks
├── context/          # Context Provider
├── services/         # API-Aufrufe
├── utils/            # Hilfsfunktionen
├── styles/           # CSS-Dateien
└── App.jsx          # Hauptkomponente

---

📝 Zusammenfassung

In diesem Kapitel haben wir gelernt:

• ✅ Häufige React-Interviewfragen für Anfänger
• ✅ Grundlegende Konzepte (React, JSX, Komponenten)
• ✅ Core Syntax (useState, useEffect, props, state)
• ✅ Komponenten-Kommunikation (props, callbacks, useContext)
• ✅ Fortgeschrittene Themen (useMemo, useCallback, React.memo)
• ✅ Performance-Optimierung (memo, Lazy Loading)
• ✅ Zustandsverwaltung (Redux, Context API)
• ✅ Routing (React Router)
• ✅ Best Practices

---

🎯 Nächste Schritte

Im nächsten Kapitel werden wir lernen:

• React Ökosystem (UI-Bibliotheken, Tools)
• TypeScript mit React
• Mobile Entwicklung (React Native)

Bereit für das Ökosystem? → Kapitel 19: React Ökosystem