JSX

JSX Syntax

JSX is a syntax extension for JavaScript that looks like HTML but compiles to JavaScript function calls.

Basic JSX

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

// JSX with attributes
const element = <img src="photo.jpg" alt="Photo" />;

// Nested JSX
const element = (
  <div>
    <h1>Title</h1>
    <p>Paragraph</p>
  </div>
);

JSX is Expressions

JSX compiles to JavaScript expressions:

// This JSX:
const element = <h1>Hello, {name}!</h1>;

// Compiles to:
const element = React.createElement("h1", null, "Hello, ", name, "!");

JSX Must Have One Root

// Good: Single root element
function App() {
  return (
    <div>
      <h1>Title</h1>
      <p>Content</p>
    </div>
  );
}

// Also good: Fragment
function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  );
}

Expressions in JSX

Use curly braces {} to embed JavaScript expressions in JSX.

Variables

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

// Works with any expression
const element = <h1>Hello, {"Alice"}!</h1>;
const element = <h1>{2 + 2}</h1>;
const element = <h1>{isLoggedIn ? "Welcome" : "Please log in"}</h1>;

Function Calls

function formatName(user) {
  return user.firstName + " " + user.lastName;
}

const element = <h1>Hello, {formatName(user)}!</h1>;

Objects

const style = { color: "red", fontSize: "20px" };
const element = <p style={style}>Red text</p>;

// Inline styles
const element = <p style={{ color: "red" }}>Red text</p>;

Arrays

const items = ["apple", "banana", "cherry"];
const element = (
  <ul>
    {items.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
);

Conditional Rendering

// Ternary
const element = <div>{isLoggedIn ? <Dashboard /> : <Login />}</div>;

// Logical AND
const element = <div>{messages.length > 0 && <MessageList />}</div>;

JSX Gotchas

className vs class

// Wrong: class is a reserved word in JavaScript
const element = <div class="container">Content</div>;

// Correct: use className
const element = <div className="container">Content</div>;

htmlFor vs for

// Wrong
const element = <label for="name">Name</label>;

// Correct
const element = <label htmlFor="name">Name</label>;

Self-Closing Tags

// Wrong: HTML allows this
const element = <img src="photo.jpg">;

// Correct: JSX requires self-closing
const element = <img src="photo.jpg" />;
const element = <input type="text" />;
const element = <br />;

Style as Object

// Wrong: CSS string
const element = <p style="color: red">Red</p>;

// Correct: style object
const element = <p style={{ color: "red" }}>Red</p>;

Event Handlers

// Wrong: string
const element = <button onClick="handleClick()">Click</button>;

// Correct: function reference
const element = <button onClick={handleClick}>Click</button>;

// Correct: arrow function for inline
const element = (
  <button onClick={() => console.log("clicked")}>
    Click
  </button>
);

Fragments

// Wrong: returns two elements
function App() {
  return (
    <h1>Title</h1>
    <p>Content</p>
  );
}

// Correct: use Fragment
function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  );
}