React · Core Concepts

Writing JSX

Master JSX syntax and best practices. Learn how to write clean, maintainable, and performant React components with proper JSX patterns.

Find videos you like?

Save to resource drawer for future reference!

Understanding JSX Fundamentals

Learn the core concepts and rules of JSX syntax

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. It's not a separate language - it's a syntactic sugar that makes React components more readable and intuitive.

When you write JSX, it gets compiled into regular JavaScript function calls using tools like Babel. React.createElement() calls are generated behind the scenes, making your code both developer-friendly and efficient.

Without JSX (Complex)

React.createElement(
  'div',
  { className: 'container' },
  React.createElement(
    'h1',
    null,
    'Hello World'
  ),
  React.createElement(
    'p',
    null,
    'Welcome to React'
  )
)

• Hard to read and visualize structure
• Error-prone nesting
• Poor developer experience
• Difficult to maintain

With JSX (Clean)

<div className="container">
  <h1>Hello World</h1>
  <p>Welcome to React</p>
</div>

• Intuitive and readable
• Easy to visualize structure
• Excellent developer experience
• Maintainable and scalable

📋 Essential JSX Rules

Core Syntax Rules:

• Single Root Element: Every JSX expression must have one parent element
• className, not class: Use className for CSS classes
• Close All Tags: All tags must be closed, including self-closing ones
• Curly Braces: Use for JavaScript expressions

Best Practices:

• PascalCase: Component names must start with uppercase
• Semantic HTML: Use appropriate HTML elements
• Accessibility: Include proper ARIA attributes
• Consistency: Maintain consistent formatting

JSX Attributes & Props

Master component communication and event handling

Understanding Attributes in JSX

JSX attributes are similar to HTML attributes but with some important differences. They allow you to pass data to components, configure element behavior, and handle user interactions.

Props (properties) are how components receive data and configuration from their parents. Understanding how to use attributes and props effectively is crucial for building reusable, maintainable React components.

📝 Standard Attributes

className="container"

CSS classes (use className, not class)

htmlFor="input-id"

Label association (use htmlFor, not for)

tabIndex=0

Focus order (use curly braces for numbers)

⚡ Event Handlers

onClick={handleClick}

Click events (camelCase naming)

onChange={handleChange}

Form input changes

onSubmit={handleSubmit}

Form submission

🎯 Props Best Practices

Naming:

• Use camelCase for prop names
• Be descriptive and clear
• Follow React conventions
• Avoid abbreviations

Types:

• Use PropTypes or TypeScript
• Provide default values
• Validate required props
• Document complex props

Structure:

• Keep props minimal
• Group related props
• Avoid prop drilling
• Use composition over inheritance

JSX Best Practices Summary

Essential guidelines for writing clean, maintainable JSX

Why JSX Best Practices Matter

Writing clean JSX isn't just about making your code work—it's about creating maintainable, scalable, and performant React applications. Following these best practices will help you write code that's easier to debug, test, and collaborate on with other developers.

🚀 Performance

Optimized rendering and minimal re-renders

🛠️ Maintainability

Easy to understand and modify code

🤝 Collaboration

Consistent patterns for team development

🎯 Core JSX Rules You Must Follow

Single Root Element

Every JSX expression must have one parent element. Use fragments or wrapper divs when needed.

✅ Good:

<div>
  <h1>Title</h1>
  <p>Content</p>
</div>

❌ Bad:

<h1>Title</h1>
<p>Content</p>

Use className Instead of class

JSX uses className for CSS classes because 'class' is a reserved JavaScript keyword.

✅ Good:

<div className="container">Content</div>

❌ Bad:

<div class="container">Content</div>

Close All Tags

Every JSX element must be properly closed, including self-closing tags with a slash.

✅ Good:

<img src="image.jpg" alt="description" />
<br />
<input type="text" />

❌ Bad:

<img src="image.jpg" alt="description">
<br>
<input type="text">

🏗️ Component Naming & Structure

Naming Conventions

✓Components: PascalCase (UserProfile, Button)
✓Props: camelCase (userName, isActive)
✓Functions: camelCase (handleSubmit, getData)
✓Constants: UPPER_SNAKE_CASE (API_URL, MAX_ITEMS)

Component Structure

✓Single Responsibility: One purpose per component
✓Small & Focused: Keep under 200 lines when possible
✓Reusable: Design for multiple use cases
✓Testable: Easy to unit test in isolation

⚡ Performance & Optimization

✅ Performance Best Practices

• Use React.memo for expensive components
• Extract expensive calculations to useMemo
• Use useCallback for stable function references
• Avoid inline object creation in render
• Use keys properly for list rendering
• Lazy load components with React.lazy
• Virtualize long lists with react-window

❌ Performance Anti-Patterns

• Creating objects/arrays in JSX directly
• Defining functions inside render
• Unnecessary re-renders with poor state
• Large components without memoization
• Missing keys in list rendering
• Synchronous heavy computations
• Inline styles with complex objects

♿ Accessibility Guidelines

Accessible JSX ensures your application can be used by everyone, including people with disabilities.

Semantic HTML

• Use proper heading hierarchy
• Use nav, main, section tags
• Use button for actions
• Use link for navigation

ARIA Attributes

• Use aria-label for icons
• Use aria-describedby
• Use aria-expanded for dropdowns
• Use role when needed

Keyboard Navigation

• All interactive elements focusable
• Use tabIndex appropriately
• Handle keyboard events
• Visible focus indicators

🚨 Common Pitfalls & Solutions

Pitfall: Inline Style Objects

Creating style objects directly in JSX causes re-renders and hurts performance.

Instead of: <div style={{color: 'red'}}>
Use: const styles = {color: 'red'}; <div style={styles}>

Pitfall: Functions in Render

Defining functions inside render creates new instances on every render.

Instead of: onClick={() => handleClick(id)}
Use: const handleClick = useCallback((id) => {...}, [])

Pitfall: Prop Drilling

Passing props through many levels makes components hard to maintain.

Solutions: Context API, state management libraries, or component composition

📋 Quick Reference Card

Syntax

• Single parent element
• className vs class
• Close all tags
• for expressions

Components

• PascalCase naming
• Single responsibility
• Keep small & focused
• Make reusable

Performance

• useMemo for expensive calc
• useCallback for functions
• React.memo for components
• Keys for lists

Accessibility

• Semantic HTML
• ARIA attributes
• Keyboard navigation
• Focus management

💡 Pro Tip

Think in components, not just JSX. Before writing JSX, ask yourself: "Can this be a reusable component?" If you find yourself copying JSX patterns, extract them into components. This makes your code more maintainable, testable, and scalable. Remember: good JSX is just one part of good React architecture!

Previous Topic

Your First Component

Create your first React component, learn about imports/exports, component composition, and naming conventions.

Next Topic

JavaScript in JSX

Use JavaScript expressions in JSX, handle events, render lists, conditionally render content, and apply styles dynamically.

Ask a Question

Have a question about Writing JSX? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Core Concepts

Writing JSX

Master JSX syntax and best practices. Learn how to write clean, maintainable, and performant React components with proper JSX patterns.

Find videos you like?

Save to resource drawer for future reference!

Understanding JSX Fundamentals

Learn the core concepts and rules of JSX syntax

What is JSX?

Without JSX (Complex)

React.createElement(
  'div',
  { className: 'container' },
  React.createElement(
    'h1',
    null,
    'Hello World'
  ),
  React.createElement(
    'p',
    null,
    'Welcome to React'
  )
)

• Hard to read and visualize structure
• Error-prone nesting
• Poor developer experience
• Difficult to maintain

With JSX (Clean)

<div className="container">
  <h1>Hello World</h1>
  <p>Welcome to React</p>
</div>

• Intuitive and readable
• Easy to visualize structure
• Excellent developer experience
• Maintainable and scalable

📋 Essential JSX Rules

Core Syntax Rules:

• Single Root Element: Every JSX expression must have one parent element
• className, not class: Use className for CSS classes
• Close All Tags: All tags must be closed, including self-closing ones
• Curly Braces: Use for JavaScript expressions

Best Practices:

• PascalCase: Component names must start with uppercase
• Semantic HTML: Use appropriate HTML elements
• Accessibility: Include proper ARIA attributes
• Consistency: Maintain consistent formatting

JSX Attributes & Props

Master component communication and event handling

Understanding Attributes in JSX

JSX attributes are similar to HTML attributes but with some important differences. They allow you to pass data to components, configure element behavior, and handle user interactions.

📝 Standard Attributes

className="container"

CSS classes (use className, not class)

htmlFor="input-id"

Label association (use htmlFor, not for)

tabIndex=0

Focus order (use curly braces for numbers)

⚡ Event Handlers

onClick={handleClick}

Click events (camelCase naming)

onChange={handleChange}

Form input changes

onSubmit={handleSubmit}

Form submission

🎯 Props Best Practices

Naming:

• Use camelCase for prop names
• Be descriptive and clear
• Follow React conventions
• Avoid abbreviations

Types:

• Use PropTypes or TypeScript
• Provide default values
• Validate required props
• Document complex props

Structure:

• Keep props minimal
• Group related props
• Avoid prop drilling
• Use composition over inheritance

JSX Best Practices Summary

Essential guidelines for writing clean, maintainable JSX

Why JSX Best Practices Matter

🚀 Performance

Optimized rendering and minimal re-renders

🛠️ Maintainability

Easy to understand and modify code

🤝 Collaboration

Consistent patterns for team development

🎯 Core JSX Rules You Must Follow

Single Root Element

Every JSX expression must have one parent element. Use fragments or wrapper divs when needed.

✅ Good:

<div>
  <h1>Title</h1>
  <p>Content</p>
</div>

❌ Bad:

<h1>Title</h1>
<p>Content</p>

Use className Instead of class

JSX uses className for CSS classes because 'class' is a reserved JavaScript keyword.

✅ Good:

<div className="container">Content</div>

❌ Bad:

<div class="container">Content</div>

Close All Tags

Every JSX element must be properly closed, including self-closing tags with a slash.

✅ Good:

<img src="image.jpg" alt="description" />
<br />
<input type="text" />

❌ Bad:

<img src="image.jpg" alt="description">
<br>
<input type="text">

🏗️ Component Naming & Structure

Naming Conventions

✓Components: PascalCase (UserProfile, Button)
✓Props: camelCase (userName, isActive)
✓Functions: camelCase (handleSubmit, getData)
✓Constants: UPPER_SNAKE_CASE (API_URL, MAX_ITEMS)

Component Structure

✓Single Responsibility: One purpose per component
✓Small & Focused: Keep under 200 lines when possible
✓Reusable: Design for multiple use cases
✓Testable: Easy to unit test in isolation

⚡ Performance & Optimization

✅ Performance Best Practices

• Use React.memo for expensive components
• Extract expensive calculations to useMemo
• Use useCallback for stable function references
• Avoid inline object creation in render
• Use keys properly for list rendering
• Lazy load components with React.lazy
• Virtualize long lists with react-window

❌ Performance Anti-Patterns

• Creating objects/arrays in JSX directly
• Defining functions inside render
• Unnecessary re-renders with poor state
• Large components without memoization
• Missing keys in list rendering
• Synchronous heavy computations
• Inline styles with complex objects

♿ Accessibility Guidelines

Accessible JSX ensures your application can be used by everyone, including people with disabilities.

Semantic HTML

• Use proper heading hierarchy
• Use nav, main, section tags
• Use button for actions
• Use link for navigation

ARIA Attributes

• Use aria-label for icons
• Use aria-describedby
• Use aria-expanded for dropdowns
• Use role when needed

Keyboard Navigation

• All interactive elements focusable
• Use tabIndex appropriately
• Handle keyboard events
• Visible focus indicators

🚨 Common Pitfalls & Solutions

Pitfall: Inline Style Objects

Creating style objects directly in JSX causes re-renders and hurts performance.

Instead of: <div style={{color: 'red'}}>
Use: const styles = {color: 'red'}; <div style={styles}>

Pitfall: Functions in Render

Defining functions inside render creates new instances on every render.

Instead of: onClick={() => handleClick(id)}
Use: const handleClick = useCallback((id) => {...}, [])

Pitfall: Prop Drilling

Passing props through many levels makes components hard to maintain.

Solutions: Context API, state management libraries, or component composition

📋 Quick Reference Card

Syntax

• Single parent element
• className vs class
• Close all tags
• for expressions

Components

• PascalCase naming
• Single responsibility
• Keep small & focused
• Make reusable

Performance

• useMemo for expensive calc
• useCallback for functions
• React.memo for components
• Keys for lists

Accessibility

• Semantic HTML
• ARIA attributes
• Keyboard navigation
• Focus management

💡 Pro Tip

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Your First Component

JavaScript in JSX

Building Your Learning Module...

Writing JSX

What is JSX?

Without JSX (Complex)

With JSX (Clean)

📋 Essential JSX Rules

Core Syntax Rules:

Best Practices:

Understanding Attributes in JSX

📝 Standard Attributes

⚡ Event Handlers

🎯 Props Best Practices

Naming:

Types:

Structure:

Why JSX Best Practices Matter

🎯 Core JSX Rules You Must Follow

Single Root Element

Use className Instead of class

Close All Tags

🏗️ Component Naming & Structure

Naming Conventions

Component Structure

⚡ Performance & Optimization

✅ Performance Best Practices

❌ Performance Anti-Patterns

♿ Accessibility Guidelines

Semantic HTML

ARIA Attributes

Keyboard Navigation

🚨 Common Pitfalls & Solutions

Pitfall: Inline Style Objects

Pitfall: Functions in Render

Pitfall: Prop Drilling

📋 Quick Reference Card

Syntax

Components

Performance

Accessibility

💡 Pro Tip

Your First Component

JavaScript in JSX

Writing JSX

What is JSX?

Without JSX (Complex)

With JSX (Clean)

📋 Essential JSX Rules

Core Syntax Rules:

Best Practices:

Understanding Attributes in JSX

📝 Standard Attributes

⚡ Event Handlers

🎯 Props Best Practices

Naming:

Types:

Structure:

Why JSX Best Practices Matter

🎯 Core JSX Rules You Must Follow

Single Root Element

Use className Instead of class

Close All Tags

🏗️ Component Naming & Structure

Naming Conventions

Component Structure

⚡ Performance & Optimization

✅ Performance Best Practices

❌ Performance Anti-Patterns

♿ Accessibility Guidelines

Semantic HTML

ARIA Attributes

Keyboard Navigation

🚨 Common Pitfalls & Solutions

Pitfall: Inline Style Objects

Pitfall: Functions in Render

Pitfall: Prop Drilling

📋 Quick Reference Card

Syntax

Components