How to Build Your First React Component (Step-by-Step)

Question

Introduction

Your first React component doesn't need to be complicated. In fact, the biggest mistake beginners make is trying to build something too ambitious right away and getting stuck on concepts they haven't learned yet.

We're building something practical and genuinely useful: a reusable Testimonial Card component — the kind of thing that shows up in real portfolios and client projects constantly.

Step 1: Understand What a Component Actually Is

A React component is just a JavaScript function that returns some JSX (HTML-like syntax). That's the whole concept.

function Greeting() {
  return <h1>Hello, world!</h1>;
}

You use it like an HTML tag:

<Greeting />

Step 2: Build the Static Version First

Before adding any dynamic data, get the layout right with hardcoded content:

function TestimonialCard() {
  return (
    <div className="bg-slate-800 rounded-2xl p-6 max-w-sm shadow-lg">
      <p className="text-slate-300 mb-4">
        "This developer delivered exactly what we needed, on time and with great communication."
      </p>
      <div className="flex items-center gap-3">
        <div className="w-10 h-10 rounded-full bg-blue-500"></div>
        <div>
          <p className="text-white font-semibold">Sarah Ahmed</p>
          <p className="text-slate-400 text-sm">Product Manager</p>
        </div>
      </div>
    </div>
  );
}

Notice: no state, no props, nothing dynamic. Just structure and styling. This is genuinely how you should approach every new component — get the static layout right first.

Step 3: Make It Reusable with Props

Right now this card only shows one testimonial. Props let you reuse the same component with different data:

function TestimonialCard({ quote, name, role }) {
  return (
    <div className="bg-slate-800 rounded-2xl p-6 max-w-sm shadow-lg">
      <p className="text-slate-300 mb-4">"{quote}"</p>
      <div className="flex items-center gap-3">
        <div className="w-10 h-10 rounded-full bg-blue-500"></div>
        <div>
          <p className="text-white font-semibold">{name}</p>
          <p className="text-slate-400 text-sm">{role}</p>
        </div>
      </div>
    </div>
  );
}

Now you use it like this:

<TestimonialCard
  quote="This developer delivered exactly what we needed, on time."
  name="Sarah Ahmed"
  role="Product Manager"
/>

{ quote, name, role } is destructuring the props object — same as writing props.quote, props.name, props.role, just cleaner.

Step 4: Render a List of Them

In a real project, you'd map over an array of testimonial data:

const testimonials = [
  { quote: "Great work, fast turnaround.", name: "Ali Raza", role: "Founder" },
  { quote: "Clean code and clear communication.", name: "Sarah Ahmed", role: "PM" },
  { quote: "Would hire again without hesitation.", name: "James Lee", role: "CTO" },
];

function TestimonialGrid() {
  return (
    <div className="grid md:grid-cols-3 gap-6 p-6">
      {testimonials.map((item, index) => (
        <TestimonialCard key={index} {...item} />
      ))}
    </div>
  );
}

{...item} spreads the object properties as individual props automatically — a common React pattern once you're comfortable with the basics.

Important: the key prop is required whenever you render a list. React uses it to track which items changed. In a real project, use a unique ID from your data rather than the array index if possible.

Step 5: Add a Bit of Interactivity (Optional)

Want to show a "Read more" toggle for long quotes? That's where useState comes in — covered in detail in Article 5, but here's the quick version:

function TestimonialCard({ quote, name, role }) {
  const [expanded, setExpanded] = useState(false);

  return (
    <div className="bg-slate-800 rounded-2xl p-6 max-w-sm shadow-lg">
      <p className={`text-slate-300 mb-4 ${!expanded && "line-clamp-2"}`}>
        "{quote}"
      </p>
      <button onClick={() => setExpanded(!expanded)} className="text-blue-400 text-sm mb-4">
        {expanded ? "Show less" : "Read more"}
      </button>
      {/* rest of the card */}
    </div>
  );
}

Common Beginner Mistakes

1. Trying to add state and interactivity before the static layout is right. Get the structure and styling working first — add logic after.
2. Forgetting the key prop when rendering lists. React will warn you in the console — don't ignore that warning.
3. Not destructuring props. Writing props.quote everywhere instead of destructuring is more typing and harder to read.
4. Building one giant component instead of small, focused ones. If a component is doing three different jobs, split it into three components.

Final Thoughts

Building your first real component is less about React "magic" and more about breaking a UI down into small, reusable pieces — static first, then props, then interactivity if needed. Rebuild this same pattern (static → props → list → interactivity) for your next few components and it'll start feeling automatic.

---

Muhammad Farhan is a Frontend Developer specializing in React.js and Tailwind CSS, based in Dera Ismail Khan, Pakistan.
Portfolio: Muhammad Farhan