Introduction to JSX - React's HTML in JavaScript!

Introduction

JSX looks like HTML in your JavaScript - and that's exactly what it is! It's one of React's best features, and we're going to master it!

What You Will Learn

• What JSX is and why React uses it
• JSX syntax rules
• Embedding expressions in JSX
• JSX vs HTML differences

Prerequisites

• First React App

What is JSX?

JSX stands for JavaScript XML - it's a syntax extension for JavaScript that lets you write HTML-like code in your JS files!

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

But browsers don't understand JSX!

Don't worry! Tools like Vite and Babel transform JSX into regular JavaScript calls!

Your JSX:

<h1 className="greeting">Hello!</h1>

Transforms to:

React.createElement('h1', { className: 'greeting' }, 'Hello!');

So JSX is just syntactic sugar - it makes your code easier to read!

Embedding Expressions in JSX

You can put any JavaScript expression inside curly braces {} in JSX!

const name = 'React';
const element = <h1>Hello, {name}!</h1>; // Hello, React!

function formatName(user) {
  return `${user.firstName} ${user.lastName}`;
}

const user = { firstName: 'John', lastName: 'Doe' };
const element = <h1>Hello, {formatName(user)}!</h1>;

You can even put other JSX inside expressions!

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger!</h1>;
}

JSX is an Expression Too!

You can assign JSX to variables, return it from functions, pass it as arguments - anything you can do with a normal JS expression!

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please log in.</h1>;
}

JSX Attributes

Some attributes are different from HTML!

Use className Instead of class

Because class is a reserved word in JavaScript!

// Wrong!
<div class="container"></div>

// Right!
<div className="container"></div>

camelCase Attribute Names

HTML attributes become camelCase in JSX!

// HTML
<div tabindex="1" onclick="handleClick()"></div>

// JSX
<div tabIndex="1" onClick={handleClick}></div>

JSX Children

You can nest elements inside JSX just like HTML!

const element = (
  <div>
    <h1>Hello!</h1>
    <p>This is a paragraph.</p>
  </div>
);

If it's multi-line, wrap it in parentheses to avoid automatic semicolon insertion issues!

Self-Closing Tags

If an element doesn't have children, you must close it with />!

<img src="logo.png" />
<br />
<input type="text" />

JSX Prevents Injection Attacks

React automatically escapes any values in JSX, so XSS attacks are prevented!

const userInput = '<script>alert("Bad!")</script>';
const element = <h1>{userInput}</h1>; // Safe! React will escape it!

JSX Represents Objects

Babel compiles JSX to React.createElement calls:

// JSX
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// Compiled to
const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

// Which creates an object like:
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

These objects are called React elements - they describe what should appear on the screen!

Best Practices with JSX

1. Use parentheses for multi-line JSX: Prevents ASI issues!
2. Indent properly: Makes it readable!
3. One element per line: Easy to read!
4. Use self-closing tags: When appropriate!
5. Use meaningful class names: Not just div1, div2!

Common Mistakes

1. Using class instead of className: Very common!
2. Forgetting curly braces around expressions: {variable}!
3. Not closing tags: Always close them!
4. Returning multiple elements without a wrapper: Use a fragment!

Summary

JSX is a syntax extension that lets you write HTML in your JavaScript! It gets compiled to React.createElement calls, and it's safe, readable, and one of React's best features!

Related Articles

• JSX Syntax Rules
• Components

Previous Tutorial

← First React App

Next Tutorial

Let's learn all JSX rules! → JSX Syntax Rules