Components

Say a page needs the same greeting card in three places, each with the same heading and layout. Copy the markup three times and you now have three places to update every time the design changes. React's answer is to write that piece of UI once and reuse it as a component: a JavaScript function that returns JSX, a description of a piece of UI. You use it by writing it like an HTML tag, and React calls the function to figure out what to put on the screen.

Here's the smallest one:

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

Greeting is a function that returns <h1>Hello</h1>. To actually show it, you render it inside another component, using it like a tag:

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
    </div>
  )
}

App is also a component. It renders two Greeting components inside a div, and each one prints its own <h1>Hello</h1>. This is composition: you build small components and combine them into bigger ones, all the way up to a full app.

A couple of rules go with this. Component names start with a capital letter. Greeting and App work as tags because React can tell them apart from regular HTML elements like div or h1, which start lowercase. A component that returns JSX also has to return a single root element, the way App wraps its two Greeting tags in one surrounding div. This trips up almost everyone the first time: return two sibling elements without wrapping them and React throws an error. If you need to return siblings without wrapping them in an extra div, use a fragment:

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

The <> and </> are a fragment. It groups the h1 and p into one return value without adding an element to the page.

Version note

Older React code often defines components as classes instead of functions:

class Greeting extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

You'll still see class components like this in existing codebases. This handbook uses function components throughout, which is the current standard way to write React. See History and versions for how React got from one style to the other.

Components are called during rendering, so treat the function body purely as a place for calculation, and keep side effects out of it. Given the same props, a component should return the same JSX every time. Don't fetch data, set a timer, or mutate variables outside the function directly in the body. Those belong in a hook like useEffect (covered later, in Effects), which runs code after the render is done rather than during it. Reading the DOM, writing to a variable declared outside the component, or relying on a value that changes between calls all break this and lead to bugs that are hard to trace, because React may call your component more than once per render for reasons outside your control.

JunoA component is a function The whole idea fits in one sentence: a component is a function, and calling it with a tag like <Greeting /> runs that function and shows what it returns. Once that clicks, the rest of React is learning what you can put inside these functions.

JunoA component is a function Components are the unit you build with in React. Keep them small, name them with a capital letter, and return a single root, using a fragment when you need to group siblings without an extra wrapper element. Composition, small components combined into bigger ones, is how every real screen gets built.

JunoA component is a function A component is a pure function of its props: same input, same JSX out, no side effects in the body. That constraint is what lets React call your components freely, batch renders, and reorder work without breaking anything. Side effects have their own hook for a reason.

Next up: JSX, the syntax you saw inside these return statements.