# React-Grundlagen (React / Next.js)

> JSX, Components, props, state, Ereignisse, bedingtes Rendering, Listen und keys

- 20 Interview-Fragen
- Junior
- [Interview-Fragen: React / Next.js](https://sharpskill.dev/de/technologies/react-next/interviewfragen.md)

## 1. 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.

## 2. 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.

## 3. 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.

## 17 weitere Fragen verfügbar

- Wie schreibt man einen Kommentar in JSX-Code?
- Was ist ein Functional Component in React?

Kostenlos registrieren: https://sharpskill.dev/de/login

## Weitere React / Next.js-Interviewthemen

- [JavaScript-Grundlagen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/javascript-essentials.md): 25 Fragen, Junior
- [React Hooks](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-hooks.md): 22 Fragen, Junior
- [Komponentenlebenszyklus](https://sharpskill.dev/de/technologies/react-next/interviewfragen/component-lifecycle.md): 18 Fragen, Junior
- [React Router](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-router.md): 20 Fragen, Junior
- [Zustandsverwaltung mit Context](https://sharpskill.dev/de/technologies/react-next/interviewfragen/state-management-context.md): 18 Fragen, Junior
- [Formulare & Controlled Components](https://sharpskill.dev/de/technologies/react-next/interviewfragen/forms-controlled-components.md): 20 Fragen, Mid-Level
- [Datenabruf & API](https://sharpskill.dev/de/technologies/react-next/interviewfragen/fetching-data-api.md): 20 Fragen, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-query-tanstack.md): 20 Fragen, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/de/technologies/react-next/interviewfragen/styling-css-in-js.md): 18 Fragen, Mid-Level
- [Next.js Grundlagen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-fundamentals.md): 25 Fragen, Mid-Level
- [TypeScript mit React](https://sharpskill.dev/de/technologies/react-next/interviewfragen/typescript-react.md): 20 Fragen, Mid-Level
- [Next.js Data Fetching](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-data-fetching.md): 24 Fragen, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-server-actions.md): 20 Fragen, Mid-Level
- [Routing & Navigation in Next.js](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-routing-navigation.md): 22 Fragen, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-api-routes.md): 20 Fragen, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-metadata-seo.md): 18 Fragen, Mid-Level
- [Next.js Middleware & Auth](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-middleware-auth.md): 22 Fragen, Mid-Level
- [React Testing](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-testing.md): 20 Fragen, Mid-Level
- [Zustand State Management](https://sharpskill.dev/de/technologies/react-next/interviewfragen/zustand-state-management.md): 18 Fragen, Mid-Level
- [React Performance-Optimierung](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-performance-optimization.md): 22 Fragen, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-error-boundaries.md): 18 Fragen, Senior
- [Advanced React Patterns](https://sharpskill.dev/de/technologies/react-next/interviewfragen/advanced-react-patterns.md): 20 Fragen, Senior
- [Erweiterte Next.js-Funktionen](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-advanced-features.md): 24 Fragen, Senior
- [Next.js Deployment & Produktion](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-deployment-production.md): 20 Fragen, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-architecture-patterns.md): 22 Fragen, Senior
- [React Server Components](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-server-components.md): 26 Fragen, Senior
- [Next.js Internationalisierung](https://sharpskill.dev/de/technologies/react-next/interviewfragen/nextjs-internationalization.md): 20 Fragen, Senior
- [React Sicherheit & Best Practices](https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-security-best-practices.md): 22 Fragen, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/de/technologies/react-next/interviewfragen/react-fundamentals