Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

React Router Bootcamp: Zero to Mastery

via Zero To Mastery Path

Go to class Write review

Overview

Learn React Router v7 (a.k.a. Remix v3) by building your own full-stack project. Taught by an industry professional, this course covers everything from beginner to advanced topics. If you're a Developer who is serious about taking your coding skills and career to the next level by building better websites, then this is the course for you.
  • Build better websites by using React Router to provide your users with the ideal user experience
  • Learn why React Router has rapidly grown in popularity thanks to its ease-of-use and top-tier development experience
  • Develop snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds
  • Create an extensive, full-stack web application that provides users with an all-in-one cooking experience including recipes, meal plans, and shopping lists
  • Accelerate your Web Development career by taking your JavaScript and React skills to the next level
  • Learn the entire React Router development process from an empty file to deployment

Syllabus

  •   Introduction
    • Introduction
    • What Is React Router?
    • Why React Router?
    • Remix vs React Router
    • Intro to the Master Project
    • The Recipe Page & Optimistic UI
    • Finishing the Tour of the Master Project
    • Exercise: Meet Your Classmates and Instructor
    • Understanding Your Video Player
    • Course Resources
    • Set Your Learning Streak Goal
  •   React Router Overview
    • Installing NodeJS
    • Creating a React Router Project
    • The Vite Config File
    • Upgrading React Router and Future Flags
    • Owning your Entry Points
    • What are Routes?
    • Exercise: Identifying Server and Client Components in Routes
    • Solution
    • Let's Have Some Fun (+ More Resources)
  •   Basic Routes and Styling
    • An Explanation of New Imports
    • Basic Routing
    • Nested Routing
    • The Root Route
    • Exercise: Understanding Matched Routes with useMatches
    • Solution
    • React Router's Special Components
    • The Link API
    • Adding Style with Links
    • Exercise: Utilizing the links Route Export
    • Solution
    • Techniques for Component-Level CSS
    • Setting Up Tailwind
    • Using Tailwind - Part 1
    • Using Tailwind - Part 2
    • Using Tailwind - Part 3
    • Unlimited Updates
  •   Introduction to Data Loading in React Router
    • What are Loaders?
    • The Need for Pending UI
    • Pending UI with the Browser
    • Pending UI with useNavigation
    • Pending UI when the Loader is Slow
    • Why Load Before Route Transitions
    • Errors and Error Boundaries
    • Exercise: Handling Errors with Error Boundaries
    • Solution
    • Installing Postgres with Docker
    • Setting Up Prisma with Postgres
    • Implement a New Life System
  •   Master Project: React Router Recipes App (The Pantry Page)
    • Overview
    • Setting up the Pantry Route
    • Redirects in React Router
    • Exercise: Experimenting with HTTP Status Codes
    • Solution
    • Setting Up the Pantry Database Tables
    • Seeding the Database
    • Database UI Tools
    • Loading Data into the Pantry UI
    • Creating a Model Abstraction
    • Building a Basic Shelf UI
    • Intro to HTML Forms
    • Exercise: Exploring Similarities Between HTML Forms and Anchor Tags
    • Solution
    • Enhancing the Search Bar with JavaScript
    • Exercise: The FormData Object
    • Solution
    • Creating Shelves
    • Enhancing the Create Shelf Button
    • Auto-Scrolling to the Left
    • Making the Pantry Section Scrollable
    • Adding a Delete Button to Each Pantry Shelf
    • Making the Action Handle Multiple Forms
    • Deleting Pantry Shelves
    • Handling Multiple Deletes
    • Introducing useFetcher
    • More Cases for useFetcher
    • Server State in React Router
    • Exercise: Understanding Concurrency in Remix
    • Solution
    • Editing Shelf Names
    • Validating Forms with Zod
    • Intro to Optimistic UI
    • Optimistically Deleting Shelves
    • Creating Shelf Items
    • Deleting Shelf Items
    • Optimistically Creating Shelf Items
    • Suppressing the Layout Effect Warning
    • Optimistically Deleting Shelf Items
    • Additional Enhancements
    • Course Check-In
  •   Authentication Prerequisites
    • Overview
    • The User Model
    • The Login Route
    • Setting Up the Login Route Action
    • Intro to Cookies
    • Setting Our First Cookie
    • Cookie Attributes
    • A Simple Auth Flow
    • React Router's Cookie Helper
    • Exercise: Cookies
    • Solution
    • Cryptographic Signatures
    • Signing Cookies
    • Signing Cookies in React Router
    • Sessions
    • Session Storage
    • Session Storage in React Router
  •   Magic Link Authentication
    • Overview
    • What is Authentication
    • Overview of Magic Link Authentication
    • Magic Link Structure
    • Generating Magic Links
    • Updating the Login Route
    • Validation Route Overview
    • Parsing the Magic Link Payload
    • Validating the Expiration Time
    • Validating the Nonce
    • Finishing the Login
    • The Sign Up Form
    • The Sign Up Form Action
    • Signing Up for Mailgun
    • Setting Up the Mailgun Client
    • Sending the Magic Link Email
    • Showing the Check Email Message
  •   Authorization
    • Overview
    • Authorization Rules for the Login Page
    • Authorization Utilities
    • Login Authorization Rule #1
    • Middleware with Client-Side Navigation
    • Login Authorization Rule #2
    • Authorization Rules for the Pantry Page
    • Pantry Authorization Rule #1
    • Pantry Authorization Rule #2 (Middleware Request Context)
    • Pantry Authorization Rules #3-4
    • Pantry Authorization Rules #5-6
    • Pantry Authorization Rule #7
    • UI Updates Roadmap
    • Adding an Error Boundary
    • Hiding the App Nav Button
    • Creating a Logout Route
  •   User Interface (The Recipe Page)
    • Overview
    • Revisiting the React Router Philosophy
    • Setting Up the Recipes Route
    • Setting Up the Recipe Database Tables
    • Updating the Seed Script
    • Recipe Page Components
    • The Recipes Loader
    • Rendering the Recipe List
    • Creating a Search Bar Component
    • Supporting Search in the Loader
    • The Create Recipe Form
    • Setting Up the Recipe Detail Route
    • Exercise: Exploring Dynamic Route Segments
    • Solution
    • Sorting the Recipes List
    • Preserving the Search Parameters
    • Recipe Link Pending UI
    • Exercise: Writing your own Hook to Delay the Pending UI
    • Using Link Prefetch
    • Recipe Detail Route Overview
    • Overview of Step 1 - Creating an Input Component
    • Displaying the Name and Total Time
    • Rendering the Ingredients
    • Rendering the Instructions
    • Overview of Step 2 - Updating Recipes
    • Saving the Recipe Name, Total Time, and Instructions
    • FormData's getAll Function
    • Updating the validateForm Function
    • Updating the Ingredients
    • Creating New Ingredients
    • Addressing and Issue
    • Adding Error Messages to the UI
    • Exercise: Imposter Syndrome
    • Overview of Step 3 - Deleting Recipes and Ingredients
    • Deleting a Recipe
    • Deleting Ingredients
    • Authorization Rules for the Recipe Detail Route
    • Recipe Detail Authorization Rule #1
    • Recipe Detail Authorization Rules #2-5
    • Enhancement Overview
    • Overview of Step 1 - Saving Inputs on Change
    • Saving Recipe Inputs on Change
    • Creating an Ingredient Row Component
    • Saving Ingredient Inputs on Change
    • Persisting the Recipe Fetcher Data
    • Persisting the Ingredient Fetcher Data
    • Debouncing Form Inputs
    • Creating a Hook for Debouncing
    • Debouncing the Form Inputs
    • Overview of Step 2 - The Case for Optimistic UI in the Side Bar
    • Creating a RecipeListItem Component
    • Updating the Side Bar with Fetcher IDs
    • Overview of Step 3
    • Wiring up a Fetcher to Create New Ingredients
    • Creating a Hook for Optimistically Rendering Ingredients
    • Optimistically Rendering New Ingredients
    • Updating the Default Enter Key Behavior
    • Creating New Ingredients with the Enter Key
    • Focusing the Amount Input on Create
    • Optimistically Deleting Ingredients
  •   File Uploads
    • Overview
    • Creating a File Input
    • The Urlencoded Content Type
    • The Multipart Content Type
    • Parsing Files from Multipart Forms
    • Storing Files to Disk
    • Serving the Image Files
    • Writing the Image URL to the Database
  •   Modals (The Grocery List)
    • Overview
    • Updating the DB to Track Meal Plans
    • Modals in React Router
    • Setting Up the Modal Route
    • Rendering a Modal
    • Creating some Components for the Modal
    • Meal Plan Modal UI
    • Revalidating Modal Parent Routes
    • Passing Context to the Outlet
    • Creating the Modal Action
    • The Update Meal Plan Action Case
    • Indicating which Recipes are in the Meal Plan
    • The Meal Plan Filter Button
    • The Meal Plan Filter Backend
    • Preserving the Search State when Filtering
    • Preserving the Filter State when Searching
    • Overview of Next Steps and Setting Up the Grocery List Route
    • Defining the Grocery List Item Type
    • Building the Grocery List Item Component
    • Getting Started on the Grocery List Loader
    • Formatting the Missing Ingredients
    • Grouping Grocery List Items by the Ingredient Name
    • Rendering the Grocery List
    • Creating the Grocery List Route Action
    • Adding Grocery Items to the Pantry
    • The Grocery List Empty State
    • Clearing the Meal Plan
  •   Resource Routes (The Settings Page)
    • Overview
    • The PageLayout Component
    • Setting up the Settings Route
    • Intro to Resource Routes
    • MIME Types
    • Exercise: MIME Types
    • Solution
    • Overview of Customizing the Theme
    • Renaming the Resource Route
    • Controlling the Tailwind Theme with the Theme Resource Route
    • Building the Form to Change the Site Theme
    • Creating the Theme Cookie
    • The App Settings Route Action
    • The App Settings Route Loader
    • Fixing the Off-By-One Issue
    • Returning Dynamic CSS Based on the Theme Cookie
  •   Caching (The Discover Page)
    • Overview
    • Redirecting the Home Page
    • The Discover Page UI
    • Discover Detail Page Setup
    • Discover Detail Page UI
    • Intro to Caching
    • Private vs Server Caches
    • Preview of Using the Browser Cache
    • Caching Vocabulary
    • The Default Browser Strategy
    • The No-Store Strategy
    • The Fixed-Time Strategy
    • The Cache-Busting Strategy
    • The Revalidate-Once-Stale Strategy
    • Etags
    • Responding to the If-None-Match Header
    • The Stale-While-Revalidate Strategy
  •   Testing
    • Introduction to Testing
    • Setting Up Playwright
    • Writing our First Test
    • Creating Dynamic Routes
    • Creating a Test Login Route
    • Testing a Typical Pantry Page Flow
    • Finishing up the Pantry Test
    • The Playwright UI
    • Creating a Delete User Test Route
    • Deleting Test Users
    • Exercise: End-to-End Testing with Playwright
    • Solution
  •   Deployment
    • Deployment Overview
    • The Fly CLI
    • Prisma MIgrations
    • Creating the Database Server
    • Creating the App Server
    • Setting Environment Variables
    • Deploying the App
  •   Appendix: Upgrading Remix
    • An Example of Upgrading Remix
  •   Where To Go From Here?
    • Thank You!
    • Review This Course!
    • Become An Alumni
    • Learning Guideline
    • ZTM Events Every Month
    • LinkedIn Endorsements

Taught by

Zach Taylor

Reviews

Start your review of React Router Bootcamp: Zero to Mastery

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.