React Foundations

React Foundations picks up where Angular Foundations left off. You have built a full SPA with a structured framework. Now you will learn React — the most widely used frontend library in the industry — and understand how it differs in philosophy, patterns, and trade-offs.

Every concept in this course is applied directly to ZeroBudget — a zero-based budgeting app that you build from scratch and ship as a fully deployed app by the final module.

What you will learn

• React fundamentals — what React is, how JSX works, and how the library renders your app
• Components and props — function components, props, composition, conditional rendering, and lists
• State and events — useState, event handling, controlled inputs, lifting state up, and form management
• Lists, effects, and persistence — rendering arrays with keys, useEffect, localStorage, and data fetching
• Derived state and performance — computing values from state, useMemo, useCallback, and React.memo
• Custom hooks and Context — extracting reusable logic into custom hooks and sharing state with the Context API

Prerequisites

This course assumes you have completed Angular Foundations or have equivalent experience with a frontend framework. You should be comfortable with JavaScript ES6+ (arrow functions, destructuring, spread, modules, async/await) and understand the concept of components and reactive UI. No prior React experience is assumed.

The ZeroBudget project

All seven modules build the same real application — ZeroBudget, a zero-based budgeting app inspired by the Dave Ramsey every-dollar method. You can explore the live app or browse the source on GitHub.

The finished app:

• Lets you add income sources with names and amounts
• Shows how much money is left to assign across categories (income minus budgeted)
• Provides 8 preset spending categories with editable budget amounts and progress bars
• Lets you log transactions per category with quick-add or a global form
• Tracks spending, remaining, and progress per category using derived state
• Stores all data in localStorage keyed by month so each month is independent
• Lets you navigate months, copy a budget from the previous month, or reset

By Module 07 you will wire all of these pieces together into a working, deployed React app.

Modules

01 — Getting Started with React

• What Is React
• Setting Up with Vite
• Your First Component
• JSX Syntax
• Project Structure
• Module Recap

02 — Components and Props

• Building Components
• Props and Data Flow
• Component Composition
• Conditional Rendering
• Lists and Keys
• Module Recap

03 — State and Events

• The useState Hook
• Handling Events
• Controlled Inputs
• Lifting State Up
• Forms in React
• Module Recap

04 — Lists, Effects, and Persistence

• Rendering Lists
• The useEffect Hook
• localStorage and Persistence
• Fetching Data with useEffect
• Cleanup and Dependencies
• Module Recap

05 — Derived State and Performance

• Derived State
• useMemo
• useCallback
• React.memo
• When to Optimize
• Module Recap

06 — Custom Hooks and Context

• Extracting Custom Hooks
• Sharing Logic with Hooks
• The Context API
• useContext and Providers
• Context vs Props
• Module Recap

07 — ZeroBudget Project Build

• Project Setup and Architecture
• Income Section and State Design
• Category Cards and Derived State
• Transactions and Lists
• Custom Hook and Context
• Course Recap and What’s Next