Which of the following best describes how JSX elements relate to components?

Which of the following best describes how JSX elements relate to components?

• A. JSX elements can represent either HTML-like elements or component instances
• B. They must always be component instances
• C. They must always be HTML elements
• D. They cannot be composed

Answer: (A)

JSX elements describe what to render, and they can refer to either a DOM-like element or a component instance. In React, JSX is transformed into React.createElement calls. A tag that starts with a lowercase letter, like div or span, becomes a real HTML element in the DOM. A tag that starts with an uppercase letter, like MyButton, refers to a component (a function or class) that returns elements, so it creates a component instance. This dual nature lets you compose UIs by nesting components inside other components using JSX, while still rendering standard HTML elements when you need them. For example, <div className="card" /> renders a div in the DOM, whereas <Greeting name="Alex" /> renders the output of the Greeting component. The ability to mix both within the same JSX tree is why this description is the best fit.

JSX elements describe what to render, and they can refer to either a DOM-like element or a component instance. In React, JSX is transformed into React.createElement calls. A tag that starts with a lowercase letter, like div or span, becomes a real HTML element in the DOM. A tag that starts with an uppercase letter, like MyButton, refers to a component (a function or class) that returns elements, so it creates a component instance. This dual nature lets you compose UIs by nesting components inside other components using JSX, while still rendering standard HTML elements when you need them. For example,

renders a div in the DOM, whereas renders the output of the Greeting component. The ability to mix both within the same JSX tree is why this description is the best fit.