What Is React

You have already built a full single-page application with Angular. Now you will learn React — and more importantly, understand why the two feel so different even though they solve the same problem.

The problem React solves

When a user interacts with a web page — clicking a button, typing into a field, submitting a form — the page needs to update. Doing that manually with vanilla JavaScript means selecting elements, reading values, updating the DOM, and keeping everything in sync by hand. At small scale that is fine. As apps grow, it becomes unmanageable.

React solves this with a single core idea: your UI is a function of your state. You describe what the page should look like for a given set of data. React figures out how to update the DOM efficiently when that data changes. You never touch the DOM directly.

React is a library, not a framework

This is the most important distinction to understand coming from Angular.

Angular is a framework — it makes decisions for you. Routing, forms, HTTP, dependency injection, and testing all ship with Angular and follow Angular conventions. A team using Angular uses Angular’s router, Angular’s HTTP client, Angular’s forms system.

React is a library — it handles one thing: rendering UI. Routing, state management, HTTP calls, and form handling all require separate choices. A team using React assembles its own stack: React Router for routing, Zustand or Redux for global state, React Query for data fetching, React Hook Form for forms.

This is not better or worse — it is a different trade-off. React gives you flexibility and a smaller learning surface. Angular gives you consistency and convention. Both are used at massive scale in production.

How React works

React maintains a virtual DOM — an in-memory description of what the UI should look like. When state changes, React builds a new virtual DOM, compares it to the previous one (a process called reconciliation), and makes the minimum number of real DOM changes needed.

You write components as JavaScript functions. Each component takes in data (called props) and returns a description of the UI (called JSX). React calls those functions, collects the output, and produces the real DOM.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

That is the entire mental model. Components are functions. Props are arguments. JSX is the return value.

What ZeroBudget demonstrates

Throughout this course you will build ZeroBudget — a zero-based budgeting app. The idea comes from the every-dollar budgeting method: every dollar of income gets assigned to a category before the month begins. Nothing is left unplanned.

By the final module, ZeroBudget will:

• Accept multiple income sources and sum them
• Show how much money is left to assign across categories
• Track spending per category with a progress bar
• Let you log individual transactions by category
• Store all data in localStorage keyed by month
• Navigate between months and copy budgets forward

You can explore the finished app or browse the source on GitHub before you build it.

Exercise

No code yet — this lesson is conceptual. Answer the following in your own words:

1. What is the core idea behind React’s rendering model?
2. Name one thing Angular ships with that React does not.
3. Open the ZeroBudget live app. Pick one interactive element and describe what you think changes in state when you use it.

Recap

• React is a JavaScript library for building user interfaces — not a full framework.
• The core idea: UI is a function of state. You describe what to render; React updates the DOM.
• React handles rendering only. Routing, HTTP, and state management require additional libraries.
• This course builds ZeroBudget — a fully deployed budgeting app — using React with Vite.