Test drive the React Router 7 address book app


Hey y'all,

David here. You signed up for my newsletter at programmingarehard.com.

Sometimes I have ideas I want to test out in my Remix / React Router apps. But.... I don't want the overhead of doing it in my actual apps or, on the opposite end of the spectrum, want to start from a blank slate.

I found the address book tutorial and thought that surely the end result was published somewhere. Not the case. So I went ahead and bit the bullet by going through it and pushing the end result to a public repo. Sometimes you just want to poke around in the "completed" version of a tutorial rather than go through it manually yourself, ya know? You can poke through it on github or clone it to run to yourself at the link below.

Check out the completed address book tutorial here.

Hope you find it useful. Have fantastic Friday ✌️

Ps. I have a super cool demo I'm going to use this for in the very near future. Stay tuned for that.

David

ProgrammingAreHard

For developers looking to learn useful tips and tricks.

Read more from ProgrammingAreHard

React Router Guide Untangling dialogs in React Router I have been struggling with determining how to best implement dialogs in React Router apps for years: useState to control their open state Forms vs fetchers for data submissions resource routes to form data(<select> options) useEffect for listening for the action data to close the dialog useEffect for listing for a toast message There's a lot to consider. However, tons of these problems go away if you move dialogs into their own dedicated...

React Router Guide Contributing Callsite Revalidation Opt-out to React Router If you’ve used React Router’s data APIs, you’ve probably noticed it revalidates all your loaders after mutations, even when you know that’s completely unnecessary. I got tired of implementing shouldRevalidate functions that ended up feeling really awkward. I found an old proposal from Ryan Florence in GitHub, and decided to take a crack at implementing it myself. A few months and one merged PR later, it shipped in...

React Router Guide How to execute api requests in React Router There's not a lot of opinions on how to structure code that interacts with apis in React Router apps. This is what I've come up with and the post I wish existed before I started using React Router's actions/loaders with my existing api(and if middleware existed back then). Check out the article here. Have a great Tuesday ✌️ Unsubscribe · Preferences