JSX & Components
Dashboard
Topic 2/10
Home › React › JSX & Components

🧱 JSX & Components

JSX rules, functional vs class components, component tree, and conditional rendering.

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like markup inside JavaScript code. Babel compiles JSX into `React.createElement()` calls.

Rules of JSX

Three primary rules when writing JSX markup.

Rule Explanation Example Correct Code
Single Root Element JSX must return a single element or Fragment <>

Close All Tags Self-closing tags must end with a slash
CamelCase Attributes Use className and onClick instead of class & onclick

Functional Components

Modern React components are plain JavaScript functions that accept `props` and return JSX elements.

Greeting.jsx JSX 
export function Greeting({ name }) {
  return (
    <div class="greeting-box">
      <h2>Hello, {name}!</h2>
    </div>
  );
}

Conditional Rendering

Render elements conditionally using ternary operators (`? :`), logical AND (`&&`), or early return statements.

AuthButton.jsx JSX 
export function AuthButton({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <button>Logout</button>
      ) : (
        <button>Login</button>
      )}
    </div>
  );
}