What are other JSX uses?

Great question! While you've used JSX to display a simple heading, it is much more powerful than just "HTML in JavaScript." Here are some of the most common ways we use JSX in React:

1. Embedding Expressions

You can put any JavaScript expression inside curly braces {}. This allows you to display dynamic data.

function App() {
  const name = "LabEx Learner";
  return <h1>Hello, {name}!</h1>; // Displays: Hello, LabEx Learner!
}

2. Conditional Rendering

You can use JavaScript logic (like the ternary operator ? :) to decide what to show on the screen.

function App() {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

3. Rendering Lists

JSX makes it easy to take an array of data and turn it into a list of elements using the .map() method.

const tools = ['React', 'Vite', 'LabEx'];

return (
  <ul>
    {tools.map(tool => <li key={tool}>{tool}</li>)}
  </ul>
);

4. Setting Attributes

Just like HTML, you can set attributes, but in JSX we use camelCase (e.g., className instead of class).

const imagePath = "logo.png";
return <img src={imagePath} className="main-logo" alt="Logo" />;

5. Passing Props

JSX allows you to pass data from a parent component to a child component, similar to how HTML attributes work.

<WelcomeMessage user="Alex" color="blue" />

Summary:
JSX isn't just for static text; it's a bridge that lets you use the full logic of JavaScript to build dynamic, interactive user interfaces.

Would you like to try adding a variable or a expression to your App.jsx right now to see it in action?