← Back to blog

Your First React Component — A Designer's Walkthrough

Building your first React component doesn't have to be overwhelming. Here's a step-by-step walkthrough using an "Add to cart" button as your starting point.

Amarneethi·
Your First React Component — A Designer's Walkthrough

Start With Something Familiar

The best way to learn React is to build something you can immediately understand — something with a clear visual outcome and a single, obvious interaction. An "Add to cart" button is perfect for this.

Here's what we're building: a button that shows "Add to cart". When you click it, it says "Added!" and changes colour. That's it.

The Code

export default function AddToCart() {
  const label = "Add to cart";

  return (
    <div className="p-6">
      <button className="px-6 py-3 bg-indigo-600 text-white rounded-full font-semibold">
        {label}
      </button>
    </div>
  );
}

Breaking It Down

const label = "Add to cart" — This is a variable. It stores the button's text. We could have written the text directly in the JSX, but storing it in a variable is the first step toward making it dynamic.

<div className="p-6"> — A wrapper frame. The p-6 gives it 24px of padding on all sides.

<button className="..."> — The button element. The classes give it:

{label} — Renders the value of the label variable inside the button.

The Mental Model: Constants, Structure, Style

Every React component — no matter how complex — follows the same basic pattern:

  1. Constants / data at the top (what the component knows)
  2. JSX structure in the return (what the component renders)
  3. Tailwind classes on each element (how it looks)

Once this pattern clicks, more complex components become easier to read because you know where to look.

Trying It Yourself

The easiest way to experiment is with CodeSandbox — no setup required. Create a new React sandbox, paste this code into App.js, and hit save. You'll see your button appear immediately.

From here, try:

Each change is instant feedback. This is the design equivalent of adjusting values in Figma's inspect panel — except you're working directly in the source.

Why This Matters

This tiny component teaches the vocabulary you need for everything that comes next. Variables, JSX, Tailwind classes — these three concepts appear in every React component you'll ever read or write. The rest is just adding more of the same, piece by piece.

With AI tools, you could ask: "Add a click handler so this button turns green and says 'Added!' when clicked." The AI will give you code you now have the vocabulary to understand — and adjust.