React Fundamentals
JSX, components, props, state, events, conditional rendering, lists & keys
1What is JSX in React?
What is JSX in React?
Answer
JSX is a JavaScript syntax extension that allows writing markup resembling HTML directly in JavaScript code. It is transformed into React.createElement function calls by Babel during compilation. Using JSX makes code more readable and enables error detection at compile time through typing, while combining JavaScript's power with familiar syntax.
2Which syntax is correct for using a JavaScript expression in JSX?
Which syntax is correct for using a JavaScript expression in JSX?
Answer
Single curly braces allow integrating any valid JavaScript expression into JSX, such as variables, functions, or calculations. This syntax creates a clear boundary between JSX markup and dynamic JavaScript code. Double braces are used for inline style objects, parentheses for grouping multiline JSX, and square brackets for JavaScript arrays.
3What is the main difference between className in JSX and class in HTML?
What is the main difference between className in JSX and class in HTML?
Answer
JSX uses className instead of class because class is a reserved keyword in JavaScript for declaring ES6 classes. Since JSX is transformed into JavaScript, using class would create a syntax conflict. Similarly, for becomes htmlFor, and events use camelCase. This convention allows JSX to remain valid JavaScript while offering HTML-like syntax.
How to write a comment in JSX code?
What is a functional component in React?
+17 interview questions
Other React / Next.js interview topics
JavaScript Essentials
React Hooks
Component Lifecycle
React Router
State Management with Context
Forms & Controlled Components
Data Fetching & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Fundamentals
TypeScript with React
Next.js Data Fetching
Next.js Server Actions
Next.js Routing & Navigation
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance Optimization
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Advanced Features
Next.js Deployment & Production
Architecture & Design Patterns
React Server Components
Next.js Internationalization
React Security & Best Practices
Master React / Next.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free