// What you write (JSX)
const element = <h1 className="greeting">Hello, world!</h1>;

// What it compiles to (JavaScript)
const element = React.createElement(
  'h1',                          // tag type
  { className: 'greeting' },     // props object
  'Hello, world!'                // children
);

// JSX
const app = (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

// Compiled JavaScript
const app = React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Title'),
  React.createElement('p', null, 'Description')
);

┌─────────────────────────────────────────────────────────────────┐
│                    React Rendering Pipeline                     │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  1. State/Props Change                                          │
│         │                                                       │
│         ▼                                                       │
│  2. Create New Virtual DOM Tree                                 │
│         │                                                       │
│         ▼                                                       │
│  3. Diffing: Compare Old vs New Virtual DOM                     │
│         │                                                       │
│         ▼                                                       │
│  4. Reconciliation: Calculate Minimal Changes                   │
│         │                                                       │
│         ▼                                                       │
│  5. Batch Update: Apply changes to Real DOM                     │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

// Without keys - React rebuilds all list items
<ul>
  {items.map(item => <li>{item}</li>)}
</ul>

// With keys - React tracks each item individually
<ul>
  {items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

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

const isLoggedIn = true;

return (
  <div>
    {isLoggedIn ? <button>Logout</button> : <button>Login</button>}
  </div>
);

const hasNotifications = true;
const count = 5;

return (
  <div>
    {hasNotifications && <span className="badge">{count}</span>}
  </div>
);

function Greeting({ name }) {
  return <h1>Hello, {name || 'Guest'}!</h1>;
}

// ?? only checks for null/undefined, not falsy values
function Price({ value }) {
  return <span>${value ?? 'N/A'}</span>;
}

function UserProfile({ user, loading, error }) {
  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} />;
  if (!user) return <p>No user found</p>;
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

function Button() {
  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    borderRadius: '5px',
    border: 'none',
    cursor: 'pointer'
  };

  return <button style={buttonStyle}>Click Me</button>;
}

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
}

.button:hover {
  background-color: darkblue;
}

import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click Me</button>;
}

function Button({ variant, disabled }) {
  const className = `btn ${variant === 'primary' ? 'btn-primary' : 'btn-secondary'} ${disabled ? 'btn-disabled' : ''}`;
  
  return <button className={className}>Click</button>;
}

// Or use a library like clsx
import clsx from 'clsx';

function Button({ variant, disabled }) {
  return (
    <button className={clsx('btn', {
      'btn-primary': variant === 'primary',
      'btn-secondary': variant === 'secondary',
      'btn-disabled': disabled
    })}>
      Click
    </button>
  );
}

// ❌ Wrong - forgot to return
function Greeting() {
  <h1>Hello</h1>;
}

// ✅ Correct - explicit return
function Greeting() {
  return <h1>Hello</h1>;
}

// ✅ Correct - implicit return with parentheses
const Greeting = () => (
  <h1>Hello</h1>
);

// ❌ Wrong - class is a reserved word in JavaScript
<div class="container">

// ✅ Correct
<div className="container">

// ❌ Wrong
<img src="photo.jpg">
<input type="text">

// ✅ Correct
<img src="photo.jpg" />
<input type="text" />

const user = { name: 'Alice', age: 25 };

// ❌ Wrong - Objects are not valid as React children
<p>{user}</p>

// ✅ Correct - access specific properties
<p>{user.name}, {user.age}</p>

// ✅ Or stringify it
<pre>{JSON.stringify(user, null, 2)}</pre>

// ❌ Wrong - this will always be disabled
<button disabled="false">Click</button>

// ✅ Correct - pass boolean value
<button disabled={false}>Click</button>
<button disabled={isDisabled}>Click</button>