Набір інструментів TanStack — це потужний і сучасний технологічний стек, який надає розробникам можливість створювати надзвичайно функціональні повноцінні додатки. Набір працює на базі Vinxi, який є JavaScript SDK для створення повноцінних додатків з Vite, що дозволяє розгортати їх будь-де, де може виконуватись JavaScript код. Цей набір забезпечує розробникам передовий досвід роботи на фронтенді для клієнта, одночасно включаючи потужну експертизу серверної частини на бекенд, тому ви можете очікувати найкраще з обох світів.
У 2025 році TanStack Start, ймовірно, буде досить популярним поряд з Astro, Next.js та Remix для створення React-додатків. Сьогодні ми розглянемо основи деяких з найпоширеніших інструментів з набору TanStack і подивимося, як вони можуть бути використані для створення сучасних React-додатків у 2025 році.
Інструменти, які ми будемо вивчати:
Налаштування проекту TanStack Start і TanStack Router
Отже, час налаштувати наш React проект, і з TanStack Start ми починаємо. Спочатку перейдіть до каталогу на вашому комп'ютері, наприклад, на робочий стіл, а потім використовуйте цей скрипт для налаштування вашого проекту:
mkdir tanstack-project
cd tanstack-project
npm create @tanstack/router@latest --legacy-peer-deps
Цей скрипт створює папку проекту під назвою tanstack-project і встановлює необхідні пакети.
На момент написання TanStack Router вимагає React v18.3.1, тому якщо у вас встановлена більша версія, це може викликати помилку в консолі. Найпростіший спосіб вирішення — використати прапорець --legacy-peer-deps, щоб ігнорувати конфлікти, спричинені залежністю. Для цього простого тестування це нормально, але в продукційному середовищі слід використовувати кращі методи.
Пройдіть через посібник з налаштування проекту для довідки, я використовував таку конфігурацію:
- Назва проекту: my-router-app
- Бандлер: Vite
- IDE: cursor
Щоб запустити додаток, переконайтесь, що ви знаходитесь у папці проекту, і виконайте ці команди:
npm run dev
Тепер ви повинні побачити домашню сторінку за замовчуванням TanStack Router, яка має маршрути для головної та сторінки "Про нас".
Використання TanStack Query для керування станом
Тепер, коли у нас є глобальне керування станом для нашого додатка, потрібно налаштувати TanStack Query. Тож давайте почнемо з установки залежностей, виконавши цю команду в терміналі:
npm install @tanstack/react-query @tanstack/react-query-devtools
Цими командами ми отримуємо доступ до глобального стану в нашому додатку.
Тепер давайте створимо простий блог, використовуючи безкоштовний JSONPlaceHolder API. Добра новина: нам потрібно оновити лише два файли, щоб це запрацювало.
Перше, замініть і оновіть весь код у файлі src/main.tsx на цей новий код:
import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
import {
QueryClient,
QueryClientProvider
} from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 1000 * 60 * 5,
gcTime: 1000 * 60 * 60,
},
},
})
const router = createRouter({
routeTree,
defaultPreload: 'intent',
})
declare module '@tanstack/react-router' {
interface Register {
router: typeof router
}
}
const rootElement = document.getElementById('app')!
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement)
root.render(
)
}
Цей код налаштовує наш клієнт React Query таким чином, щоб він працював по всьому додатку. Також є деякі стандартні параметри запитів, щоб це було зручніше.
Нарешті, давайте зробимо те ж саме і оновимо весь код у файлі routes/index.tsx:
import * as React from 'react'
import { createFileRoute } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
interface Post {
id: number;
title: string;
body: string;
}
const fetchPosts = async (): Promise => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts')
if (!response.ok) {
throw new Error('Network response was not ok')
}
return response.json()
}
export const Route = createFileRoute('/')({
component: HomeComponent,
})
function HomeComponent() {
const {
data: posts,
isLoading,
isError,
error
} = useQuery({
queryKey: ['posts'],
queryFn: fetchPosts,
})
if (isLoading) {
return
Loading posts...
} if (isError) { return
Error: {error.message}
} return (
Welcome Home!
Latest Posts:
{posts?.slice(0, 5).map((post) => (
{post.title}
{post.body}
))}
) }
Цей файл створює функцію fetchPosts для отримання постів з JSONPlaceholder API, і також вводить хук useQuery для отримання даних, обробки стану та відображення даних. Для стилізації використовується Tailwind CSS.
Тепер ваш дизайн повинен виглядати ось так:
Створення TanStack Table для відображення даних
Перед тим, як ми почнемо з кодом, нам потрібно встановити @tanstack/react-table, тому зробіть це за допомогою цього скрипту:
npm install @tanstack/react-table
Тепер, коли наш проект налаштований для використання TanStack Table, ми можемо почати працювати з файлами.
Нам потрібно створити папку для components, а потім створити файл DataTable.tsx всередині цієї папки.
Додайте цей код у файл components/DataTable.tsx:
import React, { useState } from 'react'
import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
} from '@tanstack/react-table'
type Person = {
firstName: string
lastName: string
age: number
visits: number
status: string
}
const defaultData: Person[] = [
{
firstName: 'John',
lastName: 'Doe',
age: 30,
visits: 5,
status: 'Active',
},
{
firstName: 'Jane',
lastName: 'Smith',
age: 25,
visits: 3,
status: 'Inactive',
},
]
const defaultColumns: ColumnDef[] = [
{
accessorKey: 'firstName',
header: 'First Name',
cell: (info) => info.getValue(),
},
{
accessorKey: 'lastName',
header: 'Last Name',
cell: (info) => info.getValue(),
},
{
accessorKey: 'age',
header: 'Age',
cell: (info) => info.getValue(),
},
{
accessorKey: 'visits',
header: 'Visits',
cell: (info) => info.getValue(),
},
{
accessorKey: 'status',
header: 'Status',
cell: (info) => info.getValue(),
},
]
export function DataTable() {
const [data] = useState(() => [...defaultData])
const [columns] = useState<ColumnDef[]>(() => [...defaultColumns])
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
})
return (
{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( ))} ))} {table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( ))} ))}
{header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )} {flexRender( cell.column.columnDef.cell, cell.getContext() )}
) }
У цьому файлі ми створюємо масив об'єктів користувачів і потім виводимо їх у нову таблицю, яка створюється за допомогою бібліотеки TanStack.
Нарешті, оновіть файл routes/about.tsx наступним кодом:
import * as React from 'react'
import { createFileRoute } from '@tanstack/react-router'
import { DataTable } from '../components/DataTable'
export const Route = createFileRoute('/about')({
component: AboutComponent,
})
function AboutComponent() {
return (
Users
)
}
Цей код оновлює нашу сторінку про нас новим заголовком для користувачів і також реалізує нову таблицю даних на сторінці. Тепер ваша сторінка "Про нас" має таблицю, як у цьому прикладі:
Додавання TanStack Form для дій
Нарешті, давайте завершимо наш додаток, додавши форму на сторінку "Про нас".
Як і в попередніх прикладах, перше, що нам потрібно зробити — це додати пакети до нашого додатку.
Використовуйте цей скрипт для їх встановлення:
npm install @tanstack/react-form zod
Ми встановили TanStack form та Zod, який використовується для валідації форм.
Тепер все, що нам потрібно зробити — це оновити файл routes/about.tsx наступним кодом, який містить нашу форму, і додаток буде готовий:
import * as React from 'react'
import { createFileRoute } from '@tanstack/react-router'
import { DataTable } from '../components/DataTable'
import { useForm } from '@tanstack/react-form'
import { z } from 'zod'
const formSchema = z.object({
firstName: z.string().min(2, 'First name must be at least 2 characters'),
lastName: z.string().min(2, 'Last name must be at least 2 characters'),
age: z.coerce.number().min(0, 'Age must be a positive number'),
})
type FormValues = z.infer
export const Route = createFileRoute('/about')({
component: AboutComponent,
})
function AboutComponent() {
const [errors, setErrors] = React.useState<Record<string, string>>({})
const [formState, setFormState] = React.useState<FormValues>({
firstName: '',
lastName: '',
age: 0,
})
const form = useForm({
defaultValues: formState,
onSubmit: async ({ value }) => {
try {
const validatedData = formSchema.parse(value)
console.log('Form submitted:', validatedData)
setErrors({})
setFormState(validatedData)
} catch (err) {
if (err instanceof z.ZodError) {
const newErrors: Record<string, string> = {}
err.errors.forEach((error) => {
if (error.path[0]) {
newErrors[error.path[0] as string] = error.message
}
})
setErrors(newErrors)
}
}
},
})
const validateField = (field: keyof FormValues, value: string | number) => {
try {
formSchema.shape[field].parse(value)
setErrors(prev => ({ ...prev, [field]: '' }))
} catch (err) {
if (err instanceof z.ZodError) {
setErrors(prev => ({ ...prev, [field]: err.errors[0].message }))
}
}
}
return (
Users
User Registration
{ e.preventDefault() e.stopPropagation() void form.handleSubmit() }} className="space-y-4" >
First Name { const value = e.target.value form.setFieldValue('firstName', value) validateField('firstName', value) }} className="w-full p-2 border rounded" /> {errors.firstName && (
{errors.firstName}
)}
Last Name { const value = e.target.value form.setFieldValue('lastName', value) validateField('lastName', value) }} className="w-full p-2 border rounded" /> {errors.lastName && (
{errors.lastName}
)}
Age { const value = Number(e.target.value) form.setFieldValue('age', value) validateField('age', value) }} className="w-full p-2 border rounded" /> {errors.age && (
{errors.age}
)}
Submit
Цей код додає форму для реєстрації користувачів на сторінку "Про нас". Вона включає поля для імені, прізвища та віку, а також валідацію за допомогою Zod. Ваш додаток тепер містить повноцінну форму, що дозволяє вводити дані та перевіряти їх на коректність.
Тепер давайте додамо стан форми на сторінці:
Current Form State
{JSON.stringify(formState, null, 2)}
) } ``` Цей код додає форму реєстрації користувачів на сторінку "Про нас", яка також має валідацію форми.
Форма виводить дані як стан на сторінці. Ось приклад нижче. Ваша сторінка "Про нас" має виглядати так само:
## Висновок
Набір інструментів TanStack можна використовувати для створення дуже складних застосунків. Кілька інструментів можна навіть інтегрувати і використовувати в інших фреймворках, таких як Astro, Next.js та Remix. При використанні разом вони можуть забезпечити універсальне рішення для вашого проєкту. Сьогодні ми охопили основи маршрутизації, запитів стану, побудови таблиць і створення форм. Я дуже рекомендую ознайомитись з офіційною [документацією TanStack](https://tanstack.com/), оскільки ми лише поверхово торкнулися теми. Є багато іншого, що можна зробити, і документація охоплює все.
Набір інструментів TanStack також включає TanStack Virtual, який створює прокручувані елементи, TanStack Ranger, який будує слайдери з кількома діапазонами, TanStack Store, який створює ще більш потужне управління станом, і TanStack Config, який налаштовує і публікує пакети JavaScript. Завдяки цій універсальності, легко побачити, як набір інструментів TanStack може забезпечити можливості для розробки високопродуктивних і багатофункціональних React-застосунків у 2025 році.
## Слідкуйте за новинами в техніці, програмуванні, продуктивності та штучному інтелекті
Якщо вам сподобались ці статті, підключайтесь і слідкуйте за мною в [соціальних мережах](https://limey.io/andrewbaisden), де я ділюсь контентом на ці теми 🔥
Перекладено з: [How to Build Modern React Apps with the TanStack Suite in 2025](https://andrewbaisden.medium.com/how-to-build-modern-react-apps-with-the-tanstack-suite-in-2025-ba335f3e59f9)