This project was created while following along with Brian Holt’s Complete Intro to React, v9 course on Frontend Masters.
It serves as a hands-on record of my progress learning React fundamentals, including components, hooks, and best practices for building reusable UI logic.
I’m currently in the Custom Hooks section of the course.
| Status | Topic / Lesson | Description |
|---|---|---|
| ✅ | Basic React App Setup | Initialized the app with Vite and configured ESLint/Prettier. |
| ✅ | JSX & Static Assets | Learned how JSX compiles and how to include static files. |
| ✅ | useState Hook |
Managed local component state and triggered re-renders. |
| ✅ | useEffect Hook |
Handled side effects like data fetching and subscriptions. |
| ✅ | Keys & Lists | Practiced rendering dynamic lists with proper keys. |
| ✅ | Strict Mode & Dev Tools | Explored debugging and dev tooling in React. |
| ✅ | Custom Hooks | Created reusable hooks for shared logic and better testability. |
| ⬜ | Handling User Input | Building interactive forms and controlled components. |
| ⬜ | Context API | Sharing state globally between components. |
| ⬜ | TanStack Router | Managing routes and navigation. |
| ⬜ | TanStack Query | Fetching and caching API data efficiently. |
| ⬜ | Testing | Writing unit and snapshot tests with Vitest and Playwright. |
| ⬜ | React 19 Features | Exploring use, Suspense, and the new React Compiler. |
| ⬜ | Wrapping Up | Reviewing the full project and final cleanup. |
Original README for setup, licensing, and contact:
We recommend using Node.js version 20 with this course. The project will be built from scratch so most of the folders in this repo are just for reference. Later in the course, the api directory will be used to simulate an API server. To get set up, clone the repository:
git clone https://github.com/btholt/citr-v9-project.gitTo use the version of node this course was built with:
Please file issues and open pull requests on the course website repo. Feel free to open pull requests here, but the issues should go in the other repo.
The content of this workshop is licensed under CC-BY-NC-4.0. Feel free to share freely but do not resell my content.
The code, including the code of the site itself and the code in the exercises, are licensed under Apache 2.0.
React icons created by Pixel perfect - Flaticon
The original repo is a companion repository for the Complete Intro to React, v9 course on Frontend Masters.
