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