diff --git a/docs/start/framework/react/quick-start.md b/docs/start/framework/react/quick-start.md index 6004e9e283..270c03ebbe 100644 --- a/docs/start/framework/react/quick-start.md +++ b/docs/start/framework/react/quick-start.md @@ -3,23 +3,54 @@ id: quick-start title: Quick Start --- -TanStack Start has load of examples to get you started. Pick one of the examples below to get started! +## Impatient? + +If you're impatient, you can clone and run the [Basic](../examples/start-basic) example right away with the following commands: + +```bash +npx degit https://github.com/tanstack/router/examples/react/start-basic start-basic +cd start-basic +npm install +npm run dev +``` + +If you'd like to use a different example, you can replace `start-basic` above with the slug of the example you'd like to use from the list below. -1. Play with each example in the embedded stackblitz preview to find the one that feels like a good starting point -2. Click the **Deploy to Netlify** button to both clone and deploy the example to Netlify -3. Or, manually clone and deploy the example to anywhere else you'd like -4. Once you've done this, head back to the [Learn the Basics](../learn-the-basics) guide to learn how to use TanStack Start +Once you've cloned the example you want, head back to the [Learn the Basics](../learn-the-basics) guide to learn how to use TanStack Start! ## Examples -- [Basic](../examples/start-basic) -- [Basic + Auth](../examples/start-basic-auth) -- [Basic + Counter](../examples/start-basic-counter) -- [Basic + React Query](../examples/start-basic-react-query) -- [Clerk Auth](../examples/start-clerk-basic) -- [Convex + Trellaux](../examples/start-convex-trellaux) -- [Supabase](../examples/start-supabase-basic) -- [Trellaux](../examples/start-trellaux) +TanStack Start has load of examples to get you started. Pick one of the examples below to get started! + +- [Basic](../examples/start-basic) (start-basic) +- [Basic + Auth](../examples/start-basic-auth) (start-basic-auth) +- [Basic + Counter](../examples/start-basic-counter) (start-basic-counter) +- [Basic + React Query](../examples/start-basic-react-query) (start-basic-react-query) +- [Clerk Auth](../examples/start-clerk-basic) (start-clerk-basic) +- [Convex + Trellaux](../examples/start-convex-trellaux) (start-convex-trellaux) +- [Supabase](../examples/start-supabase-basic) (start-supabase-basic) +- [Trellaux](../examples/start-trellaux) (start-trellaux) + +### Stackblitz + +Each example above has an embedded stackblitz preview to find the one that feels like a good starting point + +### Quick Deploy + +To quickly deploy an example, click the **Deploy to Netlify** button on an example's page to both clone and deploy the example to Netlify. + +### Manual Deploy + +To manually clone and deploy the example to anywhere else you'd like, use the following commands replacing `EXAMPLE_SLUG` with the slug of the example you'd like to use from above: + +```bash +npx degit https://github.com/tanstack/router/examples/react/EXAMPLE_SLUG my-new-project +cd my-new-project +npm install +npm run dev +``` + +Once you've clone or deployed an example, head back to the [Learn the Basics](../learn-the-basics) guide to learn how to use TanStack Start! ## Other Router Examples