React Router, Tanstack Query, Tailwind, And Context Quickstart

Deciding on what libraries to use in your Vite React SPA project can be hard, but my go tos are React Router 7 (declarative), Tailwind, TanStack Query, and React Context (for the state not handled by Query). This article will have all the setup and config, as well as some cheat sheets for common functions and components that aren't used every time. You can also copy direct from the GitHub.

I'm not really going to overly explain any of this stack, I'm assuming you already know how each of these work and are just copy pasting bits and bobs.

Installation

It's a vite project so first do `npm create vite` and I selected TS, so all the options below will have the right types for your convenience. And then here's the install commands:

Here they are individually as well if you're not installing everything I am:

Eventual file structure

Here's the file structure I'll eventually make

src/
  api/
    fetch-util.ts
    resource.ts
  components/
    MainHeader.tsx
  contexts/
    Example/
      ExampleProvider.tsx
      index.tsx
  pages/
    Error404/index.tsx
    Home/index.tsx
App.tsx
index.css
main.tsx

Root and src files

Here's the vite.config.ts. I just commented out the proxy server setup because I don't know if you'll use it or need it, but I always find myself re-looking up that syntax.

Next, let's get all the root src files. Simplest is the base tailwind setup in /src/index.css:

Then main.tsx is where I put all my contexts to keep App.tsx a little less cluttered. Remember to remove the bits you don't need (like vanilla context).

I also put my primary router in App so I know where all my actual pages are. I don't split up the routes unless I absolutely have to.

Components and the header

The components folder is for any component that's shared outside/between pages. The only thing to start is a Header. The little snippet I like here is the Tailwind bit that catches the .active class for NavLinks. Of course replace "More" with your actual pages, this snippet is simply to get you started.

Page stubs

I like to have a page folder that has all the primary routes. These folders can hold utils, types, and components on their own, so the main components doesn't get too cluttered. Here are some stubs to match the router I just gave you:

And the basic landing page:

The api folder

This is where all the adapters for your API will go. I have a nice little fetch handler that I think works well with TanStack Query. But, what our query hooks will actually use are the router adapters in their own named files (stubbed here as resource.ts). So like posts.ts and users.ts. Each one would have all the route adapters for that route family. The idea is to keep the queryFn property in your query hook options as simple as possible.

Here's the fetch util function (which assumes simple auth with cookies via credentials):

That function would then get imported into the adapter files. Here is a stub to copy and edit as a pattern (obviously replace unknown and the routes).

This pattern would let you do, for example, queryFn: getAllPosts and all the types are perfectly handled without cluttering up your main code.

Context

Finally, the last bit of setup is the context. You might not even need this if your state is managed by TanStack Query. I've written an entire article on setting up React Context and this is basically just that.

Then the actual context logic:

And finally, here's how you'd use that in a component

Cheat sheets

Here are pieces of syntax that you might not need for every project, but are still common enough to need in one place.

React Router

Here are the main bits I always use, but also the main section of the React Router Declarative docs.

Tanstack Query

TanStack's docs are of course impeccable, and here is the quick start section. First, here's the read query base:

And then the mutation base:

I've also included the uncontrolled form handler as well, see this uncontrolled forms article for more info.

Tailwind

Not really a cheat sheet per se, but here's some tailwind resources I can't do without.

• The VSCode extension that lets you have the tailwind docs in your workspace
• The intellisense tailwind plugin
• The color picker site I love

Happy coding everyone,

Mike

Join the conversation on Reddit to leave a comment!