this repo has no description
1Welcome to your new TanStack app!
2
3# Getting Started
4
5To run this application:
6
7```bash
8pnpm install
9pnpm start
10```
11
12# Building For Production
13
14To build this application for production:
15
16```bash
17pnpm build
18```
19
20## Testing
21
22This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
23
24```bash
25pnpm test
26```
27
28## Styling
29
30This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
31
32## Shadcn
33
34Add components using the latest version of [Shadcn](https://ui.shadcn.com/).
35
36```bash
37pnpx shadcn@latest add button
38```
39
40## Routing
41
42This 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`.
43
44### Adding A Route
45
46To add a new route to your application just add another a new file in the `./src/routes` directory.
47
48TanStack will automatically generate the content of the route file for you.
49
50Now that you have two routes you can use a `Link` component to navigate between them.
51
52### Adding Links
53
54To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
55
56```tsx
57import { Link } from "@tanstack/react-router";
58```
59
60Then anywhere in your JSX you can use it like so:
61
62```tsx
63<Link to="/about">About</Link>
64```
65
66This will create a link that will navigate to the `/about` route.
67
68More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
69
70### Using A Layout
71
72In 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.
73
74Here is an example layout that includes a header:
75
76```tsx
77import { Outlet, createRootRoute } from "@tanstack/react-router";
78import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
79
80import { Link } from "@tanstack/react-router";
81
82export const Route = createRootRoute({
83 component: () => (
84 <>
85 <header>
86 <nav>
87 <Link to="/">Home</Link>
88 <Link to="/about">About</Link>
89 </nav>
90 </header>
91 <Outlet />
92 <TanStackRouterDevtools />
93 </>
94 ),
95});
96```
97
98The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
99
100More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
101
102## Data Fetching
103
104There 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.
105
106For example:
107
108```tsx
109const peopleRoute = createRoute({
110 getParentRoute: () => rootRoute,
111 path: "/people",
112 loader: async () => {
113 const response = await fetch("https://swapi.dev/api/people");
114 return response.json() as Promise<{
115 results: {
116 name: string;
117 }[];
118 }>;
119 },
120 component: () => {
121 const data = peopleRoute.useLoaderData();
122 return (
123 <ul>
124 {data.results.map((person) => (
125 <li key={person.name}>{person.name}</li>
126 ))}
127 </ul>
128 );
129 },
130});
131```
132
133Loaders 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).
134
135### React-Query
136
137React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
138
139First add your dependencies:
140
141```bash
142pnpm add @tanstack/react-query @tanstack/react-query-devtools
143```
144
145Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
146
147```tsx
148import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
149
150// ...
151
152const queryClient = new QueryClient();
153
154// ...
155
156if (!rootElement.innerHTML) {
157 const root = ReactDOM.createRoot(rootElement);
158
159 root.render(
160 <QueryClientProvider client={queryClient}>
161 <RouterProvider router={router} />
162 </QueryClientProvider>,
163 );
164}
165```
166
167You can also add TanStack Query Devtools to the root route (optional).
168
169```tsx
170import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
171
172const rootRoute = createRootRoute({
173 component: () => (
174 <>
175 <Outlet />
176 <ReactQueryDevtools buttonPosition="top-right" />
177 <TanStackRouterDevtools />
178 </>
179 ),
180});
181```
182
183Now you can use `useQuery` to fetch your data.
184
185```tsx
186import { useQuery } from "@tanstack/react-query";
187
188import "./App.css";
189
190function App() {
191 const { data } = useQuery({
192 queryKey: ["people"],
193 queryFn: () =>
194 fetch("https://swapi.dev/api/people")
195 .then((res) => res.json())
196 .then((data) => data.results as { name: string }[]),
197 initialData: [],
198 });
199
200 return (
201 <div>
202 <ul>
203 {data.map((person) => (
204 <li key={person.name}>{person.name}</li>
205 ))}
206 </ul>
207 </div>
208 );
209}
210
211export default App;
212```
213
214You 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).
215
216## State Management
217
218Another 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.
219
220First you need to add TanStack Store as a dependency:
221
222```bash
223pnpm add @tanstack/store
224```
225
226Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
227
228```tsx
229import { useStore } from "@tanstack/react-store";
230import { Store } from "@tanstack/store";
231import "./App.css";
232
233const countStore = new Store(0);
234
235function App() {
236 const count = useStore(countStore);
237 return (
238 <div>
239 <button onClick={() => countStore.setState((n) => n + 1)}>Increment - {count}</button>
240 </div>
241 );
242}
243
244export default App;
245```
246
247One 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.
248
249Let's check this out by doubling the count using derived state.
250
251```tsx
252import { useStore } from "@tanstack/react-store";
253import { Store, Derived } from "@tanstack/store";
254import "./App.css";
255
256const countStore = new Store(0);
257
258const doubledStore = new Derived({
259 fn: () => countStore.state * 2,
260 deps: [countStore],
261});
262doubledStore.mount();
263
264function App() {
265 const count = useStore(countStore);
266 const doubledCount = useStore(doubledStore);
267
268 return (
269 <div>
270 <button onClick={() => countStore.setState((n) => n + 1)}>Increment - {count}</button>
271 <div>Doubled - {doubledCount}</div>
272 </div>
273 );
274}
275
276export default App;
277```
278
279We 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.
280
281Once 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.
282
283You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
284
285# Demo files
286
287Files 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.
288
289# Learn More
290
291You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).