The Complete Roadmap For React Development
Follow this structured path from beginner to advanced. Each step builds on the previous one, ensuring you master React and modern web development systematically
Available Now
Start learning with these courses that are ready right now
JavaScript
Learn JavaScript fundamentals from basic syntax to modern ES6+ features, asynchronous programming, and DOM manipulation
React Fundamentals
Learn the fundamentals of React from components and JSX, to state and event handlers, effects and data fetching, hooks and performance
Design Patterns in React
Learn essential React design patterns including component architecture, custom hook patterns, and UI patterns to build scalable and maintainable applications
The Complete Roadmap
Cosden Code grows with you. New courses and projects will be added regularly as you progress
Foundations
Master the core language primitives that power every modern JavaScript and TypeScript application
JavaScript
Learn JavaScript fundamentals from basic syntax to modern ES6+ features, asynchronous programming, and DOM manipulation
TypeScript
Learn type annotations, interfaces, generics, advanced types, and building type-safe applications with confidence and precision
Projects
Tic Tac Toe
Build a Tic Tac Toe game with HTML, CSS, and JavaScript
Calculator
Build a calculator with HTML, CSS, and JavaScript
Quiz App
Build a quiz app with HTML, CSS, and TypeScript
React
Build a rock-solid understanding of React fundamentals, then level up with architecture and design patterns used in production apps
React Fundamentals
Learn the fundamentals of React from components and JSX, to state and event handlers, effects and data fetching, hooks and performance
Design Patterns in React
Learn essential React design patterns including component architecture, custom hook patterns, and UI patterns to build scalable and maintainable applications
React with TypeScript
Learn how React works with TypeScript, including type-safe components, props, hooks, and building robust React applications
Projects
Todo App
Build a todo app with React
Social Media Feed
Build a social media feed with React
Data Fetching
Learn to manage asynchronous data like a pro, from querying remote APIs to caching and synchronising complex state
React Query
Learn data fetching in React with queries, mutations, caching strategies, optimistic updates, and building performant data-driven applications
Projects
Weather App
Build a weather app with React and React Query
State Management
Control app state with confidence by exploring both enterprise-grade and lightweight approaches to managing data flows
Redux with Redux Toolkit
Learn global state management with actions, reducers, middleware, Redux Toolkit, and building scalable application architectures
Zustand
Manage application state with simple stores, middleware, persistence, selectors, and building lightweight, performant state solutions
Projects
Coming Soon
This project is coming soon
Navigation
Deliver seamless user journeys by understanding routing strategies across traditional and cutting-edge navigation stacks
React Router (Data Mode)
Learn client-side routing with navigation, nested routes, loaders, actions, protected routes, and building seamless single-page applications
Tanstack Router
Build type-safe applications with fully-typed routing, navigation, loaders, search params, and creating modern single-page experiences
Projects
Coming Soon
This project is coming soon
Forms
Build resilient forms with validation, error handling, and seamless user input experiences
React Hook Form
Create powerful forms with validation, error handling, field arrays, dynamic inputs, and building performant user input experiences
TanStack Form
Build performant forms with type-safe validation, field arrays, dynamic inputs, and creating seamless user input experiences
Projects
Coming Soon
This project is coming soon
Styling
Style modern applications with utility-first CSS and build beautiful user interfaces
Tailwind
Style modern applications with utility-first CSS, responsive design, custom configurations, animations, and building beautiful user interfaces
Projects
Coming Soon
This project is coming soon
Frameworks
Adopt the frameworks that ship modern React apps—from server-side rendering to full-stack meta frameworks
Next.js
Build full-stack React applications with server components, file-based routing, data fetching, caching, and modern web development patterns
Tanstack Start
Create full-stack React applications with server-side rendering, file-based routing, streaming, data fetching, and modern SSR patterns
React Router (Framework Mode)
Learn framework-style routing with React Router, including file-based routing, layouts, server components integration, and building modern full-stack applications
Projects
Coming Soon
This project is coming soon