I Built The Same React Component By Hand And With Claude

I built the same React component twice. Once by hand, typing every line. Once with a single Claude prompt. The point of the race is not which is faster. It is which skill still matters when the project moves to the next framework.

The component is a star rating. Five stars, hover previews the rating, click sets it. The kind of thing a developer builds a hundred times across a career.

Building it by hand

By hand the component is about 24 lines of TypeScript. Two pieces of state, an array map over the stars, a click handler, two hover handlers, and a conditional class to fill the stars.

import { useState } from "react";

export function StarRating() {
  const max = 5;
  const [rating, setRating] = useState(0);
  const [hover, setHover] = useState(0);
  return (
    <div className="stars">
      {Array.from({ length: max }, (_, i) => i + 1).map((star) => (
        <button
          key={star}
          className={star <= (hover || rating) ? "on" : "off"}
          onClick={() => setRating(star)}
          onMouseEnter={() => setHover(star)}
          onMouseLeave={() => setHover(0)}
        >
          ★
        </button>
      ))}
    </div>
  );
}

It works. But every line was typed from memory. And none of it carries forward. When React changes its API, or the project switches frameworks, all 24 lines get rewritten. This skill resets. It does not compound.

Building it with one prompt

The other way is a single prompt. Five stars, hover preview, click to set, TypeScript. Claude returns the full component in seconds, and it goes further than the hand-built version. It adds a max prop, a role="radiogroup", and aria-checked on each star, without being asked.

claude "Build a React star rating component in TypeScript.
Five stars. Hover previews the rating. Click sets it."

Same working stars. The difference is where the effort went. Not on typing the map and the handlers. On describing what good output looks like.

The honest catch

The model is not a magic button. The first generated version missed half-star precision. A developer who does not know what a good rating component needs would not catch that. The skill did not disappear. It moved. It is now the skill of reading the output, spotting the gap, and asking for exactly the right fix.

That is the part worth sitting with. Prompt engineering is not the absence of programming knowledge. It is programming knowledge pointed at a different surface. The developer still has to know what correct looks like. Anthropic’s own Claude Code best practices make the same point: the quality of the output tracks the quality of the instruction.

Why the prompt skill compounds

Here is the part that settles the argument. Change one word in the prompt and the same description produces a Vue version, then a Svelte version.

• React: useState, onClick, onMouseEnter
• Vue: ref(), @click, @mouseenter
• Svelte: $state, on:click, on:mouseenter

The framework syntax is different in each one. The prompt is almost identical. A developer who learned only React syntax starts over for Vue and again for Svelte. A developer who learned to describe the component ships in all three. The 2025 Stack Overflow Developer Survey puts AI tool usage at 84% of developers, and the gap between describing intent and hand-writing syntax is exactly where that number comes from.

What this means for what you practice

None of this says frameworks are worthless or that hand-coding is dead. React is not going anywhere. The point is narrower and more useful. The skill that pays off across every framework and every model release is knowing what to ask for and reading what comes back. The skill that resets on every framework change is memorizing this quarter’s syntax.

Spend the next 1,000 hours accordingly. For the full build with both versions side by side, watch the video above, or catch the two-minute version on the channel.