docs(examples): standardize the READMEs for the React examples (#6014)

Co-authored-by: Sean Cassiere <33615041+SeanCassiere@users.noreply.github.com>

Author: enBonnet

examples/react/authenticated-routes-firebase/README.md

@@ -1,4 +1,19 @@
-# Firebase Setup
+# TanStack Router - Authenticated Routes with Firebase Example
+
+An example demonstrating authentication with Firebase and protected routes.
+
+- [TanStack Router Docs](https://tanstack.com/router)
+- [Firebase Documentation](https://firebase.google.com/docs)
+
+## Start a new project based on this example
+
+To start a new project based on this example, run:
+
+```sh
+npx gitpick TanStack/router/tree/main/examples/react/authenticated-routes-firebase authenticated-routes-firebase
+```
+
+## Firebase Setup
 
 1. Create a [Firebase project](https://console.firebase.google.com/)
    1. By default, firebase will configure an accepted domain for localhost...update if necessary!
@@ -22,19 +37,46 @@
 
 ## Setup .env.local
 
-Copy the .env.example provided and configure with your firebase credentials
+Copy the .env.example provided and configure with your firebase credentials:
 
-````VITE_FIREBASE_API_KEY=
+```
+VITE_FIREBASE_API_KEY=
 VITE_FIREBASE_AUTH_DOMAIN=
 VITE_FIREBASE_PROJECT_ID=
 VITE_FIREBASE_STORAGE_BUCKET=
 VITE_FIREBASE_MESSAGING_SENDER_ID=
-VITE_FIREBASE_APP_ID=```
+VITE_FIREBASE_APP_ID=
+```
+
+## Getting Started
+
+Install dependencies:
+
+```sh
+pnpm install
+```
+
+Start the development server:
+
+```sh
+pnpm dev
+```
+
+## Build
+
+Build for production:
+
+```sh
+pnpm build
+```
 
-## Run the app
+## About This Example
 
-To run this example:
+This example demonstrates:
 
-- `npm install` or `yarn`
-- `npm start` or `yarn start`
-````
+- Firebase authentication integration
+- Protected routes with Firebase Auth
+- Route guards
+- Login/logout with Firebase
+- User session management
+- Public vs private routes

examples/react/authenticated-routes/README.md

@@ -1,6 +1,46 @@
-# Example
+# TanStack Router - Authenticated Routes Example
 
-To run this example:
+An example demonstrating authentication and protected routes.
 
-- `npm install` or `yarn`
-- `npm start` or `yarn start`
+- [TanStack Router Docs](https://tanstack.com/router)
+
+## Start a new project based on this example
+
+To start a new project based on this example, run:
+
+```sh
+npx gitpick TanStack/router/tree/main/examples/react/authenticated-routes authenticated-routes
+```
+
+## Getting Started
+
+Install dependencies:
+
+```sh
+pnpm install
+```
+
+Start the development server:
+
+```sh
+pnpm dev
+```
+
+## Build
+
+Build for production:
+
+```sh
+pnpm build
+```
+
+## About This Example
+
+This example demonstrates:
+
+- Authentication flow
+- Protected routes
+- Route guards
+- Login/logout functionality
+- Redirect after authentication
+- Public vs private routes

examples/react/basic-default-search-params/README.md

@@ -1,6 +1,44 @@
-# Example
+# TanStack Router - Default Search Params Example
 
-To run this example:
+An example demonstrating default search parameters.
 
-- `npm install` or `yarn`
-- `npm start` or `yarn start`
+- [TanStack Router Docs](https://tanstack.com/router)
+
+## Start a new project based on this example
+
+To start a new project based on this example, run:
+
+```sh
+npx gitpick TanStack/router/tree/main/examples/react/basic-default-search-params basic-default-search-params
+```
+
+## Getting Started
+
+Install dependencies:
+
+```sh
+pnpm install
+```
+
+Start the development server:
+
+```sh
+pnpm dev
+```
+
+## Build
+
+Build for production:
+
+```sh
+pnpm build
+```
+
+## About This Example
+
+This example demonstrates:
+
+- Default search parameter values
+- Type-safe search params
+- Search param validation
+- URL state management

examples/react/basic-devtools-panel/README.md

@@ -1,6 +1,44 @@
-# Example
+# TanStack Router - DevTools Panel Example
 
-To run this example:
+An example demonstrating the TanStack Router DevTools panel.
 
-- `npm install` or `yarn`
-- `npm start` or `yarn start`
+- [TanStack Router Docs](https://tanstack.com/router)
+
+## Start a new project based on this example
+
+To start a new project based on this example, run:
+
+```sh
+npx gitpick TanStack/router/tree/main/examples/react/basic-devtools-panel basic-devtools-panel
+```
+
+## Getting Started
+
+Install dependencies:
+
+```sh
+pnpm install
+```
+
+Start the development server:
+
+```sh
+pnpm dev
+```
+
+## Build
+
+Build for production:
+
+```sh
+pnpm build
+```
+
+## About This Example
+
+This example demonstrates:
+
+- TanStack Router DevTools integration
+- DevTools panel configuration
+- Route debugging
+- State inspection

examples/react/basic-file-based/README.md

@@ -1,6 +1,44 @@
-# Example
+# TanStack Router - File-Based Routing Example
 
-To run this example:
+An example demonstrating file-based routing with TanStack Router.
 
-- `npm install` or `yarn`
-- `npm start` or `yarn start`
+- [TanStack Router Docs](https://tanstack.com/router)
+
+## Start a new project based on this example
+
+To start a new project based on this example, run:
+
+```sh
+npx gitpick TanStack/router/tree/main/examples/react/basic-file-based basic-file-based
+```
+
+## Getting Started
+
+Install dependencies:
+
+```sh
+pnpm install
+```
+
+Start the development server:
+
+```sh
+pnpm dev
+```
+
+## Build
+
+Build for production:
+
+```sh
+pnpm build
+```
+
+## About This Example
+
+This example demonstrates:
+
+- File-based route generation
+- Automatic route tree creation
+- Route file conventions
+- Type-safe routing with file-based routes

examples/react/basic-non-nested-devtools/README.md

@@ -1,6 +1,44 @@
-# Example
+# TanStack Router - Non-Nested DevTools Example
 
-To run this example:
+An example demonstrating TanStack Router DevTools in a non-nested configuration.
 
-- `npm install` or `yarn`
-- `npm start` or `yarn start`
+- [TanStack Router Docs](https://tanstack.com/router)
+
+## Start a new project based on this example
+
+To start a new project based on this example, run:
+
+```sh
+npx gitpick TanStack/router/tree/main/examples/react/basic-non-nested-devtools basic-non-nested-devtools
+```
+
+## Getting Started
+
+Install dependencies:
+
+```sh
+pnpm install
+```
+
+Start the development server:
+
+```sh
+pnpm dev
+```
+
+## Build
+
+Build for production:
+
+```sh
+pnpm build
+```
+
+## About This Example
+
+This example demonstrates:
+
+- TanStack Router DevTools
+- Non-nested DevTools configuration
+- Alternative DevTools placement
+- DevTools customization

examples/react/basic-react-query-file-based/README.md

@@ -1,6 +1,46 @@
-# Example
+# TanStack Router - React Query File-Based Example
 
-To run this example:
+An example combining file-based routing with TanStack Query integration.
 
-- `npm install` or `yarn`
-- `npm start` or `yarn start`
+- [TanStack Router Docs](https://tanstack.com/router)
+- [TanStack Query Docs](https://tanstack.com/query)
+
+## Start a new project based on this example
+
+To start a new project based on this example, run:
+
+```sh
+npx gitpick TanStack/router/tree/main/examples/react/basic-react-query-file-based basic-react-query-file-based
+```
+
+## Getting Started
+
+Install dependencies:
+
+```sh
+pnpm install
+```
+
+Start the development server:
+
+```sh
+pnpm dev
+```
+
+## Build
+
+Build for production:
+
+```sh
+pnpm build
+```
+
+## About This Example
+
+This example demonstrates:
+
+- File-based routing with TanStack Router
+- TanStack Query integration
+- Type-safe data fetching
+- Automatic route generation
+- Query-based data loading per route