React JSX

React JSX Syntax: Declarative Markup & Expression Rules

JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write HTML-like markup directly inside JavaScript files. Browsers cannot execute JSX natively; tools like Babel or SWC transpile JSX expressions into standard React.createElement() calls.

Transpilation Mechanism

// JSX Code:
const element = <h1 className="title">Hello React!</h1>;

// Transpiled JavaScript Output:
const element = React.createElement('h1', { className: 'title' }, 'Hello React!');

Key Rules of JSX

1. Return a Single Parent Element: All JSX returned by a component must be wrapped in a single parent tag or a Fragment (<>...</>).
2. Close All Tags Explicitly: Self-closing tags like <img>, <input>, and <br> must explicitly include a trailing slash (<img />).
3. Use camelCase for HTML Attributes: Because JSX is JavaScript, attribute names use camelCase reserved keywords (e.g., className instead of class, htmlFor instead of for).
4. Embed JS Expressions with Curly Braces {}: Pass variables, mathematical calculations, and function calls inside {}.

Comprehensive JSX Example

import React from 'react';

export default function UserProfile() {
  const user = {
    firstName: 'Jane',
    lastName: 'Doe',
    avatarUrl: 'https://via.placeholder.com/150',
    isOnline: true,
  };

  const formatName = (u) => `${u.firstName} ${u.lastName}`;

  return (
    <div className="profile-card">
      <img 
        src={user.avatarUrl} 
        alt={formatName(user)} 
        className="avatar" 
      />
      <h2>{formatName(user)}</h2>
      <p className={user.isOnline ? 'status-online' : 'status-offline'}>
        Status: {user.isOnline ? 'Active Now' : 'Offline'}
      </p>
    </div>
  );
}

Best Practices & Gotchas

• Do Not Render Objects Directly: Wrapping a plain JS object inside JSX expressions (<div>{user}</div>) throws a runtime error (Objects are not valid as a React child). Access primitive properties explicitly (user.name).
• Boolean, Null, and Undefined Are Ignored: true, false, null, and undefined are valid children that render nothing to the DOM.

Self-Check Challenge

Fix the syntax errors in this JSX snippet: <img src="pic.jpg"> <div class="box">Result: {10 + 20}</div>.