Advanced Remix by Kent C. Dodds ( Frontendmasters )

Remix is a terrific tool for building simple websites and far superior for building complex web applications. Remix takes care of many issues in modern web improvement. You don't you dare even consider server cache management or global CSS namespace clashes. It isn't so much that Remix has APIs to avoid these issues; they basically don't exist while you're utilizing Remix!

This course and others like it are available as part of our Frontend Masters video membership.

 

Table of Items

Presentation

Kent C. Dodds presents the course and examines the advantages of the advanced Remix topics. This course builds on the ideas learned in the Remix Fundamentals course.

 

Repo Setup

Kent walks through the course repository and explains how to run the various applications. A README file with directions and places for note-taking accompanies each exercise. A question about testing is also addressed in this portion.

UI Functionality

Non-Nav Mutations Exercise

Students are told to utilize the useFetcher().Form component to avoid a full-page invigorate and history stack addition when the structure is submitted.

 

Non-Nav Mutations Solution

Kent demonstrates the solution to the Non-Nav Mutation exercise.

 

Optimistic UI Exercise

Students are told to apply Optimistic UI techniques to the application by posting new stores immediately after the client submits them.

 

Optimistic UI Solution

Kent demonstrates the solution to the Optimistic UI exercise.

 

Optimistic UI Q&A

Kent utilizes a TodoMVC application to answer questions about handling numerous UI updates to the same component. Questions about managing fetchers are also answered in this fragment.

 

Focus Management Exercise

Students are told to add rationale to focus the element with a validation error. In the event that there are no errors, the principal input element ought to be focused.

 

Focus Management Solution

Kent codes the solution to the Focus Management exercise.

 

Revalidation Optimization Exercise

Students are told to utilize the unstable_shouldReload API to indicate which courses ought to be reloaded when a particular mutation or client-side transition happens.

 

Revalidation Optimization Solution

Kent demonstrates the solution to the Revalidation Optimization exercise.

 

Non-Nav Fetching Exercise

Students are told to interface the combo box component to the database, so as the client starts composing, the combo box shows matching outcomes.

 

Non-Nav Fetching Solution

Kent walks through the solution to the Non-Nav Fetching exercise.

 

Imperative Mutations Exercise

Students are told to complete the Remix implementation of the logout modal. A post request ought to be shipped off the/logout course with the useSubmit() snare.

 

Imperative Mutations Solution

Kent demonstrates the solution to the Imperative Mutations exercise.

Further developing Loading UX

 

Pending UI Loading Spinner Exercise

Students are told to deliver the spinner component with the useTransition snare when the application is in a loading state. The twist delay package can also be utilized to delay the appearance and stowing away of the spinner.

 

Pending UI Loading Spinner Solution

Kent walks through the solution to the Pending UI Loading Spinner exercise.

 

Skeletons Exercise

Students are told to show a skeleton UI to further develop the client experience while the substance is loading. The useTransition().location.state item can assist with figuring out which client record is being transitioned.

 

Skeletons Solution

Kent codes the solution to the Skeletons exercise.

 

Defer Exercise

Students are told to execute the defer, Suspense, and Await APIs on the $customerId course to create the best loading experience.

 

Defer Solution

Kent walks through the solution to the Defer exercise.

 

Defer and React Streaming

Kent utilizes the organization profiler in the program engineer tools to explain how the Remix Defer component functions in tandem with React Streaming. A question about settling suspense objects is also examined in this portion.

 

Suspense Boundary Error

Kent momentarily troubleshoots a boundary error tossed by the Suspense component.

Wrapping Up

Kent finishes up the course by answering questions about PWAs, CSS in components, Storybook integration, what's astonishing about the eventual fate of Remix, and local area assets.