JSX in Action

JSX is React's secret sauce - it lets you write HTML-like code directly in JavaScript.

Expressions in JSX

Anything inside curly braces {} is JavaScript:

<p>2 + 2 = {2 + 2}</p>
<p>Hello, {username}!</p>
<p>Today is {new Date().toLocaleDateString()}</p>

Conditional Rendering

Use the ternary operator for inline conditionals:

{isLoggedIn ? <UserDashboard /> : <LoginForm />}

Styling in JSX

Two key differences from HTML:

• Use className instead of class
• Inline styles are objects with camelCase properties

<div style={{ backgroundColor: 'blue', fontSize: '16px' }}>
  Styled content
</div>

Try the interactive examples below!