diff --git a/.prettierignore b/.prettierignore
index 5322d7f..91e75c6 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,3 +1,18 @@
-package-lock.json
+# Dependencias (Cajas viejas que no tocas)
+node_modules
pnpm-lock.yaml
-yarn.lock
\ No newline at end of file
+package-lock.json
+yarn.lock
+
+# Builds (Lo que genera la computadora, no tú)
+dist
+build
+.vite
+
+# Archivos temporales o de sistema
+.DS_Store
+.env
+.env.local
+
+# Archivos autogenerados (importante si usas librerías que crean código)
+src/routeTree.gen.ts
\ No newline at end of file
diff --git a/README.md b/README.md
index 8d53154..7737859 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-Welcome to your new TanStack app!
+Welcome to your new TanStack app!
# Getting Started
@@ -29,10 +29,8 @@ bun --bun run test
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
-
## Linting & Formatting
-
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:
```bash
@@ -41,7 +39,6 @@ bun --bun run format
bun --bun run check
```
-
## Shadcn
Add components using the latest version of [Shadcn](https://ui.shadcn.com/).
@@ -50,9 +47,8 @@ Add components using the latest version of [Shadcn](https://ui.shadcn.com/).
pnpm dlx shadcn@latest add button
```
-
-
## Routing
+
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`.
### Adding A Route
@@ -68,7 +64,7 @@ Now that you have two routes you can use a `Link` component to navigate between
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
```tsx
-import { Link } from "@tanstack/react-router";
+import { Link } from '@tanstack/react-router'
```
Then anywhere in your JSX you can use it like so:
@@ -91,7 +87,7 @@ Here is an example layout that includes a header:
import { Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
-import { Link } from "@tanstack/react-router";
+import { Link } from '@tanstack/react-router'
export const Route = createRootRoute({
component: () => (
@@ -113,7 +109,6 @@ The `
{data.results.map((person) => (
{person.name}
))}
- );
+ )
},
-});
+})
```
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).
@@ -160,29 +155,29 @@ bun install @tanstack/react-query @tanstack/react-query-devtools
Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
```tsx
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
// ...
-const queryClient = new QueryClient();
+const queryClient = new QueryClient()
// ...
if (!rootElement.innerHTML) {
- const root = ReactDOM.createRoot(rootElement);
+ const root = ReactDOM.createRoot(rootElement)
root.render(
- );
+ ,
+ )
}
```
You can also add TanStack Query Devtools to the root route (optional).
```tsx
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
const rootRoute = createRootRoute({
component: () => (
@@ -192,25 +187,25 @@ const rootRoute = createRootRoute({
@@ -220,10 +215,10 @@ function App() {
))}
- );
+ )
}
-export default App;
+export default App
```
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).
@@ -241,24 +236,24 @@ bun install @tanstack/store
Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
```tsx
-import { useStore } from "@tanstack/react-store";
-import { Store } from "@tanstack/store";
-import "./App.css";
+import { useStore } from '@tanstack/react-store'
+import { Store } from '@tanstack/store'
+import './App.css'
-const countStore = new Store(0);
+const countStore = new Store(0)
function App() {
- const count = useStore(countStore);
+ const count = useStore(countStore)
return (
countStore.setState((n) => n + 1)}>
Increment - {count}
- );
+ )
}
-export default App;
+export default App
```
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.
@@ -266,21 +261,21 @@ One of the many nice features of TanStack Store is the ability to derive state f
Let's check this out by doubling the count using derived state.
```tsx
-import { useStore } from "@tanstack/react-store";
-import { Store, Derived } from "@tanstack/store";
-import "./App.css";
+import { useStore } from '@tanstack/react-store'
+import { Store, Derived } from '@tanstack/store'
+import './App.css'
-const countStore = new Store(0);
+const countStore = new Store(0)
const doubledStore = new Derived({
fn: () => countStore.state * 2,
deps: [countStore],
-});
-doubledStore.mount();
+})
+doubledStore.mount()
function App() {
- const count = useStore(countStore);
- const doubledCount = useStore(doubledStore);
+ const count = useStore(countStore)
+ const doubledCount = useStore(doubledStore)
return (
@@ -289,10 +284,10 @@ function App() {
Doubled - {doubledCount}