SESSION 040 — React Migration

CONCEPTS.UNLOCKED

🔄

The DOM Sync Problem

The problem React solves: keeping UI in sync with state. In vanilla JS, every state change requires manually updating the DOM. React automates this — change the state, UI updates automatically.

🧩

React Components

Functions that return UI. A component describes what the screen should look like given some data. Reusable, composable, self-contained building blocks.

</>

JSX

HTML-like syntax inside JavaScript: <button onClick={handler}>Click</button>. Not a string, not HTML — it's syntactic sugar for React.createElement(). JS logic + UI template in one file.

📦

Props

Passing data to components. <ToolButton name="Brush" icon="🖌" /> — name and icon are props. Props flow down from parent to child. Components are configured by their props.

⚡

Vite + React Setup

npm create vite@latest — modern project scaffolding. Hot module replacement (changes appear instantly without refresh). Fast dev server. Production builds optimized automatically.

📐

Declarative vs Imperative

Declarative: "here's what the UI should look like given this data." Imperative: "find this element, change its class, update the text." React is declarative — describe the result, not the steps.

HANDS-ON.TASKS

Feel the Pain First

▶

Add a "Sepia" filter to vanilla PixelCraft:

#	Change	File
1	Add button HTML	index.html
2	Add CSS	styles.css
3	Add event listener	ui.js
4	Add to filter state	state.js
5	Update slider	ui.js
6	Update keyboard shortcut	ui.js
7	Update export metadata	canvas.js

7 changes in 4 files for ONE feature. Imagine 20 features. This is the scaling problem React solves.

Set Up React with Vite

▶

npm create vite@latest pixelcraft-react -- --template react
cd pixelcraft-react && npm install
npm run dev

Open http://localhost:5173. You now have a running React app with hot reload — edit code, see changes instantly without refreshing.

Build the ToolButton Component

▶

function ToolButton({ name, icon, onClick, active }) {
  return (
    <button
      className={`tool-btn ${active ? 'active' : ''}`}
      onClick={onClick}
      title={name}
    >
      {icon} {name}
    </button>
  );
}

This is a React component: a function that receives props ({ name, icon, onClick, active }) and returns JSX. The active class is computed from props — no manual DOM manipulation.

Build the Toolbar Component

▶

function Toolbar({ tools, activeTool, onToolSelect }) {
  return (
    <nav className="toolbar">
      {tools.map(tool => (
        <ToolButton
          key={tool.id}
          name={tool.name}
          icon={tool.icon}
          active={activeTool === tool.id}
          onClick={() => onToolSelect(tool.id)}
        />
      ))}
    </nav>
  );
}

tools.map() renders one ToolButton per tool. Adding a new tool = adding one object to the tools array. No HTML editing, no event wiring, no DOM sync. The key prop helps React track which items changed.

Compare: Vanilla vs React

▶

Aspect	Vanilla Toolbar	React Toolbar
Lines of code	~50 lines DOM manipulation	~15 lines JSX
Add a tool	HTML + CSS + JS + state	1 object in array
Active state	Manual classList toggle	Derived from props
Paradigm	Imperative	Declarative

The paradigm shift: describe WHAT the UI should look like → React handles the DOM updates.

Close the Ticket

▶

git switch -c refactor/PIXELCRAFT-028-react-migration
git add .
git commit -m "Set up React + Vite, migrate toolbar component (PIXELCRAFT-028)"
git push origin refactor/PIXELCRAFT-028-react-migration
# PR → Review → Merge → Close ticket ✅

CS.DEEP-DIVE

Declarative programming.

React is declarative: "here's what the toolbar should look like given this data." The previous imperative approach was: "find the button, change its class, update the text, add a listener."

// Declarative is everywhere:

SQL         → "give me users over 18"
HTML        → "here's the document structure"
React       → "here's the UI for this state"
CSS         → "make this red and centered"
Functional  → describe transformations

// Declarative code is typically shorter,
// less buggy, and easier to reason about
// because you describe the desired outcome,
// not the step-by-step process.

REF.MATERIAL

ARTICLE

Quick Start — React.dev

React Team

The official React tutorial: components, JSX, props, rendering lists, and responding to events. The best starting point for React.

REACTOFFICIALESSENTIAL

VIDEO

React in 100 Seconds — Fireship

Fireship

Ultra-fast React overview: components, JSX, state, props, and why React dominates frontend development.

REACTQUICK

ARTICLE

Thinking in React — React.dev

React Team

The mental model for React: break UI into components, build a static version, identify state, determine where state lives, add data flow.

REACTMENTAL MODELESSENTIAL

VIDEO

React Tutorial for Beginners — Programming with Mosh

Programming with Mosh

Comprehensive React tutorial: setup with Vite, components, props, JSX expressions, and building your first interactive app.

REACTTUTORIAL

ARTICLE

Getting Started — Vite

Vite

Official Vite guide: project setup, dev server, hot module replacement, and production builds. The modern standard for React projects.

VITETOOLING

REACT MIGRATION