Discover
others / www.youtube.com2024-10-15

Remix Roadmap Planning #16

Join Ryan and Michael as they walk through the Remix/React Router Roadmap - Public roadmap šŸ‘‰ https://github.com/orgs/remix-run/projects/5 - RFCs šŸ‘‰ https://github.com/remix-run/remix/discussions/categories/official-rfcs - "Open Development" blog post šŸ‘‰ https://remix.run/blog/open-development - React Router Prerelease docs šŸ‘‰ https://reactrouter.com/dev/ 0:00 Bumper 0:42 React Router v7 Overview 9:10 React Router v7 demo 11:12 Improved routing config with routes.ts 15:22 Automatic type-safe routing 25:31 How the type-safe routing works 32:33 "Are we forced into every new feature"? 41:06 Pre-rendering 49:59 Single fetch/turbo-stream 56:48 Final notes Learn more at https://remix.run

others / www.youtube.com2024-09-23

EVERYTHING you need to KNOW about Remix.run ACTIONS

Today we go over how actions inside of React Router v7 / Remix.run work. How you submit to them, what happens when you do, how they re-trigger loaders, resource routes, multiple forms on a single page handling. Custom HoC and middleware and much much more! šŸ‘ Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. šŸ“Œ Stay Connected: Twitter: https://twitter.com/AlemTuzlak GitHub: https://github.com/AlemTuzlak Company Github: https://github.com/forge42dev ā±ļø Timestamps: 00:00 - Intro 00:33 - What are remix actions? 01:04 - Usual submission flow 03:37 - Action submission flow 06:13 - loaders re-triggering flow 07:19 - what you can use re-triggers for 07:59 - Why re-triggers are awesome 08:26 - what happens when you submit to an action? 08:46 - returning response from an action 09:36 - throwing responses 09:57 - throwing a redirect response 10:36 - when is it useful to throw responses 11:02 - throwing non-redirect responses 12:05 - difference between a thrown redirect and normal response 12:53 - useActionData important info 13:45 - resource routes 15:28 - why are resource routes awesome 17:13 - setting up the playground 17:56 - adding a progressively enhanced form 18:37 - triggering an action 19:03 - adding fields to the form 19:37 - seeing our server data 20:23 - progressive enhancement with no JS 22:19 - handling multiple forms on a page with single action 26:05 - handling multiple forms on a page with resource routes & tRPC like loaders 29:59 - redirecting from actions to new routes 31:30 - throwing responses & errors into error boundaries 33:03 - redirecting on successful submissions 33:39 - adding action middleware 35:20 - outro šŸ”– Tags: Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, remix framework tutorial

others / www.youtube.com2024-09-09

Everything YOU need to KNOW about Remix loaders

Today we go over how loaders inside of React Router v7 / Remix.run work. How you can cache loaders, how you can optimize them, where and how they re-trigger, and by the end of this video you will be ready to use them for any situation that might come up. šŸ‘ Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. šŸ“Œ Stay Connected: Twitter: https://twitter.com/AlemTuzlak GitHub: https://github.com/AlemTuzlak Company Github: https://github.com/forge42dev ā±ļø Timestamps: 00:56 - What are loaders exactly? 04:19 - Single fetch approach with loaders 07:40 - What can you return from loaders 08:32 - Successful responses 08:50 - Thrown responses 09:25 - Error responses 09:54 - Streaming the data 11:53 - Streaming the data with single fetch 13:28 - When do loaders re-fire 13:43 - re-fire on action submission 14:40 - re-fire on param change 15:56 - re-fire on search param change 16:37 - re-fire on useRevalidate trigger 17:04 - re-fire on navigation to the same page 18:02 - how to stop loader re-triggers 20:14 - Practical examples 23:29 - Defering slow requests 25:56 - Using server caching for faster response times 28:25 - Caching with headers 30:25 - Using shouldRevalidate 32:44 - clientLoader caching (with remix-client-cache) 32:59 - Defer with single fetch šŸ”– Tags: Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, remix framework tutorial