The React showroom after Phase 11
Bike.jsx, App.jsx and main.jsx joined into one module (local imports cannot run in the preview). The live copy picks Lumen blue by itself, to show the repaint, and logs the paint colour.
The showroom is rebuilt in React Three Fiber at react.html: the loaded bike, lights, stand and orbit controls, loading and error states, and a colour picker in React state that repaints the frame. The bike gains its seat post and saddle.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a second useState for showStand and a button that hides the stand. Which component owns the state?
Add console.log to count how many times Bike renders when you change colour.
Explain it without notes
Why does one paint.color.set(color) repaint the whole frame?
Why is Environment inside the same Suspense as Bike, while Stand is outside it?
Console
Nothing logged yet.Expected console output
THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.
paint is now #ff6b2c
saddle: yes | chain: yes
paint is now #2a9df4