Professional Trainer
Remix Fundamentals
3 hours, 55 minutes
CC
Course Description
Remix is a fullstack web framework that enables you to deliver a fast, slick, and resilient user experience. With Remix, you can build both static websites and dynamic web apps (requiring user data) while embracing the web platform’s standard APIs along the way! Ready to build web apps faster?
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: September 26, 2022
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 32 minutes
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.
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.
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
Section Duration: 58 minutes
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.
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.
Kent walks through the solution to the first route exercise and answers a student's question regarding the benefits of flat routes.
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.
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.
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.
Kent demonstrates how to swap out the hard-coded data with calls into Prisma and optimize data loading by limiting Prisma's querying API.
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.
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.
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
Section Duration: 1 hour, 17 minutes
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.
Kent walks through the solution to the nested routing exercise.
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.
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.
Kent walks through the solution to the mutations exercise.
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.
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.
Kent walks through the solution to the progressive enhancement exercise.
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.
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.
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
Section Duration: 52 minutes
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.
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.
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.
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.
Kent walks through the solution to the environment variables 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.
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.
Wrapping Up
Section Duration: 14 minutes
Kent wraps up the course by providing a link for course feedback and answering student questions regarding image optimization with Remix, how to approach building a dashboard with widgets from multiple data sources, and SPA compared to MPA with Remix. A look into some of the upcoming changes to Remix is also provided in this segment.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops