Can AI Teach Me React (Project‑Based Learning)

Rebuilding the Xbox 360 Blades Dashboard in React

Inspired by Puru's MacOS in Svelte!

Point-Form Summary

Project Setup

• Created xbox-360-blades-web repo
• Initialized React + Vite
• Selected React/JS without experimental bundler

Project Philosophy

• Build UI → Add interaction → Add data
• Learn React through small, manageable steps
• Avoid overwhelm by layering complexity gradually

React Concepts Learned

• Props: passing information into components
• State (useState): managing dynamic values like active Blade
• List rendering (.map): generating UI from arrays

Iterative Development Workflow

• Start with simple placeholder UI
• Replace placeholders with basic components
• Improve structure step-by-step
• Replace hard-coded elements with mapped components
• Add and refine state logic as the UI evolves
• Test, observe, adjust - repeat

What We’ve Actually Built

• A Blade component
• A structure that can render multiple Blades
• State-driven active Blade logic
• A foundation for future animation + navigation

Learning Approach

• Explain each concept as it appears
• Build intuition, not memorization
• Use real UI examples to understand React’s mental model

Summary of What's Next

I haven’t done these steps yet, but if the plan continues the way it currently sits, these are the next steps

• Add left/right navigation with smooth animations
• Build a clean component hierarchy
• Implement content for each Blade
• Introduce simple dynamic data
• Optionally add backend logic later
• Add polish: sound, micro-animations, focus movement

Step-By-Step: AI’s React Learning Plan

Matt’s Note: I got ChatGPT to summarize what we’ve done together so far throughout this project. That summary can be found in detail below…

Getting the Project Started

We kicked things off by creating a fresh React project using Vite inside a GitHub repo called xbox-360-blades-web. We selected:

• React
• JavaScript
• No experimental bundler

The goal was simplicity and stability so we could focus fully on learning React.

How We’ve Been Learning: Iterations, Experiments, and Refinements

One of the biggest themes of this project has been iterative development.

Instead of trying to build huge pieces all at once, we:

1. Write a small piece of code to get something visual on the screen
2. Observe what happens
3. Replace or improve it to get closer to the desired UI
4. Repeat

This mirrors how real developers think: try ideas, test assumptions, and evolve the code in layers.

Examples of Iteration in This Project

• At first, we created simple placeholder JSX to confirm React was rendering.
• Then we replaced the placeholder with a rough “Blade” component.
• Later, we started mapping over an array to generate multiple Blades instead of hard-coding them.
• We added useState to track the active Blade, then adjusted it after seeing how the UI responded.
• Once we saw it update correctly, we discussed how to reorganize components for better structure.

Each step wasn’t “the final code” - it was the next step toward understanding.

This iterative approach has two benefits:

1. You learn React concepts in context
2. The interface gets more accurate and more functional over time

Establishing the Project Philosophy

We committed to a predictable, low-stress workflow:

1. UI first - get the Blades looking right on screen.
2. Interactivity next - add animations, navigation, and keyboard/controller-like movement.
3. Data layer last - only when the interface is complete will we explore servers or APIs.

This layering matches how professional teams structure front-end projects.

Learning React Through Real Use

Since you’re completely new to React, we’ve approached every concept through doing rather than just reading.

Props

We used props to pass data into Blade components.

Explained visually as “passing a note down the component tree.”

State

We introduced useState, explained as React’s way of remembering values.

We clarified:

• Why const still works with changing data
• How React re-renders components when state changes
• How something like activeIndex powers UI transitions

Mapping Blade Components

We set up blades.map() to render components dynamically - a cornerstone of how React handles lists.

This also fit perfectly into the iterative experience:

• First: hard-coded Blade
• Then: two hard-coded Blades
• Then: use an array
• Finally: .map() to generate them cleanly

Each version replaced the previous one, teaching not just React but also why certain patterns are better.

Building UI Architecture

We talked through organizing the Blades into smaller, reusable pieces - mimicking the original Xbox structure.

• A Blade component
• A container to show multiple Blades
• Tracking which Blade is “active”
• Future animations and transitions

That structure emerged naturally through multiple iterations.

How to support the show

Patreon

Prices subject to change and are listed in USD

• Support the show from as little as ~$1/month
• Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
• Help support the HTML All The Things Podcast: Click Here

Scrimba Discount - Coding Courses!

Learn to code using Scrimba with their interactive follow-along code editor.

Join their exclusive discord communities and network to find your first job!

Use our affiliate link for a 20% discount!!

• Click the link to take you to the Scrimba site
• A pop-up should appear on your screen with the discount amount and instructions on how to claim it
• Discount is for new accounts only

We receive a monetary kickback if you use our affiliate link and make a purchase.