docs(react): update your first app pages

thetaPC · thetaPC · commit 978d7e6d04f1 · 2025-10-28T14:52:09.000-07:00
diff --git a/docs/react/your-first-app.md b/docs/react/your-first-app.md
@@ -4,13 +4,15 @@ sidebar_label: Build Your First App
 ---
 
 <head>
-  <title>Build Your First Ionic Mobile App: React Development Tutorial</title>
+  <title>Build Your First Ionic Mobile App with React | Ionic Capacitor Camera</title>
   <meta
     name="description"
-    content="Ionic's single codebase builds for any platform using just HTML, CSS, & JavaScript. Develop your first mobile app with our step-by-step React tutorial."
+    content="This React tutorial teaches the fundamentals of Ionic app development by creating a realistic app step-by-step. Learn to run your first Ionic app with React."
   />
 </head>
 
+# Your First Ionic App: React
+
 The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
 
 Here’s the finished app running on all 3 platforms:
@@ -34,7 +36,7 @@ Highlights include:
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
 - Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
 
-Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/tutorial-photo-gallery-react).
+Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-react) referenced in this guide on GitHub.
 
 ## Download Required Tools
 
@@ -66,7 +68,7 @@ Consider setting up npm to operate globally without elevated permissions. See [R
 
 ## Create an App
 
-Next, create an Ionic React app that uses the “Tabs” starter template and adds Capacitor for native functionality:
+Next, create an Ionic React app that uses the "Tabs" starter template and adds Capacitor for native functionality:
 
 ```shell
 ionic start photo-gallery tabs --type=react --capacitor
diff --git a/docs/react/your-first-app/2-taking-photos.md b/docs/react/your-first-app/2-taking-photos.md
@@ -4,13 +4,15 @@ sidebar_label: Taking Photos
 ---
 
 <head>
-  <title>Build Camera API for iOS, Android & Web | Ionic Capacitor Camera</title>
+  <title>Take Photos with Camera API for iOS, Android & Web with React | Ionic Capacitor Camera</title>
   <meta
     name="description"
     content="Add the ability to take photos with your device's camera using the Ionic Capacitor Camera API for mobile iOS, Android, and the web. Learn how here."
   />
 </head>
 
+# Taking Photos with the Camera
+
 Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
 
 ## Photo Gallery Hook
@@ -45,7 +47,7 @@ export function usePhotoGallery() {
 
 Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `getPhoto()` - that will open up the device's camera and allow us to take photos.
 
-Next, in `Tab2.tsx`, import the `usePhotoGallery` method and destructure it to call its `addNewToGallery` method.
+Next, in `Tab2.tsx`, import the `usePhotoGallery()` method and destructure it to call its `addNewToGallery()` method.
 
 ```tsx
 import { camera, trash, close } from 'ionicons/icons';
@@ -112,7 +114,7 @@ After taking a photo, it disappears right away. We need to display it within our
 
 Return to `usePhotoGallery.ts`.
 
-Outside of the `usePhotoGallery` method definition (the very bottom of the file), create a new interface, `UserPhoto`, to hold our photo metadata.
+Outside of the `usePhotoGallery()` method definition (the very bottom of the file), create a new interface, `UserPhoto`, to hold our photo metadata.
 
 ```ts
 export function usePhotoGallery {
@@ -130,14 +132,14 @@ Above the `addNewToGallery()` method, define an array of `UserPhoto`, which will
 
 ```ts
 export function usePhotoGallery {
-  // CHANGE: Add the photos array.
+  // CHANGE: Add the `photos` array.
   const [photos, setPhotos] = useState<UserPhoto[]>([]);
 
   // Same old code from before.
 }
 ```
 
-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 `userPhotoGallery()` return statement with the `photos` array.
 
 ```ts
 export function usePhotoGallery() {
diff --git a/docs/react/your-first-app/3-saving-photos.md b/docs/react/your-first-app/3-saving-photos.md
@@ -3,6 +3,14 @@ title: Saving Photos to the Filesystem
 sidebar_label: Saving Photos
 ---
 
+<head>
+  <title>Saving Photos to the Filesystem with React | Ionic Capacitor Camera</title>
+  <meta
+    name="description"
+    content="We’re now able to take multiple photos and display them in a photo gallery. Learn how to save these photos to the filesystem using the Ionic Capacitor Filesystem API."
+  />
+</head>
+
 # Saving Photos to the Filesystem
 
 We’re now able to take multiple photos and display them in a photo gallery on the second tab of our app. These photos, however, are not currently being stored permanently, so when the app is closed, they will be deleted.
@@ -60,12 +68,13 @@ export function usePhotoGallery() {
     });
 
     const fileName = Date.now() + '.jpeg';
-    // CHANGE: Add `savedImageFile()`.
+    // CHANGE: Add `savedImageFile`.
     // Save the picture and add it to photo collection
     const savedImageFile = await savePicture(capturedPhoto, fileName);
 
     // CHANGE: Update state with new photo.
-    setPhotos([savedImageFile, ...photos]);
+    const newPhotos = [savedImageFile, ...photos];
+    setPhotos(newPhotos);
   };
 
   // CHANGE: Add `savePicture()` method.
@@ -124,7 +133,7 @@ export function usePhotoGallery() {
     };
   };
 
-  // CHANGE: Add the `convertBlobToBase64()` method.
+  // CHANGE: Add `convertBlobToBase64()` method.
   const convertBlobToBase64 = (blob: Blob) => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
@@ -171,7 +180,8 @@ export function usePhotoGallery() {
     // Save the picture and add it to photo collection
     const savedImageFile = await savePicture(capturedPhoto, fileName);
 
-    setPhotos([savedImageFile, ...photos]);
+    const newPhotos = [savedImageFile, ...photos];
+    setPhotos(newPhotos);
   };
 
   const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
diff --git a/docs/react/your-first-app/4-loading-photos.md b/docs/react/your-first-app/4-loading-photos.md
@@ -54,8 +54,8 @@ export function usePhotoGallery() {
   useEffect(() => {
     // CHANGE: Add `loadSaved()` method.
     const loadSaved = async () => {
-      const { value } = await Preferences.get({ key: PHOTO_STORAGE });
-      const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[];
+      const { value: photoList } = await Preferences.get({ key: PHOTO_STORAGE });
+      const photosInPreferences = (photoList ? JSON.parse(photoList) : []) as UserPhoto[];
     };
 
     loadSaved();
@@ -78,8 +78,8 @@ export function usePhotoGallery() {
   useEffect(() => {
     // CHANGE: Update `loadSaved()` method.
     const loadSaved = async () => {
-      const { value } = await Preferences.get({ key: PHOTO_STORAGE });
-      const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[];
+      const { value: photoList } = await Preferences.get({ key: PHOTO_STORAGE });
+      const photosInPreferences = (photoList ? JSON.parse(photoList) : []) as UserPhoto[];
 
       // CHANGE: Display the photo by reading into base64 format.
       for (const photo of photosInPreferences) {
@@ -115,8 +115,8 @@ export function usePhotoGallery() {
 
   useEffect(() => {
     const loadSaved = async () => {
-      const { value } = await Preferences.get({ key: PHOTO_STORAGE });
-      const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[];
+      const { value: photoList } = await Preferences.get({ key: PHOTO_STORAGE });
+      const photosInPreferences = (photoList ? JSON.parse(photoList) : []) as UserPhoto[];
 
       for (const photo of photosInPreferences) {
         const file = await Filesystem.readFile({
diff --git a/docs/react/your-first-app/5-adding-mobile.md b/docs/react/your-first-app/5-adding-mobile.md
@@ -86,7 +86,7 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
 Next, add a new bit of logic in the `loadSaved()` method. On mobile, we can directly point to each photo file on the Filesystem and display them automatically. On the web, however, we must read each image from the Filesystem into base64 format. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Update the `loadSaved()` method:
 
 ```ts
-// CHANGE: Update the `loadSaved` method.
+// CHANGE: Update `loadSaved` method.
 const loadSaved = async () => {
   const { value: photoList } = await Preferences.get({ key: PHOTO_STORAGE });
   const photosInPreferences = (photoList ? JSON.parse(photoList) : []) as UserPhoto[];
diff --git a/docs/react/your-first-app/6-deploying-mobile.md b/docs/react/your-first-app/6-deploying-mobile.md
@@ -1,10 +1,23 @@
 ---
+title: Deploying to iOS and Android
 sidebar_label: Deploying Mobile
 ---
 
+<head>
+  <title>Adding Mobile Support with React | Ionic Capacitor Camera</title>
+  <meta
+    name="description"
+    content="Capacitor is Ionic’s official app runtime to deploy web apps to native platforms like iOS, Android, and more. Read for how to build and deploy Ionic React apps."
+  />
+</head>
+
 # Deploying to iOS and Android
 
-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! Remember, you can find the complete source code for this app [here](https://github.com/ionic-team/photo-gallery-capacitor-react).
+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).
+:::
 
 ## Capacitor Setup
 
@@ -19,8 +32,8 @@ ionic build
 Next, create both the iOS and Android projects:
 
 ```shell
-$ ionic cap add ios
-$ ionic cap add android
+ionic cap add ios
+ionic cap add android
 ```
 
 Both android and ios folders at the root of the project are created. These are entirely standalone native projects that should be considered part of your Ionic app (i.e., check them into source control, edit them using their native tooling, etc.).
@@ -51,7 +64,7 @@ First, run the Capacitor `open` command, which opens the native iOS project in X
 ionic cap open ios
 ```
 
-In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled "Privacy - Camera Usage." To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
 
 ![The Info.plist file in Xcode showing the NSCameraUsageDescription key added for camera access.](/img/guides/first-app-cap-ng/xcode-info-plist.png 'Xcode Info.plist Configuration')
 
diff --git a/docs/react/your-first-app/7-live-reload.md b/docs/react/your-first-app/7-live-reload.md
diff --git a/docs/react/your-first-app/8-distribute.md b/docs/react/your-first-app/8-distribute.md
