A hands-on journey to learn React from the ground up, with a focus on understanding concepts, practicing problem-solving, building projects, and eventually developing production-ready applications with React + TypeScript.
The goal of this repository is not simply to complete a React course.
It is to become capable of:
- Understanding how React works
- Building React applications independently
- Reasoning about React behavior
- Debugging problems
- Choosing appropriate patterns
- Understanding trade-offs
- Building real-world applications
- Eventually working confidently with React + TypeScript
This journey focuses on understanding over memorization.
The learning process generally follows:
Concept
↓
Mental Model
↓
Simple Example
↓
My Attempt
↓
Feedback
↓
Practice
↓
Challenge
↓
Recap
I will attempt problems before looking at complete solutions and use mistakes as part of the learning process.
The roadmap is adaptive. Topics may be repeated, split, reordered, or revisited when additional understanding is needed.
- Day 1 — What is React & Why React?
- Day 2 — React Project Setup
- JSX
- Components
- Props
- Events
- Conditional Rendering
- Lists & Keys
- Fundamentals Practice Project
- Understanding State
-
useState - Object State
- Array State
- Forms
- Lifting State Up
- State Practice Project
- Rendering & Re-rendering
- Component Design
-
useEffect - API Calls
- API Project
- Advanced Forms
- Reusable Form Patterns
- Search, Filter & Sort
- Pagination & UI States
-
useRef -
useMemo -
useCallback - Custom Hooks
- Hooks Revision Challenge
- React Router
- Dynamic Routes
- Nested Routes
- Protected Routes
- Routing Project
- Context API
- Context + State
- Redux Concepts
- Redux Toolkit
- State Management Project
- TypeScript + React Setup
- Props & Children Types
- State Types
- Event Types
- API Types
- Typed Custom Hooks
- TypeScript + React Challenge
- Project Architecture
- Reusable UI
- Performance
- Error Handling
- React Patterns
- TanStack Query
- Authentication Architecture
A full React + TypeScript application combining the concepts learned throughout the journey.
Planned areas include:
- React
- TypeScript
- React Router
- API integration
- Authentication
- Forms
- Custom Hooks
- Context and/or Redux Toolkit
- TanStack Query
- Responsive UI
- Loading, error, and empty states
- Clean component architecture
- Git/GitHub workflow
The repository will evolve as the learning journey progresses.
A typical structure may eventually include:
react-learning-journey/
│
├── README.md
├── REACT_MASTER_SOURCE.md
│
├── day-01/
├── day-02/
├── day-03/
│
├── projects/
│
└── ...
The exact structure may change as the project grows.
Primary sources:
- Official React documentation
- Official documentation for related libraries and tools
- Programming Hero React course as a supplementary resource
- Carefully selected articles and videos when they help clarify difficult concepts
The Programming Hero course is not treated as the authority for this roadmap. Understanding React is the priority.
REACT_MASTER_SOURCE.md is the single source of truth for the learning journey.
The README is intentionally static and is not updated after every learning day.
The master source tracks:
- Current progress
- Current learning day
- Completed topics
- Weak areas
- Confidence levels
- Practice history
- Mistakes
- Open questions
- Mentor assessment
- Revision requirements
- Next learning topic
Daily revision notes and session-specific material may be kept separately when useful, while the master source remains the authoritative learning record.
For each exercise:
Understand the requirement
↓
Identify the concepts
↓
Think through the logic
↓
Attempt independently
↓
Get hints if needed
↓
Review
↓
Refactor when appropriate
The goal is not to copy solutions.
The goal is to eventually solve problems independently.
The learning journey emphasizes:
- First-principles explanations
- Mental models before abstractions
- Small examples before complex applications
- Attempting problems before seeing solutions
- Hints before full solutions when appropriate
- Code review focused on reasoning, not just syntax
- Debugging and learning from mistakes
- Challenging assumptions and comparing trade-offs
- Gradually increasing independent decision-making
If a prerequisite is missing, the roadmap may pause to teach it before continuing.
If a concept is already genuinely understood, unnecessary repetition should be avoided.
By the end of this journey, I want to be able to look at a React application and confidently answer:
- Why is it structured this way?
- How does data flow through it?
- What causes the UI to change?
- Why is a particular React pattern being used?
- What could go wrong?
- How would I debug it?
- Is there a simpler or better approach?
- How would I extend the application?
Ultimately, this repository is about going from:
"How do I write this React code?"
to:
"Why should I design it this way?"
Status: 🚧 Learning in progress
Started: 2026
Goal: Become an independent React developer capable of building real-world applications.