Q1. What is JSX and why is it used in React?
JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It is used in React to describe what the UI should look like. JSX makes the code more readable and expressive. Under the hood, JSX is transformed into React.createElement calls, which create React elements.
Q2. Can browsers read JSX directly?
No, browsers cannot read JSX directly because it is not valid JavaScript. JSX must be transpiled into regular JavaScript using a tool like Babel before it can be executed in the browser. Typically, build tools like Webpack handle this transformation during the development process.
Q3. How do you embed JavaScript expressions in JSX?
JavaScript expressions can be embedded inside JSX by wrapping them in curly braces {}. For example, you can write
Hello, {name}
to display the value of the variable name. Any valid JavaScript expression (like function calls, arithmetic) can be used inside curly braces.Q4. What are the rules for writing JSX?
JSX must have a single root element (or use fragments <>...). All tags must be properly closed (e.g., ![]()
). Attributes in JSX follow camelCase naming (e.g., className instead of class). JavaScript expressions inside curly braces are evaluated. Comments can be written as {/* comment */}.
Q5. How does JSX differ from HTML?
While JSX resembles HTML, there are differences: class becomes className, for becomes htmlFor, inline styles are written as objects (style={{color: 'red'}}). Also, JSX allows embedding JavaScript expressions and uses camelCase for attribute names. JSX is more strict about closing tags.