React-Grundlagen
JSX, Components, props, state, Ereignisse, bedingtes Rendering, Listen und keys
1Was ist JSX in React?
Was ist JSX in React?
Antwort
JSX ist eine JavaScript-Syntaxerweiterung, die es ermöglicht, HTML-ähnliches Markup direkt im JavaScript-Code zu schreiben. Es wird während der Kompilierung von Babel in React.createElement-Funktionsaufrufe umgewandelt. Die Verwendung von JSX macht den Code lesbarer und ermöglicht die Fehlererkennung zur Kompilierungszeit durch Typisierung, während es die Stärke von JavaScript mit einer vertrauten Syntax verbindet.
2Welche Syntax ist korrekt, um einen JavaScript-Ausdruck in JSX zu verwenden?
Welche Syntax ist korrekt, um einen JavaScript-Ausdruck in JSX zu verwenden?
Antwort
Einfache geschweifte Klammern ermöglichen die Integration jedes gültigen JavaScript-Ausdrucks in JSX, wie Variablen, Funktionen oder Berechnungen. Diese Syntax schafft eine klare Abgrenzung zwischen JSX-Markup und dynamischem JavaScript-Code. Doppelte geschweifte Klammern werden für Inline-Style-Objekte verwendet, Klammern zum Gruppieren von mehrzeiligem JSX und eckige Klammern für JavaScript-Arrays.
3Was ist der Hauptunterschied zwischen className in JSX und class in HTML?
Was ist der Hauptunterschied zwischen className in JSX und class in HTML?
Antwort
JSX verwendet className anstelle von class, weil class ein reserviertes Schlüsselwort in JavaScript zur Deklaration von ES6-Klassen ist. Da JSX in JavaScript umgewandelt wird, würde die Verwendung von class einen Syntaxkonflikt erzeugen. Ebenso wird for zu htmlFor und Events verwenden camelCase. Diese Konvention ermöglicht es JSX, gültiges JavaScript zu bleiben und gleichzeitig eine HTML-ähnliche Syntax zu bieten.
Wie schreibt man einen Kommentar in JSX-Code?
Was ist ein Functional Component in React?
+17 Interview-Fragen
Weitere React / Next.js-Interviewthemen
JavaScript-Grundlagen
React Hooks
Komponentenlebenszyklus
React Router
Zustandsverwaltung mit Context
Formulare & Controlled Components
Datenabruf & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Grundlagen
TypeScript mit React
Next.js Data Fetching
Next.js Server Actions
Routing & Navigation in Next.js
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance-Optimierung
Error Boundaries & Error Handling
Advanced React Patterns
Erweiterte Next.js-Funktionen
Next.js Deployment & Produktion
Architecture & Design Patterns
React Server Components
Next.js Internationalisierung
React Sicherheit & Best Practices
Meistere React / Next.js für dein nächstes Interview
Zugang zu allen Fragen, Flashcards, technischen Tests, Code-Review-Übungen und Interview-Simulatoren.
Kostenlos starten