# React Fundamentals (React / Next.js)

> JSX, components, props, state, events, conditional rendering, lists & keys

- 20 interview questions
- Junior
- [Interview Questions: React / Next.js](https://sharpskill.dev/en/technologies/react-next/interview-questions.md)

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

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

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

## 17 more questions available

- How to write a comment in JSX code?
- What is a functional component in React?

Sign up for free: https://sharpskill.dev/en/login

## Other React / Next.js interview topics

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

---

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