Chapter 13 — React with Claude | The Designer Who Codes

What React actually is — and what it isn't

React is a JavaScript library for building user interfaces. That's all. It's not a full framework (though it has an ecosystem around it). It's not magic. It's a way of writing UI as a tree of components, each of which manages its own state.

Everything you've learned still applies. HTML structure, CSS styling, JavaScript events — React just organizes them differently. And because it's so widely used, Claude is extremely good at writing React code. This chapter is about understanding React well enough to direct it.

💡 When to use React

Not everything needs React

A marketing site, a portfolio, a course website — plain HTML/CSS/JS is faster to build and simpler to maintain. Use React when you have complex interactive state: a dashboard, a multi-step form, a data-driven app where the UI needs to update frequently based on changing data.

JSX — HTML inside JavaScript

React uses JSX — a syntax extension that lets you write HTML-like code inside JavaScript. It looks strange at first, but it clicks quickly.

// Plain HTML
<div class="card">
  <h2>Hello World</h2>
</div>

// The same thing in JSX (inside a React component)
function Card() {
  return (
    <div className="card">  {/* "class" becomes "className" in JSX */}
      <h2>Hello World</h2>
    </div>
  );
}

// JSX lets you mix JavaScript expressions using {}
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;  // outputs: Hello, Alex!
}

// You can't return multiple elements without a wrapper
// Use a Fragment (<></>) to avoid adding unnecessary divs
function TwoThings() {
  return (
    <>
      <p>First thing</p>
      <p>Second thing</p>
    </>
  );
}

Components — the thing you already know

A React component is just a JavaScript function that returns JSX. It's the same concept as a Figma component or a CSS BEM block — a reusable, self-contained piece of UI.

// A simple Button component
function Button({ label, onClick, variant = 'primary' }) {
  return (
    <button
      className={`btn btn--${variant}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
}

// Using it — pass values as "props" (like Figma properties)
function App() {
  return (
    <div>
      <Button label="Get Started" variant="primary" onClick={() => alert('clicked!')} />
      <Button label="Learn More" variant="secondary" />
      <Button label="Unavailable" variant="disabled" />
    </div>
  );
}

💚 The big click

Props are Figma component properties

In Figma you have a Button component with a "variant" property (primary/secondary/disabled). In React you have a Button component with a variant prop. It's literally the same concept. If you've been designing with component variants, you already understand how props work.

State — what makes UIs interactive

State is data that can change — and when it changes, the UI updates to reflect it. React's useState hook is how you define and update state inside a component.

import { useState } from 'react';

function Counter() {
  // useState returns: [current value, function to update it]
  const [count, setCount] = useState(0); // starts at 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

// A toggle — very common pattern
function ThemeToggle() {
  const [isDark, setIsDark] = useState(true);

  return (
    <button onClick={() => setIsDark(!isDark)}>
      {isDark ? '🌙 Dark' : '☀️ Light'}
    </button>
  );
}

Working with Claude on React

Here's the key insight: understand React's core patterns deeply enough that you could explain them to someone else. Props, state, and re-renders aren't magic — they're a mental model. Once you have that model, Claude becomes a fast typist, not a black box you're dependent on.

💡 Prompt formula

How to ask Claude for React components

"Build a React component called [Name] that takes these props: [list them]. It should [describe behavior]. Use TypeScript. Use Tailwind for styling. It should have these states: [default/hover/loading/error/empty]. Include an example of how to use it."

⚠️ Important

React needs a build step — you can't just open it in a browser

Unlike plain HTML/CSS/JS, React requires a build tool to compile the JSX syntax into JavaScript that browsers understand. Use Create React App, Vite, or Next.js to set up your project, or use StackBlitz in your browser for instant React environments — no install needed.

Getting started: StackBlitz

StackBlitz is a browser-based development environment. Visit stackblitz.com/edit/react and you get an instant React environment — no install, no setup. Perfect for practicing.

import { useState } from 'react';
import './styles.css';

// Badge component with variants (like our HTML/CSS version from Ch.10)
function Badge({ label, variant = 'default' }) {
  return <span className={`badge badge--${variant}`}>{label}</span>;
}

// Card component
function ProductCard({ title, price, badge }) {
  const [saved, setSaved] = useState(false);

  return (
    <div className="card">
      {badge && <Badge label={badge} variant="active" />}
      <h3 className="card__title">{title}</h3>
      <div className="card__footer">
        <span className="card__price">${price}</span>
        <button
          className={`btn ${saved ? 'btn--saved' : ''}`}
          onClick={() => setSaved(!saved)}
        >
          {saved ? '✓ Saved' : 'Save'}
        </button>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <div className="grid">
      <ProductCard title="Design System Kit" price={49} badge="New" />
      <ProductCard title="UI Component Pack" price={79} />
      <ProductCard title="Icon Library" price={29} badge="Sale" />
    </div>
  );
}

You need: StackBlitz (stackblitz.com) Claude (claude.ai)

1

Go to stackblitz.com/edit/react. You'll see a React app ready to edit. Delete everything in App.js — start fresh.
2

Ask Claude: "Build a React Tabs component with these props: tabs (array of {'{'}id, label, content{'}'}), and defaultTab (id of the tab open by default). Clicking a tab should show its content. Style it with inline CSS — dark background (#0a0a0a), yellow (#f5e642) accent on active tab, Inter font."
3

Paste the component into StackBlitz. Create 3 tabs: "Design", "Code", "Deploy". Verify they all switch correctly.
4

Then ask Claude: "Add a red notification badge dot to any tab that has the property hasNotification: true." Implement that change yourself based on Claude's answer.

Key takeaways

React is JavaScript + JSX — it's not magic, it's just a way of organizing UI into reusable components
Props = Figma component properties. State = data that changes and triggers UI updates
useState(initialValue) returns [value, setValue]. Calling setValue re-renders the component
Goal: understand React well enough to write a simple component from scratch, then use Claude to go faster — not to avoid understanding it
Use StackBlitz for instant React environments; use Vite or Next.js for local development