Frontend Stack Overview
Frontend is the part users directly see and interact with. This page explains the learning order that helps beginners avoid common confusion. It is not a code-along tutorial, but a roadmap for making better choices before implementation.
How to use this page
- Start with React (Lv.1) if you are new
- Move to Vue (Lv.2) after completing one React CRUD UI
- When blocked, check the "Common pitfalls" section first
Level Structure (What you learn)
Learn core frontend fundamentals: components, state, events, and API integration.
Best for: complete beginners building their first real UI
Rebuild similar features in another framework to strengthen framework-independent thinking.
Best for: learners who finished at least one React CRUD flow
Beginner-Friendly Learning Sequence
1. UI Composition (Components)
Start by breaking screens into reusable pieces. If this layer is weak, state management and routing become much harder later.
2. Data Flow (State, Props, API)
Learn where data is created, updated, and passed. Most frontend debugging becomes easier once data flow is clear.
3. SPA Routing (Navigation + Refresh)
Understand client-side navigation and refresh behavior. This is critical to avoid deployment-time 404 issues.
Common Pitfalls
UI exists, but state changes do not render
Often caused by incorrect state updates or broken prop chains.
Works locally, fails with 404 after deploy
Usually a missing SPA redirect rule (`_redirects`).
Next Actions (Start now)
1) React fundamentals: /en/map/frontend/react
2) Vue expansion: /en/map/frontend/vue
3) Fix deployment 404: /en/fix/spa-404
Last updated: February 22, 2026 · Version: v0.0.1
Send Feedback
Opens a new issue page with your message.
Open GitHub Issue