Skip to main content

​
Repository overview

The course resources repository is organized into three main folders, each serving a specific purpose: 
react-complete-guide-resources/
├── code/              # Code snapshots for all 34 sections
├── attachments/       # Lecture attachments and downloadables
└── other/             # Slides and update guides

​
Code snapshots

The code/ folder contains 34 section folders, each corresponding to a course section. Every section includes multiple code snapshots that represent different stages of development.

​
What are code snapshots?

Code snapshots are taken directly from the course recordings and reflect the exact code you see in the videos. They serve multiple purposes:
  • Compare your code - Check your work against the instructor’s implementation
  • Jump to any point - Start from any stage without watching all previous lectures
  • Debug issues - Use working code as a reference when troubleshooting
  • Explore concepts - Run and modify the code to understand how it works

​
Snapshot naming convention

Snapshots follow a numbered naming pattern that indicates their order: 
code/03 React Essentials/
├── 01-starting-project
├── 02-creating-using-first-component
├── 03-using-outputting-dynamic-values
├── 04-html-attributes-dynamically-image-files
├── 05-cmp-props
└── ...
The numbers correspond to the lecture or concept being demonstrated.

​
All 34 course sections

​
01 Getting Started
  • edited-first-app - Modified first React application
  • react-vs-vanilla-js-example - Comparison between React and vanilla JavaScript
​
02 JS Refresher
  • code - Modern JavaScript syntax and features used in React
​
03 React Essentials
Multiple snapshots covering:
  • Creating and using components
  • Props and dynamic values
  • Styling components
  • Event handling
  • State management basics
​
04 Essentials Deep Dive
Advanced component patterns and state management techniques
​
05 Essentials Practice
Hands-on practice project applying fundamental concepts
​
06 Debugging
Tools and techniques for debugging React applications
​
07 Styling
Various styling approaches including CSS modules, styled-components, and Tailwind
​
08 Refs Portals
Working with refs and React portals for advanced DOM manipulation
​
09 Practice Project - Project Management
Complete project management application with:
  • Project creation and management
  • Task tracking
  • Tailwind CSS styling
​
10 Advanced State Management with Context useReducer
Complex state management patterns using Context API and useReducer hook
​
11 Side Effects useEffect
Managing side effects, subscriptions, and data synchronization
​
12 Behind the Scenes
React’s rendering behavior, optimization, and performance
​
13 Demo Project - React Quiz
Interactive quiz application demonstrating state and effects
​
14 Class-based Components
Working with class components and lifecycle methods
​
15 HTTP Requests
Fetching and sending data with APIs
​
16 Custom Hooks
Creating reusable custom hooks for shared logic
​
17 Forms User Input
Form handling, validation, and user input management
​
17b Form Actions
Modern form actions and server interactions
​
18 Practice Project - Food Order
Full-featured food ordering application with cart, checkout, and backend integration
​
19 Redux Basics
Introduction to Redux for state management
​
20 Advanced Redux
Redux Toolkit, thunks, and advanced patterns
​
21 Routing
React Router for single-page application navigation
​
22 Authentication
User authentication and protected routes
​
23 Deployment
Deploying React applications to production
​
24 React Query
Server state management with TanStack Query
​
25 NextJS App Router Introduction / 25 NextJS Introduction
Next.js fundamentals and App Router
​
25b RSC, Suspense, Server Actions
React Server Components, Suspense, and Server Actions
​
26 Animations
Adding animations to React applications
​
27 Patterns / 27 Replacing Redux with Hooks
Design patterns and state management alternatives
​
28 Testing
Testing React components and applications
​
29 React TypeScript
Using TypeScript with React for type safety
​
30 React Summary
Course wrap-up and best practices

​
Lecture attachments

The attachments/ folder contains standalone files mentioned in specific course lectures. Each section folder includes:

Starting projects

ZIP files with initial project setups

Code files

JavaScript/JSX files with data, utilities, or examples

Reference docs

PDF summaries and reference materials

​
Example attachments

attachments/03 React Essentials/
├── 01-starting-project.zip    # Initial project setup
├── App.jsx                     # Sample component file
├── data-with-examples.js       # Example data structures
└── data.js                     # Data for exercises

​
Using attachments

1

Find the attachment

Navigate to the section folder corresponding to your current lecture.
2

Download the file

Download the specific attachment mentioned in the video.
3

Extract if needed

For ZIP files, extract the contents to your working directory.
4

Follow lecture instructions

Use the files as instructed in the course video.

​
Other resources

The other/ folder contains supplementary course materials:
​
react-course-slides.pdf
Complete course slides covering all major topics and concepts
​
update-guide-slides.pdf
Information about course updates and changes
​
course-update-guide-udemy.md
Detailed update guide for Udemy students
​
course-update-guide-academind-pro.md
Detailed update guide for Academind Pro members

​
Finding what you need

If you know the section number, navigate directly to that folder:
code/03 React Essentials/
Each section is self-contained with its own dependencies. Remember to run npm install in each snapshot folder before running the code.

​
Best practices for using the repository

Follow along

Use snapshots to verify your code matches the instructor’s at key points

Experiment freely

Make changes to snapshots to test your understanding without affecting your main code

Jump around

Use starting snapshots to begin from any section without completing previous ones

Reference later

Return to finished snapshots as examples when building your own projects

​
Next steps

Ready to start using the resources? Head to the quick start guide to learn how to run code snapshots on your local machine.

Build docs developers (and LLMs) love

Get started for freeTalk to us