React Components

A React component is a JavaScript function that returns UI. You build pages by combining small components.

Reactintermediate7 min read

Components return JSX, an HTML-like syntax inside JavaScript. Component names must start with a capital letter.

TSX

function Welcome({ name }) {
  return <h1>Hello, {name}</h1>;
}

export default function App() {
  return (
    <>
      <Welcome name="Dara" />
      <Welcome name="Sophea" />
    </>
  );
}

Props

Props are the inputs of a component, like function parameters. Inside JSX, curly braces {} insert a JavaScript value.

Code examples

A reusable button · TSX

function Button({ label }) {
  return <button>{label}</button>;
}

<Button label="Save" />

Expected output

A button with the text "Save".

Common mistakes

Common mistake: Lowercase component names

<button> is treated as an HTML tag. Name your components with a capital letter, like <Button>.

React Components · CodeChallenge