JSX Deep Dive

Workplace Context

As a front-end developer using React, you will spend a significant amount of time writing JSX. It is the syntax used to describe what your user interface should look like within your JavaScript or TypeScript files. Imagine receiving a design mockup for a new feature. Your task is to translate that visual design into code. JSX provides an intuitive, HTML-like way to structure those UI elements, embed dynamic data, and connect them to your application’s logic, making the translation process more direct and readable than creating DOM elements manually.

Learning Objectives

By the end of this lesson, learners will be able to:

• Explain the purpose and benefits of JSX.
• Write valid JSX syntax to create React elements.
• Identify key differences between JSX and HTML syntax (e.g., className, htmlFor, self-closing tags).
• Embed JavaScript expressions (variables, function calls, ternary operators) within JSX using curly braces ({}).
• Return multiple elements from a component using Fragments (<>...</>).
• Apply basic inline styles to JSX elements (understanding the syntax).
• Conceptually understand that JSX is transformed into JavaScript function calls.

What is JSX?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript recommended by React for describing the UI structure. While you can write React without JSX (using React.createElement calls directly), JSX provides a much more concise and readable way to structure your components, closely resembling the HTML you are already familiar with.

Consider this simple heading:

HTML:

<h1>Hello, World!</h1>

JSX:

<h1>Hello, World!</h1>

They look identical! This familiarity is a major advantage. However, JSX is not HTML. It is JavaScript that gets transformed (transpiled) into regular JavaScript function calls before being executed in the browser.

Behind the Scenes

When you write:

const element = <h1>Hello, Learner!</h1>;

Tools like Vite (using SWC or Babel) transform it into something like this:

const element = React.createElement('h1', null, 'Hello, Learner!');

You do not need to write React.createElement yourself, but understanding this transformation helps clarify that JSX is just syntactic sugar over JavaScript function calls that create React elements (objects describing your UI).

Key Differences Between JSX and HTML

While JSX looks like HTML, there are crucial syntax differences:

1. Attribute Naming Convention: HTML attributes use lowercase (e.g., class, for, tabindex). JSX uses camelCase for most attributes, as they become properties of JavaScript objects.

   • class becomes className
     • Why className? Because class is a reserved keyword in JavaScript.
   • for (on labels) becomes htmlFor
     • Why htmlFor? Because for is also a reserved keyword in JavaScript (used for loops).
   • tabindex becomes tabIndex
   • onclick becomes onClick (other event handlers are also camelCase - more on this in a later lesson)
   • Standard HTML attributes like id, src, alt, href remain lowercase.

2. Self-Closing Tags: In HTML, some tags can be self-closing (e.g., <img>, <br>, <hr>, <input>). In JSX, any tag can be self-closing if it has no children. Crucially, tags that can be self-closing must be closed with a /.

   • HTML: <img src="logo.png" alt="logo"> or <img src="logo.png" alt="logo" />
   • JSX: <img src="logo.png" alt="logo" /> (Closing slash is mandatory)
   • HTML: <div></div>
   • JSX: <div></div> or <div /> (If it has no children)

3. Reserved JavaScript Keywords: Avoid using JavaScript reserved words like class, for, if, while directly as text or variable names if they might conflict, although JSX is generally smart about parsing. The attribute name changes (className, htmlFor) are the most common manifestation of this.

Embedding JavaScript Expressions with {}

The true power of JSX comes from its ability to seamlessly embed JavaScript expressions directly within the markup using curly braces {}. Anything inside {} is evaluated as JavaScript.

You can embed:

• Variables:

  const userName = "Alice";
  const greeting = <h1>Hello, {userName}!</h1>; // Renders: <h1>Hello, Alice!</h1>

• Function Calls:

  function formatUserName(user) {
    return user.firstName + ' ' + user.lastName;
  }
  const user = { firstName: 'Bob', lastName: 'Smith' };
  const userGreeting = <p>Welcome back, {formatUserName(user)}</p>; // Renders: <p>Welcome back, Bob Smith</p>

• Object Property Access:

  const product = { name: 'Laptop', price: 1200 };
  const productDisplay = <div><h2>{product.name}</h2><p>Price: ${product.price}</p></div>;

• Arithmetic Operations:

  const quantity = 3;
  const price = 5;
  const total = <p>Total Cost: ${quantity * price}</p>; // Renders: <p>Total Cost: $15</p>

• Ternary Operators (for conditional logic):

  const isLoggedIn = true;
  const loginMessage = <p>User is {isLoggedIn ? 'currently' : 'not'} logged in.</p>; // Renders: <p>User is currently logged in.</p>

• Any valid JavaScript expression that resolves to a value React can render (strings, numbers, React elements, arrays of these).

Important Notes:

• You cannot use statements like if/else directly inside {} (though ternary operators work). You also cannot use for loops directly (we will learn about rendering lists using .map() later).
• Boolean values (true, false), null, and undefined are valid expressions but do not render anything to the screen. This is often useful for conditional rendering (more on this later).

  const showDetails = false;
  const details = <div>{showDetails && <p>Secret Details</p>}</div>; // Renders an empty div

Activity 1: Embedding Expressions

Try modifying the code below to embed different variables and expressions.

JSX Must Have One Root Element

A React component must return a single root element. You cannot return multiple adjacent elements directly.

Incorrect:

// This will cause an error
const BadComponent = () => {
  return (
    <h1>Title</h1>
    <p>Paragraph text.</p>
  );
}

To fix this, you can wrap the adjacent elements in a container element, like a <div>:

Correct (using a <div>):

const GoodComponent = () => {
  return (
    <div>
      <h1>Title</h1>
      <p>Paragraph text.</p>
    </div>
  );
}

However, adding extra <div> elements just for wrapping can sometimes mess up your layout or add unnecessary nodes to the DOM.

React Fragments (<>...</>)

React provides a solution called Fragments. Fragments let you group a list of children without adding extra nodes to the DOM.

You can use React.Fragment or the shorter syntax <>...</>:

Correct (using Fragment):

import React from 'react'; // Import React if using React.Fragment
 
const FragmentComponent = () => {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Paragraph text.</p>
    </React.Fragment>
  );
}
 
// Or using the shorter syntax (more common)
const ShortSyntaxFragmentComponent = () => {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph text.</p>
    </>
  );
}

Use fragments whenever you need to return multiple elements from a component but do not want to introduce an unnecessary parent HTML element.

Basic Inline Styles

While we will focus on CSS Modules later for better maintainability and scoping, you can apply styles directly to elements using the style attribute in JSX.

The style attribute accepts a JavaScript object (not a string like in HTML).

• Property names are camelCased (e.g., backgroundColor, fontSize).
• Property values are typically strings. For pixel values, you can often omit px for certain properties (React adds it automatically), but it is often clearer to include it as a string (e.g., '10px').

const warningStyle = {
  color: 'red',
  backgroundColor: '#ffebee', // camelCase for background-color
  padding: '10px',           // String value for padding
  border: '1px solid red',
  fontSize: '16px'           // Explicitly a string
};
 
const WarningMessage = () => {
  return (
    <div style={warningStyle}>
      Warning: Please check your input!
    </div>
  );
}
 
// You can also define styles directly inline (less reusable)
const InlineStyledComponent = () => {
  return (
    <p style={{ color: 'blue', marginTop: '20px' }}>
      This paragraph is styled inline.
    </p>
  );
}

Activity 2: Convert HTML to JSX

Convert the following HTML snippet into valid JSX. Pay attention to class, for, self-closing tags, and add a root element if necessary.

HTML Snippet:

<div class="profile">
  <img src="avatar.png" alt="User Avatar">
  <h2>User Profile</h2>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" readonly>
  <br>
  <p>Bio: A short bio goes here.</p>
</div>
<button class="btn primary">Save Changes</button>

Task: Rewrite this within the return statement of a React functional component using valid JSX. Use a Fragment (<>...</>) to wrap the two top-level elements (div and button).

Knowledge Check

Summary

In this lesson, you dove into JSX, the syntax that allows you to write HTML-like structures within your JavaScript/TypeScript code. You learned that JSX is not HTML but a syntax extension that gets transformed into React.createElement calls. We covered key differences from HTML, such as the className and htmlFor attributes and the requirement for closing slashes on self-closing tags. You practiced embedding JavaScript expressions using curly braces {} and learned how to return multiple elements using Fragments (<>...</>). Finally, you saw the syntax for applying basic inline styles. Mastering JSX is fundamental to writing readable and efficient React components.

References

• React Docs:
  • Introducing JSX 
  • JavaScript in JSX with Curly Braces 
  • Rendering Lists (mentions Fragments) 
• MDN: XML  (For context on the “X” in JSX)

Additional Resources

• JSX In Depth  (Older React Docs, but still relevant deep dive)
• TypeScript Playground  (See how simple JSX gets transpiled in the .JS output tab)