docs(react): update quickstart to include file names and start file paths from root

Author: brandyscarney

docs/react/quickstart.md

@@ -53,30 +53,31 @@ After running `ionic serve`, your project will open in the browser.
 
 ## Explore the Project Structure
 
-Your new app's `src` directory will look like this:
+Your new app's directory will look like this:
 
 ```shell
-├── App.tsx
-├── components
-│   ├── ExploreContainer.css
-│   └── ExploreContainer.tsx
-├── main.tsx
-└──  pages
-    ├── Home.css
-    └── Home.tsx
+└── src/
+    ├── App.tsx
+    ├── components
+    │   ├── ExploreContainer.css
+    │   └── ExploreContainer.tsx
+    ├── main.tsx
+    └── pages
+        ├── Home.css
+        └── Home.tsx
 ```
 
 :::info
-All file paths in the examples below are relative to the `src/` directory.
+All file paths in the examples below are relative to the project root directory.
 :::
 
 Let's walk through these files to understand the app's structure.
 
 ## View the App Component
 
-The root of your app is defined in `App.tsx`:
+The root of your app is defined in `src/App.tsx`:
 
-```tsx
+```tsx title="src/App.tsx"
 import { Redirect, Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
@@ -108,9 +109,9 @@ This sets up the root of your application, using Ionic's `IonApp` and `IonReactR
 
 ## View Routes
 
-Routes are defined within the `IonRouterOutlet` in `App.tsx`:
+Routes are defined within the `IonRouterOutlet` in `src/App.tsx`:
 
-```tsx
+```tsx title="src/App.tsx"
 <IonRouterOutlet>
   <Route exact path="/home">
     <Home />
@@ -125,9 +126,9 @@ When you visit the root URL (`/`), the `Home` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `pages/Home.tsx`, imports the Ionic components and defines the page template:
+The Home page component, defined in `src/pages/Home.tsx`, imports the Ionic components and defines the page template:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import ExploreContainer from '../components/ExploreContainer';
 import './Home.css';
@@ -163,9 +164,9 @@ For detailed information about Ionic layout components, see the [Header](/docs/a
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button) at the end of the `IonContent` in `pages/Home.tsx`:
+You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button) at the end of the `IonContent` in `src/pages/Home.tsx`:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 // ...existing imports...
 
@@ -191,9 +192,9 @@ export default Home;
 
 ## Add a New Page
 
-Create a new page at `pages/New.tsx`:
+Create a new page at `src/pages/New.tsx`:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const New: React.FC = () => {
@@ -223,21 +224,21 @@ export default New;
 
 This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
-:::warning Important
+:::warning
 When creating your own pages, always use `IonPage` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app.
 :::
 
 ## Navigate to the New Page
 
-To navigate to the new page, create a route for it by first importing it at the top of `App.tsx` after the `Home` import:
+To navigate to the new page, create a route for it by first importing it at the top of `src/App.tsx` after the `Home` import:
 
-```tsx
+```tsx title="src/App.tsx"
 import New from './pages/New';
 ```
 
 Then, add its route in `IonRouterOutlet`:
 
-```tsx
+```tsx title="src/App.tsx"
 <IonRouterOutlet>
   <Route exact path="/home">
     <Home />
@@ -251,9 +252,9 @@ Then, add its route in `IonRouterOutlet`:
 </IonRouterOutlet>
 ```
 
-Once that is done, update the button in `pages/Home.tsx`:
+Once that is done, update the button in `src/pages/Home.tsx`:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 <IonButton routerLink="/new">Navigate</IonButton>
 ```
 
@@ -265,16 +266,16 @@ Navigating can also be performed programmatically using React Router's `history`
 
 Ionic React comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `icon` property of the `IonIcon` component.
 
-Update the imports in `pages/New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
+Update the imports in `src/pages/New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import { heart, logoIonic } from 'ionicons/icons';
 ```
 
 Then, include them inside of the `IonContent`:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 <IonIcon icon={heart} />
 <IonIcon icon={logoIonic} />
 ```
@@ -287,9 +288,9 @@ For more information, see the [Icon documentation](/docs/api/icon) and the [Ioni
 
 Let's add a button that can scroll the content area to the bottom.
 
-Update `pages/New.tsx` to add a `ref` on `IonContent` and a button and some items after the existing icons:
+Update `src/pages/New.tsx` to add a `ref` on `IonContent` and a button and some items after the existing icons:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 <IonContent ref={content}>
   <IonIcon icon={heart} />
   <IonIcon icon={logoIonic} />
@@ -307,7 +308,7 @@ Update `pages/New.tsx` to add a `ref` on `IonContent` and a button and some item
 
 Then, add the imports for the additional components and define the `scrollToBottom` function:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { useRef } from 'react';
 import { IonButton, IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import { heart, logoIonic } from 'ionicons/icons';

versioned_docs/version-v6/react/quickstart.md

@@ -53,30 +53,31 @@ After running `ionic serve`, your project will open in the browser.
 
 ## Explore the Project Structure
 
-Your new app's `src` directory will look like this:
+Your new app's directory will look like this:
 
 ```shell
-├── App.tsx
-├── components
-│   ├── ExploreContainer.css
-│   └── ExploreContainer.tsx
-├── main.tsx
-└──  pages
-    ├── Home.css
-    └── Home.tsx
+└── src/
+    ├── App.tsx
+    ├── components
+    │   ├── ExploreContainer.css
+    │   └── ExploreContainer.tsx
+    ├── main.tsx
+    └── pages
+        ├── Home.css
+        └── Home.tsx
 ```
 
 :::info
-All file paths in the examples below are relative to the `src/` directory.
+All file paths in the examples below are relative to the project root directory.
 :::
 
 Let's walk through these files to understand the app's structure.
 
 ## View the App Component
 
-The root of your app is defined in `App.tsx`:
+The root of your app is defined in `src/App.tsx`:
 
-```tsx
+```tsx title="src/App.tsx"
 import { Redirect, Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
@@ -108,9 +109,9 @@ This sets up the root of your application, using Ionic's `IonApp` and `IonReactR
 
 ## View Routes
 
-Routes are defined within the `IonRouterOutlet` in `App.tsx`:
+Routes are defined within the `IonRouterOutlet` in `src/App.tsx`:
 
-```tsx
+```tsx title="src/App.tsx"
 <IonRouterOutlet>
   <Route exact path="/home">
     <Home />
@@ -125,9 +126,9 @@ When you visit the root URL (`/`), the `Home` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `pages/Home.tsx`, imports the Ionic components and defines the page template:
+The Home page component, defined in `src/pages/Home.tsx`, imports the Ionic components and defines the page template:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import ExploreContainer from '../components/ExploreContainer';
 import './Home.css';
@@ -163,9 +164,9 @@ For detailed information about Ionic layout components, see the [Header](/docs/a
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button) at the end of the `IonContent` in `pages/Home.tsx`:
+You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button) at the end of the `IonContent` in `src/pages/Home.tsx`:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 // ...existing imports...
 
@@ -191,9 +192,9 @@ export default Home;
 
 ## Add a New Page
 
-Create a new page at `pages/New.tsx`:
+Create a new page at `src/pages/New.tsx`:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
 const New: React.FC = () => {
@@ -223,21 +224,21 @@ export default New;
 
 This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
 
-:::warning Important
+:::warning
 When creating your own pages, always use `IonPage` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app.
 :::
 
 ## Navigate to the New Page
 
-To navigate to the new page, create a route for it by first importing it at the top of `App.tsx` after the `Home` import:
+To navigate to the new page, create a route for it by first importing it at the top of `src/App.tsx` after the `Home` import:
 
-```tsx
+```tsx title="src/App.tsx"
 import New from './pages/New';
 ```
 
 Then, add its route in `IonRouterOutlet`:
 
-```tsx
+```tsx title="src/App.tsx"
 <IonRouterOutlet>
   <Route exact path="/home">
     <Home />
@@ -251,9 +252,9 @@ Then, add its route in `IonRouterOutlet`:
 </IonRouterOutlet>
 ```
 
-Once that is done, update the button in `pages/Home.tsx`:
+Once that is done, update the button in `src/pages/Home.tsx`:
 
-```tsx
+```tsx title="src/pages/Home.tsx"
 <IonButton routerLink="/new">Navigate</IonButton>
 ```
 
@@ -265,16 +266,16 @@ Navigating can also be performed programmatically using React Router's `history`
 
 Ionic React comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `icon` property of the `IonIcon` component.
 
-Update the imports in `pages/New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
+Update the imports in `src/pages/New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import { heart, logoIonic } from 'ionicons/icons';
 ```
 
 Then, include them inside of the `IonContent`:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 <IonIcon icon={heart} />
 <IonIcon icon={logoIonic} />
 ```
@@ -287,9 +288,9 @@ For more information, see the [Icon documentation](/docs/api/icon) and the [Ioni
 
 Let's add a button that can scroll the content area to the bottom.
 
-Update `pages/New.tsx` to add a `ref` on `IonContent` and a button and some items after the existing icons:
+Update `src/pages/New.tsx` to add a `ref` on `IonContent` and a button and some items after the existing icons:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 <IonContent ref={content}>
   <IonIcon icon={heart} />
   <IonIcon icon={logoIonic} />
@@ -307,7 +308,7 @@ Update `pages/New.tsx` to add a `ref` on `IonContent` and a button and some item
 
 Then, add the imports for the additional components and define the `scrollToBottom` function:
 
-```tsx
+```tsx title="src/pages/New.tsx"
 import { useRef } from 'react';
 import { IonButton, IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import { heart, logoIonic } from 'ionicons/icons';