Templating Using JSX in React
What is JSX?
-
JSX stands for JavaScript XML.
-
It’s a syntax extension for JavaScript used in React to write HTML-like code inside JavaScript.
-
Makes writing UI components easier and more readable by mixing markup with logic.
Why Use JSX?
-
Declarative and expressive way to describe UI.
-
Allows embedding JavaScript expressions inside markup.
-
React compiles JSX into regular JavaScript calls (
React.createElement) under the hood.
Basic JSX Syntax
This looks like HTML but is actually JSX — a syntax that compiles into JavaScript.
Embedding JavaScript Expressions
You can embed any JavaScript expression inside curly braces {} in JSX:
You can also use functions, calculations, or any valid expression:
JSX with Attributes
You can pass attributes similar to HTML, but some attribute names differ because JSX is JavaScript:
-
Use camelCase for event handlers:
onClick,onChange, etc. -
For attributes that expect numbers, pass them without quotes:
{100}, not"100".
JSX with Children and Nesting
JSX can contain nested elements:
Conditional Rendering in JSX
Use JavaScript conditions inside JSX:
JSX Under the Hood
JSX code compiles to JavaScript like this:
You don’t write React.createElement manually — JSX does it for you!
Summary
-
JSX lets you write HTML-like templates directly inside JavaScript.
-
Supports embedding expressions and logic inside templates.
-
Makes React components more readable and easier to write.
