Software Engineering Roadmap

Learn how to build, test, deploy, and maintain robust software systems.

Overall Progress0%

Frontend Frameworks

Explanation

As a frontend grows, managing the DOM by hand becomes error-prone. You must remember to update the page everywhere a piece of data changes, and the code quickly becomes tangled. A frontend framework solves this by making the UI a function of your state: you describe what the interface should look like, and the framework updates the page when state changes. This lesson teaches the ideas that all modern frameworks share — components, props, state, declarative rendering, routing, and data fetching — using React and Vue concepts. The concepts transfer, even though the exact syntax differs between frameworks. By the end you will understand why frameworks exist and be able to think in components and state, which is the skill that matters most.

Why Frameworks Exist

Keeping the DOM in sync with data by hand becomes unmanageable.
Components let you reuse UI and logic.
Frameworks handle the repetitive updating for you.

Components

A component is a self-contained piece of UI with its own structure, styles, and behavior. Applications are built by composing many components together.

Component Hierarchy

App

Header

ProductList

ProductCard

Components form a tree: a parent renders children, passing data down as props.

Props vs State

	Props	State
What it is	Data passed from parent to child	Data a component manages itself
Mutability	Read-only from the child’s view	Mutable
Changes trigger	Parent re-renders	The component re-renders itself

Declarative UI

Imperative code says "find this element and change it." Declarative code says "the UI should look like this, given this state." Frameworks prefer the declarative style, so you describe the result and let the framework update the DOM.

jsx

1// Declarative: describe the result2function Greeting({ name }) {3  return <h1>Hello, {name}</h1>;4}

Rendering and the Virtual DOM

React keeps a lightweight in-memory representation of the UI called the virtual DOM. When state changes, React compares the new virtual DOM with the old one and updates only the parts of the real DOM that changed. This is a React-specific optimisation, not a universal property of every framework, but the general idea — "recompute the result and update only what changed" — is common.

Events and Forms

Framework events wrap the browser events you already know. Forms are usually "controlled": the input’s value is held in state, so the UI always reflects the data.

Client-Side Routing

Single-page applications do not reload the page for each view. A client-side router maps the URL to a component, so navigating changes the visible component without a full page refresh.

Data Fetching and Loading States

Component mounts

↓

Request starts

↓

Loading state

↓

Success or error state

Real applications show a loading indicator while fetching, an error message on failure, and an empty state when there is no data. Handling all three is part of building reliable interfaces.

Component Design and State Management

Keep each component small and single-responsibility.
Lift shared state up to the nearest common parent.
Use a state management library only when many components need the same data.

React vs Vue (concepts)

	React	Vue
Component style	JSX (functions)	Single-file components
Reactivity	State + re-render	Reactive refs
Learning curve	Moderate	Gentle
Common ground	Components, props, state, declarative UI	Components, props, state, declarative UI

Syntax

A small React componentjsx

1import { useState } from "react";2 3function Counter() {4  const [count, setCount] = useState(0);5  return (6    <button onClick={() => setCount(count + 1)}>7      Count: {count}8    </button>9  );10}

State (count) drives the UI. Clicking updates state, and the framework re-renders the button.

Examples

Passing props

A parent passes data to a child as props.

jsx

1function User({ name }) {2  return <p>{name}</p>;3}4 5<User name="Ada" />

Output

Ada

Loading and error states

A component handles all three fetch outcomes.

jsx

1function Data({ data, loading, error }) {2  if (loading) return <p>Loading…</p>;3  if (error) return <p>Error: {error}</p>;4  return <ul>{data.map((item) => <li key={item.id}>{item.name}</li>)}</ul>;5}

Output

(loading, error, or the list depending on state)

Key Takeaways

Frameworks make the UI a function of state.
Components are reusable pieces; they compose into a tree.
Props flow down from parent to child; state is internal.
Declarative UI describes the result, and the framework updates the DOM.
Handle loading, error, and empty states in data-fetching UIs.
React and Vue share the same concepts with different syntax.

← PreviousWeb Fundamentals Next →Backend Fundamentals