README.md

Добро пожаловать в ваше новое TanStack приложение!

Начало работы

Для запуска приложения:

pnpm install
pnpm start

Сборка для продакшена

Для сборки приложения для продакшена:

pnpm build

Тестирование

Этот проект использует Vitest для тестирования. Вы можете запустить тесты с помощью:

pnpm test

Стилизация

Этот проект использует Tailwind CSS для стилизации.

Shadcn

Добавляйте компоненты, используя последнюю версию Shadcn.

pnpx shadcn@latest add button

Маршрутизация

Этот проект использует TanStack Router. Начальная настройка основана на файловой маршрутизации. Это означает, что маршруты управляются как файлы в src/routes.

Добавление маршрута

Чтобы добавить новый маршрут в ваше приложение, просто добавьте новый файл в директорию ./src/routes.

TanStack автоматически сгенерирует содержимое файла маршрута для вас.

Теперь, когда у вас есть два маршрута, вы можете использовать компонент Link для навигации между ними.

Добавление ссылок

Для использования SPA (Single Page Application) навигации вам нужно импортировать компонент Link из @tanstack/react-router.

import { Link } from "@tanstack/react-router";

Затем в любом месте вашего JSX вы можете использовать его так:

<Link to="/about">О нас</Link>

Это создаст ссылку, которая будет переходить к маршруту /about.

Больше информации о компоненте Link можно найти в документации Link.

Использование макета

В настройке файловой маршрутизации макет находится в src/routes/__root.tsx. Все, что вы добавите в корневой маршрут, будет отображаться во всех маршрутах. Содержимое маршрута будет отображаться в JSX, где вы используете компонент <Outlet />.

Вот пример макета, который включает заголовок:

import { Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'

import { Link } from "@tanstack/react-router";

export const Route = createRootRoute({
  component: () => (
    <>
      <header>
        <nav>
          <Link to="/">Главная</Link>
          <Link to="/about">О нас</Link>
        </nav>
      </header>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

Компонент <TanStackRouterDevtools /> не обязателен, поэтому вы можете удалить его, если не хотите его в своем макете.

Больше информации о макетах можно найти в документации по макетам.

Получение данных

Есть несколько способов получения данных в вашем приложении. Вы можете использовать TanStack Query для получения данных с сервера. Но вы также можете использовать функциональность loader, встроенную в TanStack Router, для загрузки данных для маршрута перед его рендерингом.

Например:

const peopleRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/people",
  loader: async () => {
    const response = await fetch("https://swapi.dev/api/people");
    return response.json() as Promise<{
      results: {
        name: string;
      }[];
    }>;
  },
  component: () => {
    const data = peopleRoute.useLoaderData();
    return (
      <ul>
        {data.results.map((person) => (
          <li key={person.name}>{person.name}</li>
        ))}
      </ul>
    );
  },
});

Лоадеры значительно упрощают логику получения данных. Узнайте больше в документации по лоадерам.

React-Query

React-Query является отличным дополнением или альтернативой загрузке маршрутов, и его интеграция в ваше приложение очень проста.

Сначала добавьте ваши зависимости:

pnpm add @tanstack/react-query @tanstack/react-query-devtools

Затем нам нужно создать клиент запросов и провайдер. Мы рекомендуем разместить их в main.tsx.

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// ...

const queryClient = new QueryClient();

// ...

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
}

Вы также можете добавить TanStack Query Devtools в корневой маршрут (опционально).

import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const rootRoute = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <ReactQueryDevtools buttonPosition="top-right" />
      <TanStackRouterDevtools />
    </>
  ),
});

Теперь вы можете использовать useQuery для получения ваших данных.

import { useQuery } from "@tanstack/react-query";

import "./App.css";

function App() {
  const { data } = useQuery({
    queryKey: ["people"],
    queryFn: () =>
      fetch("https://swapi.dev/api/people")
        .then((res) => res.json())
        .then((data) => data.results as { name: string }[]),
    initialData: [],
  });

  return (
    <div>
      <ul>
        {data.map((person) => (
          <li key={person.name}>{person.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Вы можете узнать все, что нужно знать о том, как использовать React-Query, в документации React-Query.

Управление состоянием

Еще одно распространенное требование для React приложений - это управление состоянием. Есть много вариантов управления состоянием в React. TanStack Store предоставляет отличную отправную точку для вашего проекта.

Сначала вам нужно добавить TanStack Store как зависимость:

pnpm add @tanstack/store

Теперь давайте создадим простой счетчик в файле src/App.tsx в качестве демонстрации.

import { useStore } from "@tanstack/react-store";
import { Store } from "@tanstack/store";
import "./App.css";

const countStore = new Store(0);

function App() {
  const count = useStore(countStore);
  return (
    <div>
      <button onClick={() => countStore.setState((n) => n + 1)}>
        Увеличить - {count}
      </button>
    </div>
  );
}

export default App;

Одна из многих приятных функций TanStack Store - это возможность выводить состояние из другого состояния. Это производное состояние будет обновляться при обновлении базового состояния.

Давайте проверим это, удвоив счетчик с помощью производного состояния.

import { useStore } from "@tanstack/react-store";
import { Store, Derived } from "@tanstack/store";
import "./App.css";

const countStore = new Store(0);

const doubledStore = new Derived({
  fn: () => countStore.state * 2,
  deps: [countStore],
});
doubledStore.mount();

function App() {
  const count = useStore(countStore);
  const doubledCount = useStore(doubledStore);

  return (
    <div>
      <button onClick={() => countStore.setState((n) => n + 1)}>
        Увеличить - {count}
      </button>
      <div>Удвоено - {doubledCount}</div>
    </div>
  );
}

export default App;

Мы используем класс Derived для создания нового хранилища, которое выводится из другого хранилища. Класс Derived имеет метод mount, который запустит обновление производного хранилища.

После создания производного хранилища мы можем использовать его в компоненте App точно так же, как и любое другое хранилище, используя хук useStore.

Вы можете узнать все, что нужно знать о том, как использовать TanStack Store, в документации TanStack Store.

Демо файлы

Файлы с префиксом demo можно безопасно удалить. Они там, чтобы предоставить отправную точку для экспериментов с установленными функциями.

Узнать больше

Вы можете узнать больше обо всех предложениях TanStack в документации TanStack.