JSX Basics

JSX is a syntax extension for JavaScript that looks like HTML. It's the primary way to describe UI in React.

What is JSX?

JSX lets you write HTML-like code directly in JavaScript. It looks like HTML, but it's actually JavaScript underneath. Try editing the code below - your changes appear instantly!

Notice how you can write <h1>, <p>, and <div> tags just like HTML, but they're inside a JavaScript function!

How JSX Works

When you write JSX, tools like Babel transform it into React.createElement() calls:

// This JSX:
<h1>Hello World</h1>

// Becomes this JavaScript:
React.createElement('h1', null, 'Hello World')

You never need to write createElement yourself - that's the whole point of JSX. It's syntactic sugar that makes your code readable.

JSX Rules

JSX has a few important rules. Let's explore them with real examples.

Rule 1: Return a Single Root Element

Every component must return one element. If you need multiple elements, wrap them in a parent like <div> or use a Fragment <>...</>.

Rule 2: Close All Tags

In JSX, every tag must be closed - even self-closing tags like <img> and <br>:

Rule 3: Use camelCase for Attributes

HTML attributes become camelCase in JSX, and some names change completely:

Embedding JavaScript in JSX

Use curly braces {} to embed any JavaScript expression inside JSX:

Inline Styles in JSX

Styles use a JavaScript object with camelCase properties:

Exercise: Build a Profile Card

Now it's your turn! Create a profile card component with:

• A heading with your name
• An image (use any URL or https://picsum.photos/100)
• A short bio paragraph
• Proper styling

Key Takeaways

1. JSX looks like HTML but it's JavaScript underneath
2. One root element - wrap multiple elements in a parent or Fragment
3. Close all tags - including self-closing ones like <img />
4. camelCase attributes - className, onClick, tabIndex, htmlFor
5. Curly braces - embed any JavaScript expression with {}
6. Style objects - use JavaScript objects with camelCase properties