A scaffold is the starting structure of an application, not a finished application. Set up the page’s static output, component structure, assets, and styles first; then add behavior in later steps. A screen can look complete while its buttons still do nothing. section 12.1 section 13.1
For a React UI project, build the foundation in this order:
- Define the HTML output needed for the intended screen. section 12.1
- Create React components that render the required JSX. section 12.1
- Put runtime images or icons in the public folder and create a stylesheet. section 12.1 section 12.1.3
- Add functional behavior after the static structure is in place. section 12.1
Start a timer from a template
Run `npx create-react-app rq12-scaffold --template rq12-scaffold` to create the supplied timer starting point. It includes components, styles, and play, pause, reset, and trash icons. The initial time display is static: the button does not work and the time does not tick down. Statefulness comes next, followed by input handling and more advanced timer behavior. section 12.1.3 section 12.0
public/
icons/ #1
pause.svg #1
play.svg #1
reset.svg #1
trash.svg #1
favicon.ico #2
index.html #2
src/
index.js #2
App.js #3
style.css #4
Timer.js #4
TimerManager.js #4
Inspect the timer’s file tree to see how public icons, the HTML entry point, React components, and the stylesheet fit into one scaffold. section 12.1.3
The same pattern works for a website menu and a task manager. Begin with an empty menu or a static task list and form, then progressively add dynamic content and interactions. Do not mistake a polished static screen for a working feature. section 11.0 section 13.0 section 13.1.4
