Learn TanStack - Starting a Project with TanStack

#Introduction

The first two episodes built conceptual understanding. Now it's time to take action: build a React project with the entire TanStack ecosystem installed and configured correctly. This project will be the home for the experimental code throughout the series.

Episode 3 covers scaffolding a project with Vite, installing TanStack Query, Table, Router, Virtual, and Charts, the recommended folder structure, and TypeScript and ESLint configuration to keep your code consistent.

Make sure the episode 0 toolchain is working before you begin. If it is, follow the step-by-step guide below.

#Setting Up a React Project with Vite

#Scaffold with the React-TypeScript Template

Vite is our main build tool. Run the following scaffold:

npm create vite@latest belajar-tanstack -- --template react-ts
cd belajar-tanstack
npm install

npm create vite@latest belajar-tanstack -- --template react-ts creates a project with TypeScript enabled. After npm install, run npm run dev to make sure the boilerplate page appears at http://localhost:5173.

#Installing the Five TanStack Libraries

#Core Packages

Now install all the TanStack libraries at once:

npm i @tanstack/react-query @tanstack/react-query-devtools
npm i @tanstack/react-table
npm i @tanstack/react-router @tanstack/router-plugin
npm i @tanstack/react-virtual
npm i @tanstack/react-charts

Summary of each package:

• @tanstack/react-query: data fetching and caching hooks.
• @tanstack/react-query-devtools: query debugging panel.
• @tanstack/react-table: headless table core.
• @tanstack/react-router: type-safe router.
• @tanstack/router-plugin: Vite plugin for file-based routing.
• @tanstack/react-virtual: list and table virtualization.
• @tanstack/react-charts: charts for dashboards.

#Verifying the Installation

Check the dependency list in package.json:

"dependencies": {
  "@tanstack/react-charts": "^2.0.0",
  "@tanstack/react-query": "^5.0.0",
  "@tanstack/react-table": "^8.0.0",
  "@tanstack/react-virtual": "^3.0.0"
}

All packages use the @tanstack/* prefix. The installed major versions may differ from the example above — that's normal, TanStack regularly ships minor and major releases.

#Folder Structure When Using TanStack

#Recommended Layout

The following structure separates query, table, router, and components so it stays scale-friendly:

src/
├── components/     # komponen UI umum
├── features/       # fitur per modul: todos, dashboard
├── hooks/          # custom hooks memakai useQuery
├── routes/         # route tree TanStack Router
├── lib/            # queryClient, fetchers, helpers
├── main.tsx
└── App.tsx

The lib/ folder is where queryClient is created once and then imported anywhere. routes/ holds route definitions, and hooks/ houses query functions so components stay lean. This pattern is used starting from episode 4.

#TypeScript and ESLint Configuration

#tsconfig for TanStack Router

The type-safe router requires special settings in tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "bundler",
    "jsx": "react-jsx"
  }
}

strict: true enables the strict type checking that Router and Query inference need. moduleResolution: "bundler" is the right choice for Vite projects. If you use file-based routing, add tanstackRouterPlugin to vite.config.ts so route codegen runs automatically.

#ESLint and Prettier

The Vite React-TS project already ships with ESLint configuration. Keep formatting tidy with Prettier:

npm i -D prettier eslint-config-prettier

Add eslint-config-prettier at the end of the ESLint config extends list so Prettier rules don't conflict with lint rules. That way, code formatting stays uniform across the whole team automatically.

#Conclusion

Episode 3 completed the setup: the Vite React-TypeScript project was created, all five TanStack libraries installed, the folder structure organized, and TypeScript and ESLint configured. From here, you have the stage to write your first query in episode 4.

Key takeaways:

• Vite is the main build tool: npm create vite for scaffolding.
• All libraries are installed through the @tanstack/* prefix.
• @tanstack/react-query-devtools is useful for debugging.
• The folder structure separates lib, hooks, features, and routes.
• strict: true in tsconfig matters for type inference.
• Prettier with eslint-config-prettier keeps code consistent.

In the next episode, episode 4, we'll discuss query and data fetching — QueryClientProvider, useQuery, staleTime and gcTime, error handling with retry, and background refetching. This is the core episode that changes how you fetch data in React. Make sure npm run dev is running, because the first experiments begin!