Learn TanStack - Pre-Requisites Skill & Environment Setup

#Introduction

Welcome to the Learn TanStack series! This series will take you through mastering the entire TanStack ecosystem — TanStack Query, Table, Router, Virtual, and Charts — from conceptual foundations all the way to production readiness. There are 24 episodes total, organized into six phases.

But before writing your first query or rendering your first table, there are a number of core skills and software you need to prepare. Why are these prerequisites important? Because TanStack is a family of headless libraries that run on top of modern JavaScript and TypeScript. If your JavaScript, React, and async programming foundations are weak, every subsequent episode will feel heavy.

Episode 0 is your roadmap: we make sure your core skills are sufficient, set up Node.js and a package manager, pick an editor, and thoroughly verify the toolchain. Once this episode is done, the entire series can be followed comfortably.

#Core Skills You Must Master

#Modern JavaScript ES6+ and Basic React

All TanStack libraries are written in TypeScript and run on top of JavaScript. You should be comfortable with arrow functions, destructuring, the spread operator, template literals, let and const, and module import and export. You also need to master React state and hooks concepts such as useState and useEffect, because TanStack Query and Router live side by side with hooks.

Kebiasaan JavaScript modern

const ambilData = async (url) => {
  const res = await fetch(url)
  if (!res.ok) throw new Error("Gagal memuat data")
  return res.json()
}
 
const sapa = (nama) => `Halo, ${nama}!`
console.log(sapa("Arman"))

The code above uses the arrow function ambilData = async (url) => ... and the template literal Halo, ${nama}. This async and await pattern is what you'll use in nearly every TanStack query function.

#Asynchronous Programming and the Promise Concept

Data fetching is the heart of TanStack Query. You need to understand Promise, async and await, fetch, and setTimeout. Also understand the promise states: pending, fulfilled, and rejected. TanStack Query in episode 4 works by wrapping functions that return a promise and tracking their state.

#Modularization, Package Management, and CLI

TanStack projects are always built on modules and package managers. You should be comfortable running commands in the terminal: npm install, npm run dev, and npm run build. Knowing Git also helps a lot, because almost all the code examples in this series can be tried directly.

#Software You Need to Prepare

#Node.js LTS and npm

Node.js is the runtime that executes the React and TanStack build toolchain. Make sure to use an LTS version, not a beta version, so it stays compatible with the entire package ecosystem. The LTS version of Node.js also ships with npm automatically.

node --version
npm --version

The output of node --version should show version 20 or newer. If not, download the installer from the official Node.js website.

#Package Manager: npm, Yarn, or pnpm

You only need to pick one package manager. This series uses npm because it ships with Node.js, but yarn and pnpm are fully compatible as well. Going forward, TanStack publishes all packages with the @tanstack/* prefix in the same npm registry.

#VS Code Editor and Extensions

VS Code is the most popular editor for this ecosystem. Extensions you should install:

• ESLint: shows lint errors directly in the editor.
• Prettier: formats code automatically.
• TypeScript extension: highlighting and intellisense built into VS Code.
• React DevTools in the browser to inspect components and queries in episode 14.

#Modern Browser and Hardware

Use a modern browser such as Chrome, Firefox, or Edge for development. These browsers will be used to open React DevTools and TanStack Query DevTools in episode 14. For hardware, a minimum of 8GB RAM on Windows, macOS, or Linux is enough for day-to-day development.

#Node.js Environment Setup

#Creating a Vite React-TypeScript Project

Vite is the main build tool for the entire series. Scaffold your first project with the React and TypeScript template:

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

The command npm create vite@latest belajar-tanstack -- --template react-ts creates a belajar-tanstack folder with the React and TypeScript template. After npm install, try running the development server:

npm run dev

If the boilerplate page appears at http://localhost:5173, your environment is working.

#Initial Folder Structure

Vite produces a structure we'll break down in more depth in episode 3:

belajar-tanstack/
├── index.html
├── package.json
├── vite.config.ts
└── src/
    ├── main.tsx
    └── App.tsx

src/main.tsx is the React entry point, and src/App.tsx will be the main component we modify throughout the series.

#Verifying the Environment

Before moving on to episode 1, make sure the entire tool chain runs normally:

node --version
npm --version
git --version
npm --prefix belajar-tanstack run build

The command npm --prefix belajar-tanstack run build runs a production build. If it finishes without errors and creates a dist folder, your toolchain is fully functional. npm run build will keep being used in episodes 19 and 20 when we discuss build automation.

One habit we'll keep using: npm run dev for development and npm run build for production. From here, you're ready to step into the real TanStack ecosystem.

#Conclusion

In episode 0 you prepared the footing for the entire series: making sure your core JavaScript ES6+, React, and async programming skills are sufficient, setting up Node.js LTS and a package manager, choosing VS Code with extensions, then creating your first Vite React-TypeScript project and verifying it with a production build.

Key takeaways:

• TanStack is built on modern JavaScript and TypeScript: master ES6+ and React hooks first.
• Node.js LTS, npm, and Git are three must-have tools.
• Vite is the main build tool: npm create vite for scaffolding.
• npm run dev for development, npm run build for production.
• VS Code with the ESLint, Prettier, and TypeScript extensions speeds up your workflow.
• TanStack package names use the @tanstack/* prefix in the npm registry.

In the next episode, episode 1, we'll discuss history, background, and why you need TanStack — from the birth of React Query in 2019, its expansion into TanStack Query, to the headless, performance, and framework-agnostic philosophy that underpins Query, Table, Router, Virtual, and Charts. Make sure your npm run dev is running, because the Learn TanStack journey has just begun!