docs(react): show complete code context in the "Your First App" tutorial #4201

joesphchang · 2025-07-17T16:00:07Z

Resolves: #4164

Changes:

Update code blocks and text for the ReactPhoto App tutorial to show additional context for each step with comments to indicate new lines.

Preview

vercel · 2025-07-17T16:00:11Z

@joesphchang is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2025-07-18T13:41:04Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ionic-docs	Ready	Preview	Comment	Oct 29, 2025 7:59pm

thetaPC

I noticed that some method names from the Angular version and Vue version do not match even though they have the same code. For example, addNewToGallery from Angular and usePhotoGallery from Vue. Let's also sync those to match Angular as close as possible.

The same goes for the <title>. Let's match it to Angular.

Lastly, some of the content also doesn't match each other. A good example, Angular Build Your First App mentions:

`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](https://ionicframework.com/docs/api/title#collapsible-large-titles) support). Rename both ion-title elements to:

While React states:

`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:

docs/components.md

docs/react/your-first-app.md

…-docs into react-firstapp-content

brandyscarney

All changes made to v8 should also be made to v7 please. 🙂

brandyscarney · 2025-11-06T21:49:36Z

docs/react/your-first-app.md


 And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.

 ## Photo Gallery!!!


Can we remove the !!! here too?

brandyscarney · 2025-11-06T22:00:33Z

docs/react/your-first-app.md

+`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:

 ```tsx
 <IonTitle>Photo Gallery</IonTitle>


I have the same concern here as in the Vue guide with replacing the size="large" attribute when it should remain.

brandyscarney · 2025-11-06T22:01:40Z

docs/react/your-first-app.md

+We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.

 ```tsx
+// CHANGE: Add the following import.


Suggested change

// CHANGE: Add the following import.

// CHANGE: Add the following import

Remove periods from comments

brandyscarney · 2025-11-06T22:03:33Z

docs/react/your-first-app.md

+// CHANGE: Add the following import.
 import { camera, trash, close } from 'ionicons/icons';
+// CHANGE: Update the following import.
 import {


Same concern with the imports as Vue. A lot of unused imports in the beginning, maybe we should show them being added so you know it is part of the process of adding new components:

brandyscarney · 2025-11-06T22:05:20Z

docs/react/your-first-app.md

-We’ll be creating the `takePhoto` method and the logic to use the Camera and other native features in a moment.
-
-Next, open `src/App.tsx`, remove the `ellipse` icon from the import and import the `images` icon instead:
+Next, open `src/views/TabsPage.vue`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.


Suggested change

Next, open `src/views/TabsPage.vue`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.

Next, open `src/App.tsx`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.

Incorrect Vue reference

brandyscarney · 2025-11-07T18:08:20Z

docs/react/your-first-app.md

+          <IonTabButton tab="tab2" href="/tab2">
+            {/* CHANGE: Update icon. */}
+            <IonIcon aria-hidden="true" icon={images} />
+            {/* CHANGE: Update label. */}


Suggested change

{/* CHANGE: Update label. */}

{/* CHANGE: Update label */}

brandyscarney · 2025-11-07T18:13:16Z

docs/react/your-first-app/6-deploying-mobile.md

+Since we added Capacitor to our project when it was first created, there’s only a handful of steps remaining until the Photo Gallery app is on our device!
+
+:::note
+Remember, you can find the complete source code for this app [here](https://github.com/ionic-team/photo-gallery-capacitor-react).


Should we remove this since it was removed in Angular?

brandyscarney · 2025-11-07T18:23:38Z

docs/react/your-first-app/7-live-reload.md

+      </IonContent>
+    </IonPage>
+  );
 };


Suggested change

};

};

export default Tab2;

Add this for easy copy/paste

brandyscarney · 2025-11-07T18:33:49Z

docs/react/your-first-app/7-live-reload.md

+  return (
+    <IonPage>
+      <IonContent>
+        {/* Same old code from before. */}


Suggested change

{/* Same old code from before. */}

<IonHeader collapse="condense">

<IonToolbar>

<IonTitle size="large">Photo Gallery</IonTitle>

</IonToolbar>

</IonHeader>

<IonGrid>

<IonRow>

{photos.map((photo) => (

<IonCol size="6" key={photo.filepath}>

<IonImg src={photo.webviewPath} />

</IonCol>

))}

</IonRow>

</IonGrid>

It's confusing to not include the code here but keep the IonFab below. I think we should show all of it.

brandyscarney · 2025-11-07T18:38:13Z

docs/react/your-first-app/7-live-reload.md

-Save this file, then tap on a photo again and choose the “Delete” option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪
+Remember that removing the photo from the `photos` array triggers the `cachePhotos` method for us automatically.
+
+Tap on a photo again and choose the “Delete” option. The photo is deleted! Implemented much faster using Live Reload. 💪


Missing the note here like Angular:

joesphchang added 4 commits July 9, 2025 15:11

docs(component): added missing components

9955fd4

docs(components): updated descriptions on components

d4c5cda

docs(react): show complete code context in the "Your FirstApp" tutorial

aeead46

docs(react): ran npm run lint and fixed spelling in docs

4ff6c31

joesphchang requested a review from a team as a code owner July 17, 2025 16:00

joesphchang requested a review from ShaneK July 17, 2025 16:00

Merge branch 'main' into react-firstapp-content

2f52971

vercel bot deployed to Preview July 18, 2025 13:43 View deployment

thetaPC requested changes Sep 24, 2025

View reviewed changes

docs/components.md Outdated Show resolved Hide resolved

docs/react/your-first-app.md Outdated Show resolved Hide resolved

docs/react/your-first-app.md Show resolved Hide resolved

thetaPC and others added 4 commits October 21, 2025 12:28

Merge branch 'main' into react-firstapp-content

21cbe64

docs(components): remove redundant

e361e12

Merge branch 'react-firstapp-content' of github.com:joesphchang/ionic…

1e5819f

…-docs into react-firstapp-content

Update docs/react/your-first-app.md

26ed242

vercel bot deployed to Preview October 21, 2025 21:33 View deployment

thetaPC added 2 commits October 21, 2025 16:01

docs(react): update your first app page

32b0976

docs(react): update file paths

e3410a2

vercel bot deployed to Preview October 22, 2025 00:44 View deployment

docs(react): upate your first app page

2cefaad

vercel bot deployed to Preview October 27, 2025 19:11 View deployment

thetaPC added 6 commits October 27, 2025 12:46

docs(react): update taking photos page

7e9bb4d

docs(react): update saving photos page

290abfb

docs(react): update loading photos page

a386a0c

docs(react): update adding mobile page

6072689

docs(react): update live reload page

cb2cdff

docs(react): update your first app pages

978d7e6

vercel bot deployed to Preview October 28, 2025 21:55 View deployment

docs(react): update your first app pages

9788859

vercel bot deployed to Preview October 28, 2025 23:59 View deployment

docs(react): update your first app pages for v7

524ad6a

vercel bot deployed to Preview October 29, 2025 19:59 View deployment

brandyscarney reviewed Nov 7, 2025

View reviewed changes


		And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.

		## Photo Gallery!!!

	// CHANGE: Add the following import.
	// CHANGE: Add the following import

	Next, open `src/views/TabsPage.vue`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.
	Next, open `src/App.tsx`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.

-};
+};
+export default Tab2;

-        {/* Same old code from before. */}
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Photo Gallery</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonGrid>
+          <IonRow>
+            {photos.map((photo) => (
+              <IonCol size="6" key={photo.filepath}>
+                <IonImg src={photo.webviewPath} />
+              </IonCol>
+            ))}
+          </IonRow>
+        </IonGrid>

docs(react): show complete code context in the "Your First App" tutorial #4201

Are you sure you want to change the base?

docs(react): show complete code context in the "Your First App" tutorial #4201

Uh oh!

Conversation

joesphchang commented Jul 17, 2025 • edited by thetaPC Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Jul 17, 2025

Uh oh!

vercel bot commented Jul 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thetaPC left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

joesphchang commented Jul 17, 2025 •

edited by thetaPC

Loading

vercel bot commented Jul 18, 2025 •

edited

Loading