Module 01 Recap
You have set up a React project with Vite, written your first components, learned JSX syntax, and organized the folder structure ZeroBudget will use. Here is what the module covered.
What you learned
Section titled “What you learned”React is a UI library, not a framework. It handles rendering only. Routing, HTTP, state management, and forms all require separate decisions. That flexibility is React’s trade-off against Angular’s convention-first approach.
Components are functions that return JSX. A function that starts with a capital letter and returns JSX is a React component. React calls it, collects the output, and renders it to the DOM. Components compose by rendering other components with JSX tags like <Header />.
JSX is JavaScript with syntax sugar. Vite transforms it to React.createElement calls. Key rules: className not class, htmlFor not for, camelCase events, every element must close, and expressions go in {}.
Project structure matters before you write real code. ZeroBudget uses a components/ folder with one folder per component, plus separate context/, data/, and hooks/ folders for non-component concerns.
Key terms
Section titled “Key terms”| Term | Meaning |
|---|---|
| Component | A JavaScript function that returns JSX |
| JSX | A syntax extension that looks like HTML and compiles to React.createElement calls |
| Fragment | <>...</> — a wrapper that groups elements without adding a DOM node |
| PascalCase | Naming convention for component files and functions (CategoryCard) |
| Vite | The build tool that transforms JSX and serves the development server |
What is next
Section titled “What is next”Module 02 — Components and Props — covers how data flows between components. You will learn how to pass data from a parent component to a child using props, build reusable components that accept different values, and start building the ZeroBudget UI with real component structure.