JSX

JSX = JavaScript + XML syntax for React

---

What is JSX?

"JavaScript syntax extension"

JSX is a syntax extension that lets you write HTML-like code in JavaScript.

"JSX is a syntax extension for JavaScript that allows writing HTML-like code, which gets transpiled to React.createElement calls."

---

JSX Syntax

Looks like HTML, is JavaScript

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

"JSX looks like HTML but is actually JavaScript syntax that gets compiled to React elements."

---

JSX Transpilation

JSX → React.createElement

// JSX
const element = <h1 className="title">Hello</h1>;

// Transpiled to
const element = React.createElement("h1", { className: "title" }, "Hello");

"JSX is transpiled to React.createElement calls by tools like Babel."

---

Embedding Expressions

for JavaScript expressions

const name = "John";
const element = <h1>Hello, {name}!</h1>;

// Expressions
const count = 5;
const element = <div>Count: {count * 2}</div>;

"JSX uses curly braces to embed JavaScript expressions within the markup."

---

JSX Attributes

camelCase for attributes

// className instead of class
<div className="container">

// htmlFor instead of for
<label htmlFor="input">

// onClick instead of onclick
<button onClick={handleClick}>

"JSX uses camelCase for attributes (className, htmlFor, onClick) instead of HTML's lowercase."

---

Self-Closing Tags

Must close all tags

// ✅ Correct
<img src="image.jpg" />
<input type="text" />
<br />

// ❌ Wrong
<img src="image.jpg">
<input type="text">

"JSX requires all tags to be closed, including self-closing tags like img and input."

---

JSX Must Return One Element

Fragment or wrapper for multiple elements

// ❌ Wrong - multiple elements
return (
  <h1>Title</h1>
  <p>Content</p>
);

// ✅ Correct - Fragment
return (
  <>
    <h1>Title</h1>
    <p>Content</p>
  </>
);

// ✅ Correct - Wrapper
return (
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
);

"JSX must return a single element, use React Fragment or a wrapper div for multiple elements."

---

Conditional Rendering

Ternary · && · if statements

// Ternary
{
  isLoggedIn ? <Dashboard /> : <Login />;
}

// Logical AND
{
  isLoading && <Spinner />;
}

// If statement (outside JSX)
if (condition) {
  return <ComponentA />;
}
return <ComponentB />;

"JSX supports conditional rendering with ternary operators, logical AND, or if statements outside JSX."

---

9️⃣ Lists in JSX

map() to render lists

const items = ["a", "b", "c"];

{
  items.map((item) => <li key={item}>{item}</li>);
}

"Use map() to render lists in JSX, always providing a key prop."

---

JSX vs HTML

Similar but different

Feature	HTML	JSX
Attributes	lowercase	camelCase
Class	class	className
For	for	htmlFor
Self-closing	Optional	Required
Expressions	No

"JSX is similar to HTML but uses camelCase attributes, requires closing tags, and supports JavaScript expressions."

---

"JSX is a syntax extension that allows writing HTML-like code in JavaScript. It gets transpiled to React.createElement calls. JSX uses camelCase for attributes, requires all tags to be closed, must return a single element (use Fragment for multiple), and supports JavaScript expressions in curly braces. It's similar to HTML but with JavaScript capabilities."

---

🧠 Ultra-Short Cheat Sheet

JavaScript + XML syntax
Transpiled to React.createElement
camelCase attributes
{ } for expressions
Must return one element
Fragment for multiple
Conditional rendering
map() for lists