Printing and PDF export are disabled for this content. View it online at Full Stack Learning Simplified.

React JSX🌱 Beginner

JSX lets you write HTML-like markup directly inside JavaScript. It's the syntax React uses to describe UI — not a string, but an expression that compiles to function calls.

Markup in JavaScript

App.jsx

const element = <h1>Hello, React!</h1>;

// embed any JavaScript expression with { }
const name = "Bhanu";
const greeting = <p>Welcome, {name.toUpperCase()}</p>;

Curly braces = JavaScript

Anything in { } is evaluated as JavaScript — variables, function calls, expressions. (Statements like if/for don't go inline; use a ternary or compute above.)

App.jsx

<img src={user.avatar} alt={user.name} />
<p>{items.length} items</p>
<p>{isActive ? "On" : "Off"}</p>

JSX differs from HTML

HTML	JSX
`class`	`className`
`for`	`htmlFor`
`onclick`	`onClick` (camelCase)
`<br>`	`<br />` (must self-close)

One root element

A component must return a single root. Wrap siblings in a <div>, or a Fragment (<> </>) to avoid adding an extra DOM node.

App.jsx

return (
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
);

Note: Under the hood, JSX compiles to React.createElement(...) calls — so it's really JavaScript, which is why you can use it in variables, arrays, and return values.

Tip: Keep logic out of the markup: compute values in the function body, then reference them in { }. It keeps your JSX readable and closer to plain HTML.

Free preview. Sign in and subscribe to unlock all 982 lessons across 31 courses.

Loading lesson…

Printing and PDF export are disabled for this content. View it online at Full Stack Learning Simplified.

React.jsReact 19.2 Pro

React JSX🌱 Beginner

JSX lets you write HTML-like markup directly inside JavaScript. It's the syntax React uses to describe UI — not a string, but an expression that compiles to function calls.

Markup in JavaScript

App.jsx

const element = <h1>Hello, React!</h1>;

// embed any JavaScript expression with { }
const name = "Bhanu";
const greeting = <p>Welcome, {name.toUpperCase()}</p>;

Curly braces = JavaScript

Anything in { } is evaluated as JavaScript — variables, function calls, expressions. (Statements like if/for don't go inline; use a ternary or compute above.)

App.jsx

<img src={user.avatar} alt={user.name} />
<p>{items.length} items</p>
<p>{isActive ? "On" : "Off"}</p>

JSX differs from HTML

HTML	JSX
`class`	`className`
`for`	`htmlFor`
`onclick`	`onClick` (camelCase)
`<br>`	`<br />` (must self-close)

One root element

A component must return a single root. Wrap siblings in a <div>, or a Fragment (<> </>) to avoid adding an extra DOM node.

App.jsx

return (
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
);

Note: Under the hood, JSX compiles to React.createElement(...) calls — so it's really JavaScript, which is why you can use it in variables, arrays, and return values.

Tip: Keep logic out of the markup: compute values in the function body, then reference them in { }. It keeps your JSX readable and closer to plain HTML.

Free preview. Sign in and subscribe to unlock all 982 lessons across 31 courses.