Lesson 1 — Your first component

Components return UI

A component is a JavaScript function whose name starts with a capital letter and that returns JSX — HTML-like markup written inside JavaScript. A component must return one parent element; to group several without an extra box, wrap them in a fragment: <>…</>. The preview on the right redraws every time you edit.

function Card() {
  return (
    <>
      <h2>Title</h2>
      <p>Some text</p>
    </>
  );
}

Why it matters: everything in a React app — buttons, pages, the whole site — is built from components like this.