Components and props in React

Components let you split a screen into reusable pieces. Props are the data a parent passes down to each piece.

All React examples React: usage and stats

Components and props in React: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Write a component as a function. Avatar and ProfileCard are plain JavaScript functions that return JSX. Their names start with a capital letter so JSX treats them as components. [1]
Pass data with props. ProfileCard reads name, role and color from its props and hands two of them on to Avatar. Each card on screen gets different props. [2]
Compose the screen. App renders three ProfileCard elements, the same way you would nest HTML tags. [2]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

function Avatar({ name, color }) {
  return (
    <div style={{ width: 44, height: 44, borderRadius: '50%', background: color, color: '#111',
      display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 20 }}>
      {name[0]}
    </div>
  );
}

function ProfileCard({ name, role, color }) {
  return (
    <div style={{ display: 'flex', gap: 14, alignItems: 'center', width: 280, padding: '12px 16px',
      background: '#1e1f26', border: '1px solid #33353f', borderRadius: 12 }}>
      <Avatar name={name} color={color} />
      <div>
        <div style={{ fontSize: 16, fontWeight: 600 }}>{name}</div>
        <div style={{ fontSize: 13, color: '#9aa0a6' }}>{role}</div>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, padding: 24, fontFamily: 'system-ui, sans-serif', color: '#eee' }}>
      <ProfileCard name="Ada Lovelace" role="Mathematician" color="#8ab4f8" />
      <ProfileCard name="Grace Hopper" role="Computer scientist" color="#81c995" />
      <ProfileCard name="Hedy Lamarr" role="Inventor" color="#f6ae2d" />
    </div>
  );
}

Ctrl/⌘ + Enter runs

Three profile cards render from the same component; change a prop in App and the card updates. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react 19.3.0, react-dom 19.3.0. Needs WebGL.

More React examples

State with useState in React Conditional rendering in React Rendering lists in React Filtering a list from an input in React

Sources

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with React? Ask AgentGid →