📜 Understanding JSX

JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It looks like HTML but has the full power of JavaScript. JSX makes it easier to create and manage UI components.

🔍 What is JSX?

JSX allows you to write HTML-like code within your JavaScript files. It improves readability and provides a more visual structure for components.

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

✨ Why Use JSX?

• Improves readability and structure
• Combines markup with logic (JS + HTML)
• Fully supports JavaScript expressions

🧠 Embedding JavaScript in JSX

You can use curly braces to insert any valid JavaScript expression inside JSX:

const name = "React";
const element = <h1>Welcome to {name}!</h1>;

📏 JSX Rules to Remember

• You must return one parent element
• Use className instead of class
• Use htmlFor instead of for
• Self-close empty tags like <br />

function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <p className="tagline">Let's learn JSX!</p>
    </div>
  );
}

✅ Summary

• JSX is not HTML – it’s a syntax that compiles to React.createElement()
• It lets you write UI code in a more expressive, HTML-like format
• JavaScript expressions can be embedded using { }
• Always use valid JSX syntax to avoid errors