React Core Concepts

JSX, components, props, state, and rendering

JSX & Components

React uses JSX — a syntax extension that looks like HTML but compiles to JavaScript. Components are reusable, composable building blocks that accept props and manage state.

tsx

// Components & Props
// Function component with props
interface CardProps {
  title: string;
  children: React.ReactNode;
  variant?: "default" | "outlined";
}

function Card({ title, children, variant = "default" }: CardProps) {
  return (
    <div className={`card card--${variant}`}>
      <h2>{title}</h2>
      <div>{children}</div>
    </div>
  );
}

// State management
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>
        Increment
      </button>
    </div>
  );
}

// Conditional rendering
function Status({ isOnline }: { isOnline: boolean }) {
  return <span>{isOnline ? "🟢 Online" : "🔴 Offline"}</span>;
}

// List rendering
function TodoList({ items }: { items: Todo[] }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

💬 Why do lists need a key prop?

Keys help React identify which items changed, were added, or removed during re-renders. Without stable keys, React re-renders all items. Use unique IDs — never use array index as key if the list can be reordered.