Your First Component

Components are functions

A component is a function that returns JSX. Name it with a capital letter so React treats it as a component.

function Greeting() {
  return <h1>Welcome</h1>;
}

Use the component like a tag

In App.jsx, place your component where the UI should appear.

function App() {
  return (
    <main>
      <Greeting />
    </main>
  );
}

Export and import

Keep components in their own files as the app grows.

// Greeting.jsx
export default function Greeting() {
  return <h1>Welcome</h1>;
}

// App.jsx
import Greeting from "./Greeting";

Keep components small

One clear job per component makes props, state, and testing easier later.