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	Nov 11, 2025 7:40pm

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

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

brandyscarney

Left a comment with some optional changes, but looks good!

ShaneK

I had a few minor consistency nits/suggestions, but generally I think this looks great! Awesome work!

ShaneK · 2025-11-13T20:52:37Z

versioned_docs/version-v7/react/your-first-app/2-taking-photos.md


-```tsx
+```ts
+export function usePhotoGallery {


Suggested change

export function usePhotoGallery {

export function usePhotoGallery() {

ShaneK · 2025-11-13T20:52:49Z

versioned_docs/version-v7/react/your-first-app/2-taking-photos.md

+import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

-When the camera is done taking a picture, the resulting Photo returned from Capacitor will be stored in the `photo` variable. We want to create a new photo object and add it to the photos state array. We make sure we don't accidentally mutate the current photos array by making a new array, and then call `setPhotos` to store the array into state. Update the `takePhoto` method and add this code after the getPhoto call:
+export function usePhotoGallery {


Suggested change

export function usePhotoGallery {

export function usePhotoGallery() {

ShaneK · 2025-11-13T20:53:02Z

docs/react/your-first-app/2-taking-photos.md


-```tsx
+```ts
+export function usePhotoGallery {


Suggested change

export function usePhotoGallery {

export function usePhotoGallery() {

Nit: I know this is just a reference point, but as a reference point we should still be accurate for the parts we do include

ShaneK · 2025-11-13T20:53:12Z

docs/react/your-first-app/2-taking-photos.md

+import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

-When the camera is done taking a picture, the resulting Photo returned from Capacitor will be stored in the `photo` variable. We want to create a new photo object and add it to the photos state array. We make sure we don't accidentally mutate the current photos array by making a new array, and then call `setPhotos` to store the array into state. Update the `takePhoto` method and add this code after the getPhoto call:
+export function usePhotoGallery {


Suggested change

export function usePhotoGallery {

export function usePhotoGallery() {

ShaneK · 2025-11-13T20:58:10Z

docs/react/your-first-app/2-taking-photos.md

 ```

-Next, let's expose the photos array from our hook. Update the return statement to include the photos:
+Over in the `addNewToGallery()` method, add the newly captured photo to the beginning of the `photos` array. Then, update the `userPhotoGallery()` return statement with the `photos` array.


Suggested change

Over in the `addNewToGallery()` method, add the newly captured photo to the beginning of the `photos` array. Then, update the `userPhotoGallery()` return statement with the `photos` array.

Over in the `addNewToGallery()` method, add the newly captured photo to the beginning of the `photos` array. Then, update the `usePhotoGallery()` return statement with the `photos` array.

Nit: Minor typo in method name

ShaneK · 2025-11-13T20:58:42Z

versioned_docs/version-v7/react/your-first-app/2-taking-photos.md

 ```

-Next, let's expose the photos array from our hook. Update the return statement to include the photos:
+Over in the `addNewToGallery()` method, add the newly captured photo to the beginning of the `photos` array. Then, update the `userPhotoGallery()` return statement with the `photos` array.


Suggested change

Over in the `addNewToGallery()` method, add the newly captured photo to the beginning of the `photos` array. Then, update the `userPhotoGallery()` return statement with the `photos` array.

Over in the `addNewToGallery()` method, add the newly captured photo to the beginning of the `photos` array. Then, update the `usePhotoGallery()` return statement with the `photos` array.

Nit: Minor typo in method name

ShaneK · 2025-11-13T21:00:22Z

versioned_docs/version-v7/react/your-first-app/7-live-reload.md

 ```

-Next, add a state value to store information about the photo to delete:
+Next, in `Tab2.tsx`, implement the `IonActionSheet` component. We're adding two options: "Delete", which calls `usePhotoGallery.deletePicture()`, and "Cancel". The cancel button will automatically close the action sheet when assigned the "cancel" role.


Suggested change

Next, in `Tab2.tsx`, implement the `IonActionSheet` component. We're adding two options: "Delete", which calls `usePhotoGallery.deletePicture()`, and "Cancel". The cancel button will automatically close the action sheet when assigned the "cancel" role.

Next, in `Tab2.tsx`, implement the `IonActionSheet` component. We're adding two options: "Delete", which calls `usePhotoGallery.deletePhoto()`, and "Cancel". The cancel button will automatically close the action sheet when assigned the "cancel" role.

Nit: The exposed method name is incorrectly identified here

ShaneK · 2025-11-13T21:00:46Z

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

 ```

-Next, add a state value to store information about the photo to delete:
+Next, in `Tab2.tsx`, implement the `IonActionSheet` component. We're adding two options: "Delete", which calls `usePhotoGallery.deletePicture()`, and "Cancel". The cancel button will automatically close the action sheet when assigned the "cancel" role.


Suggested change

Next, in `Tab2.tsx`, implement the `IonActionSheet` component. We're adding two options: "Delete", which calls `usePhotoGallery.deletePicture()`, and "Cancel". The cancel button will automatically close the action sheet when assigned the "cancel" role.

Next, in `Tab2.tsx`, implement the `IonActionSheet` component. We're adding two options: "Delete", which calls `usePhotoGallery.deletePhoto()`, and "Cancel". The cancel button will automatically close the action sheet when assigned the "cancel" role.

Nit: The exposed method name is incorrectly identified here

ShaneK · 2025-11-13T21:08:45Z

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

-The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
-
-Make sure to return the `deletePhoto` function so it is as a part of the hook API that we expose:
+Remember that removing the photo from the `photos` array triggers the `cachePhotos` method for us automatically.


Suggested change

Remember that removing the photo from the `photos` array triggers the `cachePhotos` method for us automatically.

Remember that removing the photo from the `photos` array triggers the `setPhotos` method for us automatically.

Nit: cachePhotos isn't a method, I think this means to refer to setPhotos, which is called by delete and add new photos

ShaneK · 2025-11-13T21:09:00Z

versioned_docs/version-v7/react/your-first-app/7-live-reload.md

-The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
-
-Make sure to return the `deletePhoto` function so it is as a part of the hook API that we expose:
+Remember that removing the photo from the `photos` array triggers the `cachePhotos` method for us automatically.


Suggested change

Remember that removing the photo from the `photos` array triggers the `cachePhotos` method for us automatically.

Remember that removing the photo from the `photos` array triggers the `setPhotos` method for us automatically.

Nit: cachePhotos isn't a method, I think this means to refer to setPhotos, which is called by delete and add new photos

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

thetaPC added 9 commits November 10, 2025 11:56

docs(react): add file path

ea823a9

docs(react): remove redundant comment

80fb427

docs(react): better click event listener example

7cea235

docs(react): move existing code comment

79fbfd4

docs(react): update existing code comment

a13ce79

docs(react): add change comment

ef8ae09

docs(react): update syntax

8544a57

docs(react): update imports

b3489b4

docs(react): remove first header

6a96994

vercel bot deployed to Preview November 10, 2025 21:28 View deployment

thetaPC added 8 commits November 10, 2025 13:42

docs(react): remove exclamation marks

a1152f7

docs(react): add Camera

4d26d98

docs(react): update UserPhoto text

8252e60

docs(react): update Filesystem path

5f77afe

docs(react): move note

2722fc6

docs(react): add deployment text

d9b9334

docs(react): use proper grammar

809f727

chore(react): run lint

7836499

vercel bot deployed to Preview November 10, 2025 22:40 View deployment

thetaPC and others added 4 commits November 10, 2025 14:41

docs(react): add default App

4bd4108

docs(react): update title of page 8

e0cd901

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

docs(react): add default Tab2

303fb12

docs(react): remove fab code

49de97c

thetaPC requested a review from brandyscarney November 11, 2025 00:01

vercel bot deployed to Preview November 11, 2025 00:03 View deployment

brandyscarney approved these changes Nov 11, 2025

View reviewed changes

thetaPC added 2 commits November 11, 2025 11:30

docs(react): update page 7 example

b14dbab

docs(react): use important note

7f45e6f

vercel bot deployed to Preview November 11, 2025 19:40 View deployment

ShaneK approved these changes Nov 14, 2025

View reviewed changes

	export function usePhotoGallery {
	export function usePhotoGallery() {

	Over in the `addNewToGallery()` method, add the newly captured photo to the beginning of the `photos` array. Then, update the `userPhotoGallery()` return statement with the `photos` array.
	Over in the `addNewToGallery()` method, add the newly captured photo to the beginning of the `photos` array. Then, update the `usePhotoGallery()` return statement with the `photos` array.

	Next, in `Tab2.tsx`, implement the `IonActionSheet` component. We're adding two options: "Delete", which calls `usePhotoGallery.deletePicture()`, and "Cancel". The cancel button will automatically close the action sheet when assigned the "cancel" role.
	Next, in `Tab2.tsx`, implement the `IonActionSheet` component. We're adding two options: "Delete", which calls `usePhotoGallery.deletePhoto()`, and "Cancel". The cancel button will automatically close the action sheet when assigned the "cancel" role.

	Remember that removing the photo from the `photos` array triggers the `cachePhotos` method for us automatically.
	Remember that removing the photo from the `photos` array triggers the `setPhotos` method for us automatically.

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!

ShaneK 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!

4 participants

joesphchang commented Jul 17, 2025 •

edited by thetaPC

Loading

vercel bot commented Jul 18, 2025 •

edited

Loading