Write your first component

A component is a JavaScript function that returns a piece of the interface.

function Greeting() {
  return <h1>Hello</h1>
}

Use it from another component:

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

The capital letter matters. Lowercase JSX names such as <main> and <h1> mean built-in browser elements. A capitalized name such as <Greeting> refers to your JavaScript function.

React calls Greeting() while rendering. The returned JSX becomes part of the next interface snapshot.

Declare component functions at the top level of the module. Defining Greeting inside App creates a new component type on every render and can reset state below it.

A component should represent a meaningful UI responsibility. Do not wrap every div in a new function. Extract a component when the piece repeats, owns behavior, or becomes clearer with a name.

Render two <Greeting /> instances. Confirm React calls the same component function for two different positions in the tree.