BitWithBite
React Worksheet
⚙️ Vite Setup & Project Structure
SCORE___ / 20
NameClassDate
After this worksheet you can
Scaffold a Vite projectExplain the folder structureIdentify main.jsx's roleIdentify App.jsx's role📚 Quick Recap
🎯 What you'll practice: Scaffolding a React project with Vite and the standard folder structure.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Vite has largely replaced:
2The entry point file is:
3The root component is usually:
4Reusable UI pieces live in:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The dev server command is npm run .
6Global styles typically live in index..
7Write the full command to scaffold a new Vite + React project called "my-app."
8What does ReactDOM.createRoot().render() do?
9Why is Vite generally faster than Create React App during development?
🚀 Section C · Challenge ● CHALLENGE 5
10Describe, step by step, what happens from running "npm create vite@latest" to seeing "Hello React!" in the browser.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-A | 5 = dev 6 = css 7 = npm create vite@latest my-app -- --template react 8 = It mounts the React component tree (starting with App) into the real DOM element with id="root" in index.html 9 = Vite uses native ES modules and on-demand compilation instead of bundling the whole app upfront, so dev server startup and hot reload are much faster | 10 = Run the scaffold command, cd into the folder, npm install dependencies, npm run dev starts the dev server, main.jsx mounts App.jsx into the #root div in index.html, and the browser renders whatever App.jsx returns.