Live Online Classes in Design, Coding & AI — Small Classes, Free Retakes
UC San Diego Product Management Certificate — AI-Powered PM Training
Overview
Build a Learning Habit
Download Class Central's free printable study calendar
Download for Free
Create a comprehensive React budget application in this hour-long tutorial. Master CRUD operations and intermediate React concepts while building a practical budgeting tool. Begin with basic component structure and styling, then progress to creating budget cards and implementing context for state management. Learn to utilize local storage for data persistence, add budgets and expenses, handle uncategorized items, and calculate totals. Conclude by implementing view, edit, and delete functionalities for expenses. Perfect for beginners looking to enhance their React skills through a real-world project.
Syllabus
- Introduction
- Basic Component HTML/CSS
- Budget Card Component HTML/CSS
- Budget Context
- useLocalStorage Hook
- Adding Budgets
- Adding Expenses
- Uncategorized Budget Card
- Total Budget Card
- View/Edit/Delete Expenses
Taught by
Web Dev Simplified