React Components and Props Explained Simply (2026)

Quick answer: A React component is a JavaScript function that returns UI, and props are the inputs you pass to it — like function arguments for markup. <Greeting name="Asha" /> renders whatever the Greeting component returns for that name. Splitting UI into small components keeps code testable and reusable, and the props flow in one direction: parent to child. This guide gives you the splitting rules, a worked card-grid example, and the mistakes everyone makes in week one.

Components are just functions

Everything in React is a component, and every component is a function. Two definitions, identical behavior:

// 1. Function declaration
function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

// 2. Destructured (the common style)
function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

// Using it:
<Greeting name="Asha" />

Component names must start with a capital letter — lowercase names are treated as HTML tags. That single rule explains most “my component renders nothing” mystery bugs in the first week.

Props: one-way data flow

Props move strictly from parent to child. A child can read them but never modify them — which is why React calls them immutable. The mental model that prevents the classic beginner error:

You might try	What happens	Do this instead
props.name = 'New' in the child	Silent failure or console error; React ignores it	Change the value where it is created (parent) or via state
Passing everything down five levels	“Prop drilling” — unmaintainable chains	Keep components shallow; lift shared state to a common parent (see the useState guide)
Missing props render as undefined	Invisible blank UI	Use defaults: function Greeting({ name = 'Guest' })

Worked example: a reusable card grid

The real payoff of components is reusing one definition for many items. Here a CourseCard component renders differently per prop values:

function CourseCard({ title, lessons, level }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{lessons} lessons · {level}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <CourseCard title="React Basics" lessons={12} level="Beginner" />
      <CourseCard title="React Hooks" lessons={8} level="Intermediate" />
      <CourseCard title="TypeScript with React" lessons={15} level="Intermediate" />
    </div>
  );
}

Numbers and expressions pass in braces (lessons={12}); strings can use quotes. className replaces class because class is a reserved word in JavaScript. In a real app those three cards come from a data array — that combination is the lists and keys guide in this series.

When to split a component

• Repetition: the same markup appears twice — extract it.
• Size: a component passes ~100 lines — split by responsibility.
• State boundaries: part of the UI updates while the rest stands still — that part wants to be its own component.
• Testing: any logic you want to test in isolation deserves its own component.

Components alone are static — the same props render the same output. The moment you need a counter, a form, a toggle, you need state, which is exactly what the next guide covers: the useState hook, explained with working examples.

For one-to-one guidance while you build your first component libraries, Ampersand Academy teaches React one-to-one, reviewing your code live as you write it.

Frequently asked questions