My learning journal from The Ultimate React Course
Master modern React from beginner to advanced! Next.js, Context API, React Query, Redux, Tailwind, advanced patterns.
- React fundamentals (components, JSX, props, events, forms, state)
- Advanced hooks (useEffect, useReducer, custom hooks)
- State management (Context API, Redux, Redux Toolkit, React Query)
- React Router for single-page applications
- Performance optimization (memo, useMemo, useCallback)
- Next.js with App Router, React Server Components, Server Actions
- Styling with Tailwind CSS, CSS Modules, Styled Components
- Advanced design patterns (compound components, render props)
- How React works behind the scenes
- Become an advanced, confident, and modern React developer from scratch
- Build 10+ beautiful projects, including two HUGE professional real-world apps
- Become job-ready by working with libraries and tools used in professional projects
- Think like a senior React engineer with advanced design patterns
- Next..js "App" router with cutting-edge React Server Components + Server Actions
- State management: thinking about state, where to place, local vs. global, UI vs. remote
- Build reusable, composable, and versatile components
- Master the confusing but important useEffect hook once and for all
- Build many custom hooks, reusable in your future projects
- Build single-page applications with React Router (including v6.4+ with data loading)
- Performance optimization with memo, useMemo, useCallback, and code splitting
- Advanced React features: useReducer, Context API, cloneElement, portals, etc.
- Advanced state management with Redux, Redux Toolkit, Thunks, React Query
- Build real-world app features: authentication, data sorting, filtering and pagination, dark mode, charts, etc.
- Understand how React actually works behind the scenes: virtual DOM, reconciliation, fiber tree, key prop, etc.
- Styling with Tailwind CSS, CSS Modules, Styled Components (CSS-in-JS)
- Practicing skills with many challenges, exercises, and practice projects
| # | Project | Technologies Learned |
|---|---|---|
| 1 | Pizza Menu | Components, props, JSX |
| 2 | Travel List ("Far Away") | useState, state management |
| 3 | Eat-N-Split | Practice project - state, props |
| 4 | usePopcorn | useEffect, data fetching, custom hooks |
| 5 | Classy Weather | Class components |
| 6 | Quiz App | useReducer |
| 7 | WorldWise | React Router, Context API, memo, useMemo, useCallback |
| 8 | Fast React Pizza | React Router data loading, Redux, Redux Toolkit, Tailwind CSS |
| 9 | The Wild Oasis | React Query, Styled Components, React Hook Form, Supabase, authentication, charts, dark mode |
| 10 | The Wild Oasis Website | Next.js App Router, React Server Components, Server Actions, NextAuth |
Credit: This course is based on Udemy course by Jonas Schmedtmann. All projects are built by following his tutorials to learn React development.
- Instructor: Jonas Schmedtmann
- Platform: Udemy
- Link: The Ultimate React Course 2025 - Udemy - Github.
- Review and practice all 10 projects from the course
- Strengthen understanding of React fundamentals and advanced concepts
- Upgrade dependencies to latest 2026 versions after completing each project
- Modernize architecture and add new features where appropriate
Custom snippets are configured in 00-setup/snippets.json for faster development:
| Prefix | Description |
|---|---|
cl |
console.log() |
rfc |
React functional component |
rsc |
React styled component |
How to use:
- Copy
00-setup/snippets.jsoncontent - Open VS Code: Settings → Preferences: Open User Snippets
- New Global Snippets File → name it
react-snippets - Paste the content and save
Now type the prefix (e.g., rfc) in any JS/TS file and press Tab to expand.
- Modernize project architecture with latest React patterns
- Add new features to existing projects
- Stay up-to-date with React ecosystem
This code is for learning purposes only. All credit for the original course content and project designs goes to Jonas Schmedtmann.