React Components and Props, explained with one small app

What is a component, exactly?

A component is a JavaScript function whose return value describes what should appear on screen:

function Greeting() {
  return <h1>Hello from my first component</h1>;
}

That is the whole idea. React takes the returned JSX, turns it into real DOM elements, and puts them on the page. Three rules make this work:

1. The function name starts with a capital letter. React uses the capital letter to tell your components apart from built-in HTML tags.
2. It returns exactly one root element. Wrap siblings in a <div> or a fragment <>…</>.
3. You use it like an HTML tag: <Greeting /> renders the component wherever you place it.

A real app is just components inside components: App renders Header, ProductList and Footer; ProductList renders many ProductCards. The small app below shows exactly this pattern with two components.

What are props — and why not just use variables?

Props are how data flows *into* a component. The parent decides the values; the component receives them as one object argument:

function InfoCard({ title, text }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{text}</p>
    </div>
  );
}

{ title, text } is destructuring — it pulls the two props out of the props object so you can use them directly. Curly braces inside JSX mean "evaluate this JavaScript": {title} inserts the value of title.

Why not just hard-code variables inside the component? Because then the component can only ever show one thing. Props make it reusable:

<InfoCard title="Components" text="A component is a reusable piece of UI." />
<InfoCard title="Props" text="Props are the inputs a component receives." />

Same component, different output — decided by the parent at each use. That is the core React pattern: parents own the data, children receive it through props.

Two non-negotiable rules about props:

• Props are read-only. A component must never reassign its props (title = "other" is a bug). If data needs to change over time, that is *state* — covered in the next tutorial, React Hooks for Beginners (/tutorials/full-stack/react-hooks-usestate-useeffect).
• Data flows one way: down. A child cannot pass props back up to its parent. Parents pass down; children render.

The worked example: one small app, step by step

We will build an app that renders three info cards from one InfoCard component. Follow each step in order — the expected result of each is stated.

Step 1 — Scaffold the project. In your terminal:

npm create vite@latest react-cards -- --template react
cd react-cards
npm install

Expected output: Vite creates the react-cards folder and prints "Done. Now run…"; npm install finishes with no errors. This is the standard setup the React from Scratch course uses ("Why React? Setting Up Your First Project").

Step 2 — Start the dev server:

npm run dev

Expected output: the terminal prints Local: http://localhost:5173/ (the port may differ if 5173 is taken — use whichever URL it prints). Open that URL in Chrome: you see the default Vite + React starter page. Leave the server running; it reloads automatically when you save files.

Step 3 — Create the component. Create the file src/components/InfoCard.jsx with exactly this content:

function InfoCard({ title, text }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{text}</p>
    </div>
  );
}

export default InfoCard;

Step 4 — Use it in App. Replace the contents of src/App.jsx with:

import InfoCard from "./components/InfoCard";

function App() {
  return (
    <main>
      <h1>My first React app</h1>
      <InfoCard title="Components" text="A component is a reusable piece of UI." />
      <InfoCard title="Props" text="Props are the inputs a component receives." />
      <InfoCard title="Reuse" text="One component, used three times, with different props." />
    </main>
  );
}

export default App;

Check: the import path is correct (App.jsx sits in src/, the component in src/components/); all three <InfoCard /> tags are self-closed with />; everything is wrapped in one <main> root. You do not need to touch src/main.jsx — the Vite template already renders <App /> into the page.

Step 5 — Add a little styling. Append this to src/index.css:

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  max-width: 420px;
}

Save everything. The dev server reloads on its own.

What does the finished app look like, and how do you check it?

Expected result: the page shows "My first React app" as a heading, followed by three bordered cards — "Components", "Props" and "Reuse" — each with its own paragraph. Three cards, one component definition: that is props doing their job.

Verify it properly in Chrome DevTools (F12 → Elements): expand the DOM and confirm you see a <main> containing an <h1> and three <div class="card"> blocks, each with its <h2> and <p> in the right order. If a card is missing, the usual cause is an unclosed tag in App.jsx — the terminal running npm run dev will show a compile error pointing at the line.

Common mistakes

• Writing class instead of className. In JSX, class is a reserved word, so React uses className. Using class produces a warning and the styles silently do not apply — the single most common beginner error in this tutorial.
• Forgetting to export or import. If the browser shows a blank page and the console says InfoCard is not defined, you forgot export default InfoCard in the component file or the import line in App.jsx. Check the import path character by character: ./components/InfoCard.
• Trying to change props inside the component. Props are read-only — title = "new" will not work the way you expect and React will warn you. Data that changes over time belongs in *state*, not props (that is the next tutorial in this series).
• Lowercase component names. <infoCard /> or <infocard /> is treated as a plain HTML tag and renders nothing useful. Components must start with a capital letter: <InfoCard />.
• Returning two root elements. A component's return must have one root. return (<h2>..</h2><p>..</p>) fails to compile; wrap them in a <div> or a fragment <>…</>.

Frequently asked questions