arcbyte/React
LibraryReactComponents and Props

Components and Props

Create reusable components and pass immutable inputs through props.

Updated Tested with React 19.2

Components are regular JavaScript functions that return React elements. Props are their inputs, letting one component render many useful variations.

Passing a prop

Greeting.tsx
function Greeting({ name }: { name: string }) {
  return <p>Hello, {name}!</p>;
}

Using the component

Page.tsx
<Greeting name="Ari" />
<Greeting name="Mei" />

Compose children

Panel.tsx
function Panel({ title, children }: { title: string; children: React.ReactNode }) {
  return <section><h2>{title}</h2>{children}</section>;
}

<Panel title="Progress"><p>Three lessons complete.</p></Panel>

Keep this

  • Props are component inputs.
  • JSX attributes become prop values.
  • Nested JSX is available through the children prop.
  • TypeScript can describe the expected shape.
Your place is saved on this device.