···11+Welcome to your new TanStack app!
22+33+# Getting Started
44+55+To run this application:
66+77+```bash
88+pnpm install
99+pnpm start
1010+```
1111+1212+# Building For Production
1313+1414+To build this application for production:
1515+1616+```bash
1717+pnpm build
1818+```
1919+2020+## Testing
2121+2222+This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
2323+2424+```bash
2525+pnpm test
2626+```
2727+2828+## Styling
2929+3030+This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
3131+3232+3333+## Linting & Formatting
3434+3535+3636+This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
3737+3838+```bash
3939+pnpm lint
4040+pnpm format
4141+pnpm check
4242+```
4343+4444+4545+4646+## Routing
4747+This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.
4848+4949+### Adding A Route
5050+5151+To add a new route to your application just add another a new file in the `./src/routes` directory.
5252+5353+TanStack will automatically generate the content of the route file for you.
5454+5555+Now that you have two routes you can use a `Link` component to navigate between them.
5656+5757+### Adding Links
5858+5959+To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
6060+6161+```tsx
6262+import { Link } from "@tanstack/react-router";
6363+```
6464+6565+Then anywhere in your JSX you can use it like so:
6666+6767+```tsx
6868+<Link to="/about">About</Link>
6969+```
7070+7171+This will create a link that will navigate to the `/about` route.
7272+7373+More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
7474+7575+### Using A Layout
7676+7777+In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.
7878+7979+Here is an example layout that includes a header:
8080+8181+```tsx
8282+import { Outlet, createRootRoute } from '@tanstack/react-router'
8383+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
8484+8585+import { Link } from "@tanstack/react-router";
8686+8787+export const Route = createRootRoute({
8888+ component: () => (
8989+ <>
9090+ <header>
9191+ <nav>
9292+ <Link to="/">Home</Link>
9393+ <Link to="/about">About</Link>
9494+ </nav>
9595+ </header>
9696+ <Outlet />
9797+ <TanStackRouterDevtools />
9898+ </>
9999+ ),
100100+})
101101+```
102102+103103+The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
104104+105105+More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
106106+107107+108108+## Data Fetching
109109+110110+There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
111111+112112+For example:
113113+114114+```tsx
115115+const peopleRoute = createRoute({
116116+ getParentRoute: () => rootRoute,
117117+ path: "/people",
118118+ loader: async () => {
119119+ const response = await fetch("https://swapi.dev/api/people");
120120+ return response.json() as Promise<{
121121+ results: {
122122+ name: string;
123123+ }[];
124124+ }>;
125125+ },
126126+ component: () => {
127127+ const data = peopleRoute.useLoaderData();
128128+ return (
129129+ <ul>
130130+ {data.results.map((person) => (
131131+ <li key={person.name}>{person.name}</li>
132132+ ))}
133133+ </ul>
134134+ );
135135+ },
136136+});
137137+```
138138+139139+Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
140140+141141+### React-Query
142142+143143+React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
144144+145145+First add your dependencies:
146146+147147+```bash
148148+pnpm add @tanstack/react-query @tanstack/react-query-devtools
149149+```
150150+151151+Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
152152+153153+```tsx
154154+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
155155+156156+// ...
157157+158158+const queryClient = new QueryClient();
159159+160160+// ...
161161+162162+if (!rootElement.innerHTML) {
163163+ const root = ReactDOM.createRoot(rootElement);
164164+165165+ root.render(
166166+ <QueryClientProvider client={queryClient}>
167167+ <RouterProvider router={router} />
168168+ </QueryClientProvider>
169169+ );
170170+}
171171+```
172172+173173+You can also add TanStack Query Devtools to the root route (optional).
174174+175175+```tsx
176176+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
177177+178178+const rootRoute = createRootRoute({
179179+ component: () => (
180180+ <>
181181+ <Outlet />
182182+ <ReactQueryDevtools buttonPosition="top-right" />
183183+ <TanStackRouterDevtools />
184184+ </>
185185+ ),
186186+});
187187+```
188188+189189+Now you can use `useQuery` to fetch your data.
190190+191191+```tsx
192192+import { useQuery } from "@tanstack/react-query";
193193+194194+import "./App.css";
195195+196196+function App() {
197197+ const { data } = useQuery({
198198+ queryKey: ["people"],
199199+ queryFn: () =>
200200+ fetch("https://swapi.dev/api/people")
201201+ .then((res) => res.json())
202202+ .then((data) => data.results as { name: string }[]),
203203+ initialData: [],
204204+ });
205205+206206+ return (
207207+ <div>
208208+ <ul>
209209+ {data.map((person) => (
210210+ <li key={person.name}>{person.name}</li>
211211+ ))}
212212+ </ul>
213213+ </div>
214214+ );
215215+}
216216+217217+export default App;
218218+```
219219+220220+You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).
221221+222222+## State Management
223223+224224+Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.
225225+226226+First you need to add TanStack Store as a dependency:
227227+228228+```bash
229229+pnpm add @tanstack/store
230230+```
231231+232232+Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
233233+234234+```tsx
235235+import { useStore } from "@tanstack/react-store";
236236+import { Store } from "@tanstack/store";
237237+import "./App.css";
238238+239239+const countStore = new Store(0);
240240+241241+function App() {
242242+ const count = useStore(countStore);
243243+ return (
244244+ <div>
245245+ <button onClick={() => countStore.setState((n) => n + 1)}>
246246+ Increment - {count}
247247+ </button>
248248+ </div>
249249+ );
250250+}
251251+252252+export default App;
253253+```
254254+255255+One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
256256+257257+Let's check this out by doubling the count using derived state.
258258+259259+```tsx
260260+import { useStore } from "@tanstack/react-store";
261261+import { Store, Derived } from "@tanstack/store";
262262+import "./App.css";
263263+264264+const countStore = new Store(0);
265265+266266+const doubledStore = new Derived({
267267+ fn: () => countStore.state * 2,
268268+ deps: [countStore],
269269+});
270270+doubledStore.mount();
271271+272272+function App() {
273273+ const count = useStore(countStore);
274274+ const doubledCount = useStore(doubledStore);
275275+276276+ return (
277277+ <div>
278278+ <button onClick={() => countStore.setState((n) => n + 1)}>
279279+ Increment - {count}
280280+ </button>
281281+ <div>Doubled - {doubledCount}</div>
282282+ </div>
283283+ );
284284+}
285285+286286+export default App;
287287+```
288288+289289+We use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.
290290+291291+Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.
292292+293293+You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
294294+295295+# Demo files
296296+297297+Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
298298+299299+# Learn More
300300+301301+You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).