React Part 3: Components and Props: Building Reusable UI

What you should know first: read React Part 1: What Is React and How to Build Your First React App and React Part 2: JSX Explained. You should be able to start a Vite project and write simple JSX with curly braces.

Every React app, from a small to-do list to Instagram’s web app, is built from one idea: React components and props. A component is a small, reusable piece of UI, like a button, a card or a whole page section. Props are the inputs you give a component so the same piece of UI can show different data. In this third part of the React series you will write your first components, split a page into a component tree, pass data with props, use the special children prop and build a small product list with a reusable ProductCard. Every example was run with React 19 and the output you see is real.

What are React components?

Look at any website and you will see repeated pieces: the same kind of card for every product, the same button style everywhere, the same header on every page. In plain HTML you copy and paste that markup again and again. When the design changes, you have to fix every copy.

A React component solves this. You write the markup once, inside a function, give it a name and then reuse it as many times as you like. The official React docs describe components as “JavaScript functions that you can sprinkle with markup” (see Your First Component on react.dev).

Your first component

Start with the Vite project from Part 1, or create a fresh one:

# Start from the Vite + React project you made in Part 1
$ npm create vite@latest react-components -- --template react
$ cd react-components && npm install
# Create a folder for your components
$ mkdir src/components
$ npm run dev
# Open the local URL Vite prints (usually http://localhost:5173)

A component needs only three things: a function, a name that starts with a capital letter, and a return with JSX. Put each component in its own file and export it so other files can import it.

// A component is a JavaScript function that returns JSX
export default function Greeting() {
  return <h2 className="greeting">Hello from my first component!</h2>;
}

import Greeting from "./Greeting.jsx";

export default function App() {
  return (
    <main>
      <h1>My React App</h1>
      <Greeting />
      <Greeting />
    </main>
  );
}

$ npx esbuild print.jsx --bundle --platform=node --jsx=automatic --outfile=out.js && node out.js
<main>
<h1>My React App</h1>
<h2 class="greeting">Hello from my first component!</h2>
<h2 class="greeting">Hello from my first component!</h2>
</main>

import { renderToStaticMarkup } from "react-dom/server";
import App from "./App.jsx";

console.log(renderToStaticMarkup(<App />).replaceAll("><", ">\n<"));

Click the three tabs to see each file, then open App.jsx and click ▶ Run to see the HTML that React creates.

A few things to notice:

• Greeting starts with a capital G. React uses this to tell your components apart from HTML tags. <greeting /> (lowercase) would be treated as an unknown HTML tag.
• export default makes the component the main export of the file, and import Greeting from "./Greeting.jsx" brings it in.
• We used <Greeting /> twice and got two headings. That is reuse in its simplest form.
• The print.jsx file is only for this article: it uses renderToStaticMarkup from react-dom/server to print the HTML in the terminal. In your Vite app, main.jsx renders App into the browser as you saw in Part 1.

If you want to try the terminal trick yourself, this is the exact command we used for every example in this post:

# Optional: see the HTML a component makes, without a browser
$ npm install -D esbuild
$ npx esbuild print.jsx --bundle --platform=node --jsx=automatic --outfile=out.js && node out.js

Thinking in components

Before you write code for a new screen, draw boxes around each part of the design and give each box a name. A box that appears several times, or that has one clear job, is a good component. Boxes inside boxes become child components. The result is a component tree with App at the top.

A simple rule from the React team: a component should ideally do one thing. If it grows too big, split it into smaller children. For the page above, App renders Header, ProductList and Footer, and ProductList renders one ProductCard per product. But how does each card know which product to show? That is where props come in.

What are props in React?

Props (short for “properties”) are the inputs of a component. You pass them exactly like HTML attributes. React collects all of them into one object and hands it to your function as its first argument. Think of a component as a function and props as its arguments: <UserCard name="Asha" /> is like calling UserCard({ name: "Asha" }).

// Props arrive as ONE object. We destructure the keys we need.
function UserCard({ name, role, city = "Remote" }) {
  return (
    <div className="user-card">
      <h3>{name}</h3>
      <p>{role} · {city}</p>
    </div>
  );
}

export default function App() {
  return (
    <section>
      <UserCard name="Asha" role="Frontend Developer" city="Pune" />
      <UserCard name="Rahul" role="Backend Developer" city="Bengaluru" />
      <UserCard name="Meera" role="Designer" />
    </section>
  );
}

$ npx esbuild print.jsx --bundle --platform=node --jsx=automatic --outfile=out.js && node out.js
<section>
<div class="user-card">
<h3>Asha</h3>
<p>Frontend Developer · Pune</p>
</div>
<div class="user-card">
<h3>Rahul</h3>
<p>Backend Developer · Bengaluru</p>
</div>
<div class="user-card">
<h3>Meera</h3>
<p>Designer · Remote</p>
</div>
</section>

Click ▶ Run. Notice Meera gets the default city “Remote” because no city prop was passed.

Here the function signature uses destructuring: { name, role, city = "Remote" } pulls those three keys out of the props object. It is the same as writing function UserCard(props) and then props.name, but shorter and easier to read. The = "Remote" part is a default value; it is used only when the prop is missing (or undefined).

Props are read-only

Props belong to the parent. The child can read them, but it must never change them. This is called one-way data flow: data moves down the tree, from parent to child, and that makes apps much easier to understand and debug.

React even protects you here. In development mode the props object is frozen, so trying to change it throws an error:

function Badge(props) {
  props.label = "Changed!"; // ❌ never change props
  return <span>{props.label}</span>;
}

function FixedBadge({ label }) {
  const text = label.toUpperCase(); // ✅ make a new value instead
  return <span>{text}</span>;
}

$ NODE_ENV=development node out.mjs
TypeError: Cannot assign to read only property 'label' of object '#<Object>'

Click ▶ Run to see the error React throws in development mode when a component changes its props.

So what do you do when something should change, like a counter or a “liked” button? You use state, which is exactly what we cover in the next part. For now remember: props are the settings a parent gives, state is the memory a component keeps for itself.

The children prop: building wrapper components

Sometimes you want a component that wraps other content, like a card, a modal or a page layout. Whatever you place between the opening and closing tags arrives in a special prop called children.

// "children" is whatever you put between <Card> and </Card>
function Card({ title, children }) {
  return (
    <div className="card">
      <h3 className="card-title">{title}</h3>
      <div className="card-body">{children}</div>
    </div>
  );
}

export default function App() {
  return (
    <>
      <Card title="Profile">
        <p>Asha is learning React.</p>
      </Card>
      <Card title="Skills">
        <ul>
          <li>HTML</li>
          <li>JavaScript</li>
        </ul>
      </Card>
    </>
  );
}

$ npx esbuild print.jsx --bundle --platform=node --jsx=automatic --outfile=out.js && node out.js
<div class="card">
<h3 class="card-title">Profile</h3>
<div class="card-body">
<p>Asha is learning React.</p>
</div>
</div>
<div class="card">
<h3 class="card-title">Skills</h3>
<div class="card-body">
<ul>
<li>HTML</li>
<li>JavaScript</li>
</ul>
</div>
</div>

Click ▶ Run to see how the content between the tags lands inside card-body.

The Card does not care what is inside it: a paragraph, a list, even other components. This pattern is called composition, and it is how most layout components (Layout, Modal, Panel) are built. You will use it everywhere.

What can you pass as a prop?

Almost anything. Click through the tabs to see the four kinds of values you will use most often:

Build a reusable ProductCard

Let’s put everything together. One ProductCard component receives a product object, a function prop and a boolean prop. The parent App loops over an array with map() (you saw this in Part 2) and renders one card per product. Each card gets a key so React can track it; we go deeper into keys in Part 6.

export default function ProductCard({ product, onBuy, showBadge = false }) {
  const { name, price, inStock, tags } = product;

  return (
    <article className="product">
      {showBadge && <span className="badge">Best seller</span>}
      <h3>{name}</h3>
      <p className="price">₹{price.toLocaleString("en-IN")}</p>
      <p>{inStock ? "In stock" : "Out of stock"}</p>
      <p className="tags">{tags.join(", ")}</p>
      <button disabled={!inStock} onClick={() => onBuy(name)}>
        Buy now
      </button>
    </article>
  );
}

import ProductCard from "./ProductCard.jsx";

const products = [
  { id: 1, name: "Wireless Mouse", price: 899, inStock: true, tags: ["usb", "office"] },
  { id: 2, name: "Mechanical Keyboard", price: 3499, inStock: true, tags: ["rgb", "gaming"] },
  { id: 3, name: "4K Monitor", price: 24999, inStock: false, tags: ["display"] },
];

function handleBuy(name) {
  console.log(`Added ${name} to cart`);
}

export default function App() {
  return (
    <div className="shop">
      {products.map((p) => (
        <ProductCard key={p.id} product={p} onBuy={handleBuy} showBadge={p.id === 2} />
      ))}
    </div>
  );
}

$ npx esbuild print.jsx --bundle --platform=node --jsx=automatic --outfile=out.js && node out.js
<div class="shop">
<article class="product">
<h3>Wireless Mouse</h3>
<p class="price">₹899</p>
<p>In stock</p>
<p class="tags">usb, office</p>
<button>Buy now</button>
</article>
<article class="product">
<span class="badge">Best seller</span>
<h3>Mechanical Keyboard</h3>
<p class="price">₹3,499</p>
<p>In stock</p>
<p class="tags">rgb, gaming</p>
<button>Buy now</button>
</article>
<article class="product">
<h3>4K Monitor</h3>
<p class="price">₹24,999</p>
<p>Out of stock</p>
<p class="tags">display</p>
<button disabled="">Buy now</button>
</article>
</div>

Open the App.jsx tab and click ▶ Run. The disabled button and the “Best seller” badge both come from props.

Look at the output: the same component produced three different cards. The price is formatted in Indian style with toLocaleString("en-IN"), the out-of-stock monitor has disabled on its button, and only the keyboard shows the badge. In the browser, clicking “Buy now” calls handleBuy in the parent, which logs Added Mechanical Keyboard to cart in the console.

To use it in your Vite app, save ProductCard.jsx in src/components/, put the App code in src/App.jsx (adjust the import path to ./components/ProductCard.jsx) and run npm run dev.

Common errors and fixes

Best practices for React components and props

• One component per file, file name equals component name: ProductCard.jsx exports ProductCard.
• Keep components small and focused on one job. If you scroll a lot inside one component, split it.
• Destructure props in the signature and give defaults for optional ones.
• Name props clearly: isOpen, hasError for booleans; onSomething for functions.
• Pass only what a component needs. Prefer name and price over a huge object with fifty fields when the card uses two.
• Use children for layout instead of many props like bodyText, bodyList, bodyImage.
• Keep components pure: same props in, same JSX out. No changing props or outside variables during render. This also lets the React Compiler optimise your code automatically later.

Practice task

Build a small “Team” page in your Vite project:

1. Create src/components/Avatar.jsx that takes name and size (default 48) and shows a circle with the person’s first letter.
2. Create TeamMemberCard.jsx that takes name, role and isLead, renders <Avatar /> and shows a “Team lead” label only when isLead is true.
3. Create a Section wrapper that takes a title and uses children.
4. In App.jsx, store four team members in an array and render them inside <Section title="Our team"> with map() and a key.
5. Bonus: add an onSayHi function prop that logs “Hi, <name>!” when a card’s button is clicked.

FAQ

Conclusion

You now know the two building blocks behind every React app. React components and props let you write a piece of UI once and reuse it with different data. You learned how to create and export a component, how to split a page into a component tree, how props arrive as one read-only object, how to set default values, how the children prop lets you build wrappers, and how to pass objects, booleans and functions to build a real ProductCard.

Need a refresher on curly braces and the JSX rules? Go back to React Part 2: JSX Explained. Want to read more on the official docs? See Passing Props to a Component on react.dev.