JSX Components

How JSX Components Transform UI Development

Understanding JSX components enables developers to build reusable, composable user interfaces with clean function-based architecture. This pattern promotes separation of concerns while enabling component composition, making it essential for modern React development. Teams using proper JSX component patterns report faster feature delivery and better code maintainability.

TL;DR

• Use function components for clean, reusable UI elements
• JSX components enable powerful composition patterns
• Props and children create flexible component APIs
• Perfect for building scalable UI architectures

const result = process(data)

The JSX Component Challenge

You're building a user interface with repetitive HTML structures scattered throughout your codebase. The current implementation duplicates markup and makes styling changes a nightmare. Each UI update requires finding and modifying multiple locations, increasing the risk of inconsistencies.

// The problematic approach - duplicated HTML structures
function createOldWayHTML() {
  return `
        <div class="card">
            <h3>User: John</h3>
            <p>Email: john@example.com</p>
            <button onclick="handleClick()">Contact</button>
        </div>
        <div class="card">
            <h3>User: Jane</h3>
            <p>Email: jane@example.com</p>
            <button onclick="handleClick()">Contact</button>
        </div>
    `
}
console.log('Old way HTML:', createOldWayHTML())

JSX component patterns eliminate these issues with reusable, composable functions that generate consistent UI structures:

// The elegant JSX component solution
function UserCard({ name, email }) {
  return {
    type: 'div',
    props: {
      className: 'card',
      children: [
        { type: 'h3', props: { children: name } },
        { type: 'button', props: { children: 'Contact' } },
      ],
    },
  }
}
const users = [{ name: 'John', email: 'john@example.com' }]
const cards = users.map((user) => UserCard(user))
console.log('JSX Component result:', cards)

Best Practises

Use JSX components when:

• ✅ Building reusable UI elements that appear in multiple places
• ✅ Creating consistent design systems with shared styling
• ✅ Implementing complex user interfaces with nested structures
• ✅ Managing component state and props effectively

Avoid when:

• 🚩 Creating one-off UI elements that will never be reused
• 🚩 Simple static content that doesn't need interactivity
• 🚩 Performance-critical rendering with thousands of elements
• 🚩 Team lacks React/JSX knowledge and training

System Design Trade-offs

More Code Examples

// Traditional approach with HTML duplication everywhere
function createUserHTML(user) {
  return `
        <div class="user-card">
            <h3>${user.name}</h3>
            <p>${user.email}</p>
            <button onclick="contact(${user.id})">Contact</button>
        </div>
    `
}

function createAdminHTML(admin) {
  return `
        <div class="admin-card">
            <h2>${admin.name}</h2>
            <p>${admin.email}</p>
            <span class="admin-badge">ADMIN</span>
            <button onclick="contact(${admin.id})">Contact</button>
        </div>
    `
}

// Manual duplication for each user type
const users = [{ id: 1, name: 'John', email: 'john@example.com' }]
const admins = [{ id: 2, name: 'Jane', email: 'jane@example.com' }]

console.log('Duplicated HTML:', {
  userCards: users.map(createUserHTML),
  adminCards: admins.map(createAdminHTML),
})

// Modern JSX component approach with reusable functions
function Button({ onClick, children, variant = 'primary' }) {
  return {
    type: 'button',
    props: { className: `btn-${variant}`, onClick, children },
  }
}

function ProductCard({ product, featured = false, onAddToCart }) {
  const cardClass = featured ? 'featured-card' : 'product-card'
  return {
    type: 'div',
    props: {
      className: cardClass,
      children: [
        { type: 'h3', props: { children: product.name } },
        { type: 'p', props: { children: `$${product.price}` } },
        Button({
          onClick: () => onAddToCart?.(product.id),
          children: 'Add to Cart',
        }),
      ],
    },
  }
}

// Test component composition
const product = { id: 1, name: 'Headphones', price: 99 }
const regularCard = ProductCard({
  product,
  onAddToCart: (id) => console.log(`Added ${id}`),
})
const featuredCard = ProductCard({
  product,
  featured: true,
  onAddToCart: (id) => console.log(`Featured ${id}`),
})
console.log('JSX components:', [regularCard, featuredCard])

Technical Trivia

The JSX Component Revolution of 2013: When React introduced JSX, many developers initially rejected it as "mixing HTML with JavaScript." The community was divided, with purists arguing it violated separation of concerns. However, JSX's component model proved revolutionary, inspiring similar patterns in Vue, Angular, and other frameworks.

Why JSX components succeeded: Unlike template strings or complex DOM manipulation, JSX components provide a declarative way to describe UI that closely matches the final output. The function-based approach enables powerful composition patterns while maintaining readability and testability.

Modern React patterns evolved from JSX: Features like hooks, component composition, and render props all build on JSX's foundation of treating components as functions. Today's React development patterns—from compound components to render props—all leverage JSX's composability to create maintainable, reusable UI architectures.

Master JSX Components: Implementation Strategy

Choose JSX components when building scalable user interfaces that require consistent design patterns and reusable elements. The component composition model and declarative syntax outweigh any transpilation overhead in most applications. Reserve traditional HTML/JavaScript approaches for simple static content or when team constraints prevent adopting React, but embrace JSX components for maintainable, testable UI development.