diff --git a/docs/start/framework/react/quick-start.md b/docs/start/framework/react/quick-start.md index 24dd4dab43..66513f4328 100644 --- a/docs/start/framework/react/quick-start.md +++ b/docs/start/framework/react/quick-start.md @@ -37,15 +37,104 @@ Once you've cloned the example you want, head back to the [Routing](./guide/rout TanStack Start has load of examples to get you started. Pick one of the examples below to get started! - [Basic](https://github.com/TanStack/router/tree/main/examples/react/start-basic) (start-basic) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic + ``` + +
+ - [Basic + Auth](https://github.com/TanStack/router/tree/main/examples/react/start-basic-auth) (start-basic-auth) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/start-basic-auth start-basic-auth + ``` + +
+ - [Counter](https://github.com/TanStack/router/tree/main/examples/react/start-counter) (start-counter) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/start-counter start-counter + ``` + +
+ - [Basic + React Query](https://github.com/TanStack/router/tree/main/examples/react/start-basic-react-query) (start-basic-react-query) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/start-basic-react-query start-basic-react-query + ``` + +
+ - [Clerk Auth](https://github.com/TanStack/router/tree/main/examples/react/start-clerk-basic) (start-clerk-basic) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/start-clerk-basic start-clerk-basic + ``` + +
+ - [Convex + Trellaux](https://github.com/TanStack/router/tree/main/examples/react/start-convex-trellaux) (start-convex-trellaux) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/start-convex-trellaux start-convex-trellaux + ``` + +
+ - [Supabase](https://github.com/TanStack/router/tree/main/examples/react/start-supabase-basic) (start-supabase-basic) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/start-supabase-basic start-supabase-basic + ``` + +
+ - [Trellaux](https://github.com/TanStack/router/tree/main/examples/react/start-trellaux) (start-trellaux) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/start-trellaux start-trellaux + ``` + +
+ - [WorkOS](https://github.com/TanStack/router/tree/main/examples/react/start-workos) (start-workos) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/start-workos start-workos + ``` + +
+ - [Material UI](https://github.com/TanStack/router/tree/main/examples/react/start-material-ui) (start-material-ui) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/start-material-ui start-material-ui + ``` + +
### Stackblitz @@ -73,14 +162,121 @@ Once you've clone or deployed an example, head back to the [Routing](./guide/rou While not Start-specific examples, these may help you understand more about how TanStack Router works: - [Quickstart (file-based)](https://github.com/TanStack/router/tree/main/examples/react/quickstart-file-based) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/quickstart-file-based quickstart-file-based + ``` + +
+ - [Basic (file-based)](https://github.com/TanStack/router/tree/main/examples/react/basic-file-based) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/basic-file-based basic-file-based + ``` + +
+ - [Kitchen Sink (file-based)](https://github.com/TanStack/router/tree/main/examples/react/kitchen-sink-file-based) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/kitchen-sink-file-based kitchen-sink-file-based + ``` + +
+ - [Kitchen Sink + React Query (file-based)](https://github.com/TanStack/router/tree/main/examples/react/kitchen-sink-react-query-file-based) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/kitchen-sink-react-query-file-based kitchen-sink-react-query-file-based + ``` + +
+ - [Location Masking](https://github.com/TanStack/router/tree/main/examples/react/location-masking) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/location-masking location-masking + ``` + +
+ - [Authenticated Routes](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/authenticated-routes authenticated-routes + ``` + +
+ - [Scroll Restoration](https://github.com/TanStack/router/tree/main/examples/react/scroll-restoration) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/scroll-restoration scroll-restoration + ``` + +
+ - [Deferred Data](https://github.com/TanStack/router/tree/main/examples/react/deferred-data) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/deferred-data deferred-data + ``` + +
+ - [Navigation Blocking](https://github.com/TanStack/router/tree/main/examples/react/navigation-blocking) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/navigation-blocking navigation-blocking + ``` + +
+ - [View Transitions](https://github.com/TanStack/router/tree/main/examples/react/view-transitions) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/view-transitions view-transitions + ``` + +
+ - [With tRPC](https://github.com/TanStack/router/tree/main/examples/react/with-trpc) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/with-trpc with-trpc + ``` + +
+ - [With tRPC + React Query](https://github.com/TanStack/router/tree/main/examples/react/with-trpc-react-query) +
+ Show command + + ```bash + npx gitpick TanStack/router/tree/main/examples/react/with-trpc-react-query with-trpc-react-query + ``` + +