
Remix Fundamentals
Learning Paths:
Table of Contents
Introduction
Introduction
Kent C. Dodds introduces the course by providing personal background with Remix and some prerequisites for the course. A brief overview of the course structure and how to set up the course repo is also provided in this segment.Remix Overview
Kent discusses an overview of the web framework Remix and its core features, including nested routes, server-side rendering, faster loading times, and prefetching data. Remix can update data using just a form and an action on the server.Remix Q&A
Kent answers student questions regarding examples of tech stacks using Remix and why achieving the best possible UX with static site generation is impossible. Questions regarding if not having a static site means calling a CMS for every request, if props can be gotten at build time, if children segments have their own loaders, and how to deal with SEO for a landing page are also covered in this segment.
Setup
Getting Started with Remix
Kent demonstrates the file layout of the course repo, how to run the indie stack setup, and walks through two included scripts, one that runs the exercises and another that compares the student exercise to the final solutions. Each course exercise has a README.md file that provides background information, links, exercise instructions, and a space for notes.Your First Route Exercise
Students are instructed to add a link to a new route at /posts and create a file that will be rendered when the user visits that route.Your First Route Solution
Kent walks through the solution to the first route exercise and answers a student's question regarding the benefits of flat routes.Data Loading Exercise
Students are instructed to put the provided blog posts directly into the loader, retrieve the posts using JSON and useLoaderData, and render the posts using the provided JSX.Data Loading Solution
Kent walks through the solution to the data loading exercise. The answer to the exercise's help TypeScript extra credit is also provided in this segment.Data Loading Q&A
Kent answers student questions regarding what Remix is doing when making a request from the loader to the browser, if this type of loader handles serializable JSON, when the HTML is received, and if data can be transmitted other ways like CSV or YAML.Setup Prisma
Kent demonstrates how to swap out the hard-coded data with calls into Prisma and optimize data loading by limiting Prisma's querying API.Dynamic Params Exercise
Students are instructed to create dynamic routes to generate pages for blog posts. Extra credit exercises include adding post content and type guards for TypeScript.Dynamic Params Solution
Kent walks through the solution to the dynamic params exercise. Student questions regarding how to avoid prop drilling in larger applications, and if the loader data from the parent segment can be accessed when using nested dynamic segments.Rendering HTML from Markdown
Kent demonstrates fully configuring TypeScript for Remix conventions and walks through rendering HTML code from Markdown using the marked library. A student's question regarding if it only executes once in the top level component when using useLoaderData in a child component is also covered in this segment.
Features
Nested Routing Exercise
Students are instructed to add a route to /posts/admin to see a list of posts, /posts/admin/:slug to edit posts, and /posts/admin/new to create new posts.Nested Routing Solution
Kent walks through the solution to the nested routing exercise.Nested Routing Q&A
Kent answers student questions regarding why loader code is being duplicated from the index.tsx, if each route turns into a separate function when reporting to Edge, and if Remix will be adding auth support. This segment also covers how the code location relates to where UI is rendering and a student's question regarding nesting routes for folder structure consistency.Mutations Exercise
Students are instructed to implement the new.tsx file by adding the action and creating a createPost function that accepts the title, slug, and markdown in the post.server.ts file.Mutations Solution
Kent walks through the solution to the mutations exercise.Mutations Q&A
Kent answers student questions, including if anything needs to be done in the action loader to respond to actions and possible strategies for client-side validation. A demonstration of implementing error handling for the mutations extra credit is also provided in this segment.Progressive Enhancement Exercise
Students are instructed to add a loading state to the create button in the form. Once the user submits the form, the button should change to "Creating..." and be disabled.Progressive Enhancement Solution
Kent walks through the solution to the progressive enhancement exercise.Prefetching
Kent live codes the extra credit for the progressive enhancement exercise. To help load the pages as quickly as possible, a prefetch is added to the links on the post listing page and admin page.Multiple Forms Exercise
Students are instructed to add a "delete" button to the post creation page and have the "create" button change to an "update" button when editing an existing post.Multiple Forms Solution
Kent walks through the solution to the multiple forms exercise. A demonstration of Remix allowing the ability to name submit buttons is also covered in this segment.
Errors & Validation
Errors Exercise
Students are instructed to add error boundaries to the /post/:slug, /posts/admin/:slug, /post routes, and the hidden parent route. Remix has built-in error handling capabilities, including ErrorBoundary and CatchBoundary.Revalidating & Sending Data
Kent discusses revalidating data in Remix using the unstable_shouldReload API to determine if a route should revalidate and how to trigger data revalidation imperatively. Remix supports streaming and server-sent events to help avoid needing to revalidate entire pages.Errors Solution
Kent walks through the solution to the errors exercise. A student's question regarding if catch boundaries are for server-side while error boundaries are for client-side is also covered in this segment.Environment Variables Exercise
Students are instructed to configure the client and server for the ability to create blog posts via the ADMIN_EMAIL variable so only the admin user can create posts.Environment Variables Solution
Kent walks through the solution to the environment variables exercise.Admin User Exercise
Students are instructed to create an abstraction to protect every route under /posts/admin. This abstraction should apply to both loader and action functions.Admin User Solution
Kent walks through the solution to the admin user exercise. A brief walkthrough of the extra credit exercise of hiding admin links is also provided in this segment.