···11+# shadcn instructions
22+33+Use the latest version of Shadcn to install new components, like this command to add a button component:
44+55+```bash
66+pnpx shadcn@latest add button
77+```
···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+3434+## Shadcn
3535+3636+Add components using the latest version of [Shadcn](https://ui.shadcn.com/).
3737+3838+```bash
3939+pnpx shadcn@latest add button
4040+```
4141+4242+4343+4444+## Routing
4545+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`.
4646+4747+### Adding A Route
4848+4949+To add a new route to your application just add another a new file in the `./src/routes` directory.
5050+5151+TanStack will automatically generate the content of the route file for you.
5252+5353+Now that you have two routes you can use a `Link` component to navigate between them.
5454+5555+### Adding Links
5656+5757+To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
5858+5959+```tsx
6060+import { Link } from "@tanstack/react-router";
6161+```
6262+6363+Then anywhere in your JSX you can use it like so:
6464+6565+```tsx
6666+<Link to="/about">About</Link>
6767+```
6868+6969+This will create a link that will navigate to the `/about` route.
7070+7171+More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
7272+7373+### Using A Layout
7474+7575+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.
7676+7777+Here is an example layout that includes a header:
7878+7979+```tsx
8080+import { Outlet, createRootRoute } from '@tanstack/react-router'
8181+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
8282+8383+import { Link } from "@tanstack/react-router";
8484+8585+export const Route = createRootRoute({
8686+ component: () => (
8787+ <>
8888+ <header>
8989+ <nav>
9090+ <Link to="/">Home</Link>
9191+ <Link to="/about">About</Link>
9292+ </nav>
9393+ </header>
9494+ <Outlet />
9595+ <TanStackRouterDevtools />
9696+ </>
9797+ ),
9898+})
9999+```
100100+101101+The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
102102+103103+More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
104104+105105+106106+## Data Fetching
107107+108108+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.
109109+110110+For example:
111111+112112+```tsx
113113+const peopleRoute = createRoute({
114114+ getParentRoute: () => rootRoute,
115115+ path: "/people",
116116+ loader: async () => {
117117+ const response = await fetch("https://swapi.dev/api/people");
118118+ return response.json() as Promise<{
119119+ results: {
120120+ name: string;
121121+ }[];
122122+ }>;
123123+ },
124124+ component: () => {
125125+ const data = peopleRoute.useLoaderData();
126126+ return (
127127+ <ul>
128128+ {data.results.map((person) => (
129129+ <li key={person.name}>{person.name}</li>
130130+ ))}
131131+ </ul>
132132+ );
133133+ },
134134+});
135135+```
136136+137137+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).
138138+139139+### React-Query
140140+141141+React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
142142+143143+First add your dependencies:
144144+145145+```bash
146146+pnpm add @tanstack/react-query @tanstack/react-query-devtools
147147+```
148148+149149+Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
150150+151151+```tsx
152152+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
153153+154154+// ...
155155+156156+const queryClient = new QueryClient();
157157+158158+// ...
159159+160160+if (!rootElement.innerHTML) {
161161+ const root = ReactDOM.createRoot(rootElement);
162162+163163+ root.render(
164164+ <QueryClientProvider client={queryClient}>
165165+ <RouterProvider router={router} />
166166+ </QueryClientProvider>
167167+ );
168168+}
169169+```
170170+171171+You can also add TanStack Query Devtools to the root route (optional).
172172+173173+```tsx
174174+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
175175+176176+const rootRoute = createRootRoute({
177177+ component: () => (
178178+ <>
179179+ <Outlet />
180180+ <ReactQueryDevtools buttonPosition="top-right" />
181181+ <TanStackRouterDevtools />
182182+ </>
183183+ ),
184184+});
185185+```
186186+187187+Now you can use `useQuery` to fetch your data.
188188+189189+```tsx
190190+import { useQuery } from "@tanstack/react-query";
191191+192192+import "./App.css";
193193+194194+function App() {
195195+ const { data } = useQuery({
196196+ queryKey: ["people"],
197197+ queryFn: () =>
198198+ fetch("https://swapi.dev/api/people")
199199+ .then((res) => res.json())
200200+ .then((data) => data.results as { name: string }[]),
201201+ initialData: [],
202202+ });
203203+204204+ return (
205205+ <div>
206206+ <ul>
207207+ {data.map((person) => (
208208+ <li key={person.name}>{person.name}</li>
209209+ ))}
210210+ </ul>
211211+ </div>
212212+ );
213213+}
214214+215215+export default App;
216216+```
217217+218218+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).
219219+220220+## State Management
221221+222222+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.
223223+224224+First you need to add TanStack Store as a dependency:
225225+226226+```bash
227227+pnpm add @tanstack/store
228228+```
229229+230230+Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
231231+232232+```tsx
233233+import { useStore } from "@tanstack/react-store";
234234+import { Store } from "@tanstack/store";
235235+import "./App.css";
236236+237237+const countStore = new Store(0);
238238+239239+function App() {
240240+ const count = useStore(countStore);
241241+ return (
242242+ <div>
243243+ <button onClick={() => countStore.setState((n) => n + 1)}>
244244+ Increment - {count}
245245+ </button>
246246+ </div>
247247+ );
248248+}
249249+250250+export default App;
251251+```
252252+253253+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.
254254+255255+Let's check this out by doubling the count using derived state.
256256+257257+```tsx
258258+import { useStore } from "@tanstack/react-store";
259259+import { Store, Derived } from "@tanstack/store";
260260+import "./App.css";
261261+262262+const countStore = new Store(0);
263263+264264+const doubledStore = new Derived({
265265+ fn: () => countStore.state * 2,
266266+ deps: [countStore],
267267+});
268268+doubledStore.mount();
269269+270270+function App() {
271271+ const count = useStore(countStore);
272272+ const doubledCount = useStore(doubledStore);
273273+274274+ return (
275275+ <div>
276276+ <button onClick={() => countStore.setState((n) => n + 1)}>
277277+ Increment - {count}
278278+ </button>
279279+ <div>Doubled - {doubledCount}</div>
280280+ </div>
281281+ );
282282+}
283283+284284+export default App;
285285+```
286286+287287+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.
288288+289289+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.
290290+291291+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).
292292+293293+# Demo files
294294+295295+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.
296296+297297+# Learn More
298298+299299+You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).