Component Architecture & Framework Basics
Modern front-ends are built from small, reusable components instead of one big page. You compose a UI as a tree of components, pass data down through props, keep local state where it belongs, and let a single-page application (SPA) framework re-render only what changed. Picking up one framework well — React or Vue — teaches you the underlying ideas (component tree, one-way data flow, props vs. state, client-side routing) that transfer directly to any other component-based framework you meet later.
Reading the official documentation is part of the skill: frameworks evolve quickly, and being able to find and apply the current recommended pattern is more valuable than memorising today's API.
Starting Points
- Front-end fundamentals (knowledge)
- Rippon, C. (2025). Learn React with TypeScript - Third Edition. O'Reilly.
- React documentation — "Quick Start", "Describing the UI", "Adding Interactivity" (react.dev).
- Vue.js documentation — "Essentials", "Components Basics" (vuejs.org/guide).
Key Points
- You decompose a UI into reusable components and can explain the structure you chose.
- You implement a small multi-component interface using components, props, and state in one framework (React or Vue).
- You explain the difference between props and state and choose correctly when to use each.
- You implement basic navigation between views using the framework's routing solution (e.g. React Router or Vue Router).
- You use the official framework documentation to look up and apply patterns, rather than copy-pasting complete examples.