R2: Understanding JSX (JavaScript XML)

JSX is a syntax extension for JavaScript. It allows you to write HTML-like markup directly within your JavaScript code. While it looks like HTML, it is not actually interpreted by the browser; instead, it is compiled by tools like Babel into regular JavaScript function calls (specifically, React.createElement()).

JSX is the primary method used in React for describing what the user interface should look like.

1. Why Use JSX?

• Declarative UI: JSX makes your code more readable and understandable because the UI structure is defined right next to the logic that controls it.
• Safety: React automatically escapes any values embedded in JSX before rendering them. This prevents Cross-Site Scripting (XSS) injection attacks, as all inputs are treated as content, not as executable code.
• Power of JavaScript: Since JSX is JavaScript, you can easily embed dynamic content, variables, and expressions directly into your markup using curly braces ({}).

2. Basic JSX Syntax Rules

While JSX closely resembles HTML, there are three essential rules that differ and must be followed:

A. Single Root Element

Every JSX block must return a single root element. You cannot have two adjacent top-level tags.

Note: The <> and </> tags are called a React Fragment. They allow you to group multiple elements without adding an unnecessary extra <div> to the actual HTML output.

B. Closing All Tags

In HTML, certain tags (like <br> or <img>) are self-closing. In JSX, all tags must be closed, including self-closing tags.

C. Using className

Because class is a reserved keyword in JavaScript, you must use className when applying CSS classes to your elements in JSX.

// Incorrect
<div class="header">Hello</div>

// Correct
<div className="app-header">Hello</div>

3. Embedding JavaScript Expressions

The core power of JSX is the ability to embed JavaScript expressions inside your markup using curly braces ({}). You can embed variables, function calls, arithmetic operations, and more.

Execution Example: Embedding Expressions

In your my-first-app/src directory, replace the content of App.js with the following code:

import React from 'react';

// Define a function to generate data
function formatUser(user) {
  return user.firstName + ' ' + user.lastName;
}

const userData = {
  firstName: 'Aris',
  lastName: 'Thanos',
  isLoggedIn: true,
  currentYear: 2025
};

function App() {
  // Use a JavaScript expression to conditionally set the greeting
  const greetingMessage = userData.isLoggedIn ? 'Welcome Back!' : 'Please Sign In.';

  return (
    // The outermost single root element (a Fragment)
    <>
      <div className="user-details">
        {/* 1. Embedding a function call */}
        <h1>User: {formatUser(userData)}</h1> 
        
        {/* 2. Embedding a variable */}
        <p>{greetingMessage}</p> 
        
        {/* 3. Embedding an attribute (setting the alt property dynamically) */}
        <img src="logo.svg" alt={`Logo for ${userData.firstName}`} /> 
      </div>
      
      <footer>
        {/* 4. Embedding arithmetic/direct expression */}
        <p>&copy; {userData.currentYear - 1} - {userData.currentYear}</p>
      </footer>
    </>
  );
}

export default App;

1. Run the application (or ensure it’s still running) with npm start in your terminal.
2. Observe the output: The JSX markup combines seamlessly with the dynamic JavaScript values you embedded using the {} syntax.