Interview Q&A / React

1. How do you use JavaScript expressions inside JSX, and what cannot go inside the braces?

   Curly braces accept any JavaScript expression: a variable, a function call, a ternary. Statements such as if, for or switch are not expressions, so they must live outside the JSX.

   BeginnerQuick answer1 min read
2. What is JSX, and how does the browser run it?

   JSX is a syntax that lets you write markup inside JavaScript. A build tool such as Babel, SWC or esbuild compiles each tag into a plain function call that returns a description of the UI. Browsers never see JSX.

   BeginnerQuick answer1 min read
3. Why can a React component not return two sibling elements without a wrapper?

   A function can return only one value, and JSX tags compile to one call each. Wrap siblings in a parent element or a Fragment (<>...</>), which groups them without adding an extra DOM node.

   BeginnerQuick answer1 min read
4. Why does {count && <Badge />} show 0 on the screen when count is zero?

   The && operator returns the left side when it is falsy, and React renders the number 0. Convert to a boolean first: {count > 0 && <Badge />}, or use a ternary.

   BeginnerQuick answer1 min read
5. Why does JSX use className and htmlFor instead of class and for?

   JSX compiles to JavaScript, where class and for are reserved words. React therefore uses the DOM property names className and htmlFor. Most other attributes are written in camelCase too, such as onClick and tabIndex.

   BeginnerQuick answer1 min read
6. Why must React component names start with a capital letter?

   JSX treats lowercase tags like div as built-in DOM elements and capitalised names like Card as variables that refer to components. A lowercase component name gets rendered as an unknown HTML tag instead.

   BeginnerQuick answer1 min read