// JSX = JavaScript + HTML-like syntax
const App = () => (
  
  {/* class → className */}
    
Hello {name}
  {/* JS expressions in {} */}
      {/* self-closing */}
    {isLoggedIn && }  {/* conditional */}
    {count > 0 ? 
Positive
 : 
Zero
}  {/* ternary */}
  
);

// Functional (modern, use this)
const Button = ({ label, onClick }) => (
  {label}
);

// With TypeScript props
interface Props { name: string; age?: number; }
const Card: React.FC = ({ name, age = 0 }) => (
  
{name} — {age}
);

// Class component (legacy)
class MyComp extends React.Component {
  render() { return 
{this.props.name}
; }
}

// Passing props


// Receiving props
const User = (props) => 
{props.name}
;
const User = ({ name, age, isAdmin = false }) => (...); // destructure

// Spreading props
const btnProps = { onClick: fn, disabled: false };


// children prop
const Card = ({ children }) => 
{children}
;
Title
Content;

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);  // [state, setter]
  const [user, setUser] = useState({ name: 'Ali', age: 22 });
  const [items, setItems] = useState([]);

  // Always create new objects/arrays (don't mutate!)
  setUser({ ...user, age: 23 });          // update object
  setItems([...items, newItem]);          // add to array
  setItems(items.filter(i => i.id !== id)); // remove from array

  // Functional update (when new state depends on old)
  setCount(prev => prev + 1);

  return  setCount(c => c+1)}>{count};
};

import { useState, useEffect } from 'react';

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);

  // Runs after EVERY render
  useEffect(() => { document.title = 'App'; });

  // Runs ONCE (on mount)
  useEffect(() => { fetchData(); }, []);

  // Runs when userId changes
  useEffect(() => {
    async function loadUser() {
      const res = await fetch(`/api/users/${userId}`);
      const data = await res.json();
      setUser(data);
    }
    loadUser();
  }, [userId]);

  // Cleanup (runs on unmount)
  useEffect(() => {
    const timer = setInterval(fn, 1000);
    return () => clearInterval(timer);  // cleanup!
  }, []);
};

// 1. Create context
const ThemeContext = createContext('light');

// 2. Provide context

  


// 3. Consume context (any depth, no prop drilling!)
const { theme, setTheme } = useContext(ThemeContext);

// For complex state: combine with useReducer
const [state, dispatch] = useReducer(reducer, initialState);
dispatch({ type: 'INCREMENT', payload: 1 });

// Event handling
 { e.preventDefault(); handleClick(e); }}>

// Synthetic events
const handleInput = (e) => {
  const { name, value } = e.target;
  setForm(prev => ({ ...prev, [name]: value }));
};

// Controlled form
const [form, setForm] = useState({ email: '', password: '' });


// Form submit
const handleSubmit = async (e) => {
  e.preventDefault();
  await sendData(form);
};

// Always use unique key on list items
const TodoList = ({ todos }) => (
  

    {todos.map(todo => (
      
         {/* key must be unique + stable */}
        {todo.text}
         remove(todo.id)}>×
      
    ))}
  
);

// Conditional rendering
{isLoading && }
{error && }
{!isLoading && !error && }