React Basics
React JSX
JSX is a syntax extension that lets you write markup directly inside JavaScript. It is not HTML and it is not a string — a compiler turns every JSX tag into a React.createElement call, so JSX is really just a comfortable way of writing nested function calls.
What is JSX in React?
JSX is a syntax extension that lets you write markup directly inside JavaScript. It is not HTML and it is not a string — a compiler turns every JSX tag into a React.createElement call, so JSX is really just a comfortable way of writing nested function calls.
Why JSX matters
JSX keeps the markup and the logic that controls it in one place. Because it is real JavaScript underneath, you get expressions, loops, variables and editor autocomplete inside your markup without inventing a template language.
JSX example
function Greeting() {
const name = 'Priya';
const isMorning = new Date().getHours() < 12;
return (
<div className="card">
<h2>{isMorning ? 'Good morning' : 'Hello'}, {name}!</h2>
<p>You have {2 + 3} new messages.</p>
</div>
);
}How this works
Anything inside curly braces is evaluated as a JavaScript expression and its result is inserted. Everything outside the braces is treated as markup. Note className rather than class, because class is a reserved word in JavaScript.
HTML attributes vs JSX props
| HTML | JSX | Why |
|---|---|---|
| class="btn" | className="btn" | class is a reserved JavaScript keyword |
| for="email" | htmlFor="email" | for is a reserved keyword |
| onclick="run()" | onClick={run} | camelCase name, function reference not a string |
| style="color:red" | style={{ color: 'red' }} | style takes an object of camelCased CSS properties |
| tabindex="0" | tabIndex={0} | multi-word attributes are camelCased |
Common mistakes with JSX
- Writing class instead of className — React warns in the console and the style silently does not apply.
- Returning two sibling elements without wrapping them in a parent or a fragment.
- Forgetting that {} takes an expression, not a statement — an if block cannot go inside braces.
JSX is optional in theory but universal in practice. Every React codebase you will join uses it, so learn it as the default rather than the alternative.
React JSX— Interview Questions & FAQs
Is JSX HTML?+
No. It looks like HTML but compiles to JavaScript function calls, and its attribute names follow DOM property naming — className, htmlFor, tabIndex — rather than HTML attribute names.
Can I use React without JSX?+
Yes, by calling React.createElement directly, but the code becomes hard to read for anything beyond a couple of elements. Every real project uses JSX.