Components are functions that return UI

A React component is a function that takes props and returns UI. That is the entire idea. Everything else in React is an elaboration on that sentence. Hooks are functions you call inside components. State is a tuple returned from a hook. Effects run after a component renders. The whole library is functions.

BookCard.tsx

tsx

interface Book {
  id: number;
  title: string;
  author: string;
  price: number;
  stock: number;
}

export function BookCard({ book }: { book: Book }) {
  return (
    <div className="book-card">
      <h3>{book.title}</h3>
      <p>by {book.author}</p>
      <p>${book.price.toFixed(2)}</p>
      <button disabled={book.stock === 0}>
        {book.stock === 0 ? 'Sold Out' : 'Add to Cart'}
      </button>
    </div>
  );
}

A book card component, written as a function.

Compare that to the vanilla version from the DOM phase. No createElement, no appendChild, no innerHTML, no renderBooks function. You describe what the UI looks like for a given book and React handles turning it into real DOM nodes. The code reads like a design instead of a script.

Quiz: Quiz

Loading practice…