[docs] Update expo-dev-client and EAS Update guide to add info about …

…Extensions tab (#27772)

# Why

<!--
Please describe the motivation for this PR, and link to relevant GitHub
issues, forums posts, or feature requests.
-->

Closes ENG-11705

# How

<!--
How did you build this feature or fix this bug and why?
-->

This PR updates the Use expo-dev-client with EAS Update guide by:
- Adding info on what **Extensions** tab is and how it can be used to
preview an update in a development build
- Move the Construct a specific URL into its own section
- Update introduction to match the contents of the guide and explain
what this guide does for the reader
- Change title of "More" section to "Example" since it only provides a
link to the GitHub example
- Change the title of this doc to "Load a published update with
expo-dev-client and EAS Update" to match the contents of the guide
- Link to publish update guide from #27665 when it mentions about
publishing an update
- Update `BoxLink` description to use inline code syntax highlight for
the library name

# Test Plan

<!--
Please describe how you tested this change and how a reviewer could
reproduce your test, especially if this PR does not include automated
tests! If possible, please also provide terminal output and/or
screenshots demonstrating your test/reproduction.
-->

Run docs locally and visit:
http://localhost:3002/eas-update/expo-dev-client/ or see Preview:
http://docs.expo.dev-pr-27772.s3-website-us-east-1.amazonaws.com/eas-update/expo-dev-client/.

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [x] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).

docs/pages/eas-update/expo-dev-client.mdx

@@ -1,5 +1,5 @@
 ---
-title: Use expo-dev-client with EAS Update
+title: Load a published update with expo-dev-client and EAS Update
 sidebar_title: Use expo-dev-client
 description: Learn how to use the expo-dev-client library to preview a published EAS Update inside a development build.
 ---
@@ -8,67 +8,100 @@ import { Step } from '~/ui/components/Step';
 import { BoxLink } from '~/ui/components/BoxLink';
 import { GithubIcon } from '@expo/styleguide-icons';
 import ImageSpotlight from '~/components/plugins/ImageSpotlight';
+import { CODE } from '~/ui/components/Text';
 
-The [`expo-dev-client`](/develop/development-builds/introduction/) library allows launching different versions of a project. One of the most popular use cases is to preview a published update inside a development build using the `expo-dev-client` library.
+[`expo-dev-client`](/develop/development-builds/introduction/) library allows launching different versions of a project by creating a development build. Any compatible EAS Update can be previewed in a development build.
 
-It supports loading published EAS Updates through channels. In this guide, you'll learn how to load a specific channel to preview an update in a development build.
+This guide walks through the steps required to load and preview a published update inside a development build using the **Extensions** tab or constructing a specific Update URL.
 
-## How to load a published EAS Update inside a development build
+## Prerequisites
+
+- [Create a development build and install it](/develop/development-builds/create-a-build/) on your device or Android Emulator or iOS Simulator.
+- Make sure your development build has the [`expo-updates` library installed](/eas-update/getting-started/#configure-your-project).
+
+## What is an Extensions tab
+
+<ImageSpotlight
+  alt="Extensions tab in a development build."
+  src="/static/images/eas-update/extensions-01.png"
+  style={{ maxWidth: 320 }}
+/>
+
+When using the `expo-updates` library inside a development build, the **Extensions** tab provides the ability to load and preview a published update automatically.
+
+### Preview an update using the Extensions tab
 
 <Step label="1">
 
-Create a [development build](/develop/development-builds/create-a-build) of the project.
+Make non-native changes locally in your project and then [publish them using `eas update`](/eas-update/publish/). The update will be published on a branch.
 
 </Step>
 
 <Step label="2">
 
-Make non-native changes locally, then publish them using `eas update --branch ...`. The branch specified should correspond to a channel. You can see how channels are linked to branches with `eas channel:list`.
+After publishing the update, open your development build, go to **Extensions**, and tap **Login** to log in to your Expo account within the development build. This step is required for the **Extensions** tab to load any published updates associated with the project under your Expo account.
 
 </Step>
 
 <Step label="3">
 
-After publishing an update, it's time to load the update in the development build. All development builds that have the `expo-updates` package installed include an Extensions tab where you can select an update:
+After logging in, an EAS Update section will appear inside the **Extensions** tab with one or more of the latest published updates. Tap **Open** next to the update you want to previous.
+
+</Step>
+
+In the **Extensions** tab, you can view the list of all published updates for a branch. Tap the branch name in the **Extensions** tab.
 
 <ImageSpotlight
-  alt="Extensions tab in the Expo dev client."
-  src="/static/images/dev-client/extensions-panel.png"
-  style={{ maxWidth: 300 }}
+  alt="Extensions tab in a development build."
+  src="/static/images/eas-update/extensions-02.png"
+  style={{ maxWidth: 480 }}
 />
 
-Alternatively, you can construct a specific URL to open your EAS Update. The URL will look like this:
+## Preview an update using the Expo dashboard
+
+You can also preview an update using the Expo dashboard by following the steps below:
+
+- Click the published updated link in the CLI after running the command to publish an update. This will open the update's details on the **Updates** page in the Expo dashboard.
+- Under **Platform-specific updates**, select the platform on which you want to preview the update and click **Preview**. This will open the **Preview** modal.
+- In the **Preview** modal, add your project's [`slug`](/versions/latest/config/app/#slug) under **App slug**.
+- To preview the update, you can either scan the QR code with your device's camera or copy the URL and paste it into the development build's launcher screen under **Enter URL Manually**.
+
+## Construct an update URL
+
+As an alternative to the methods described in the previous sections, you can construct a specific URL to open your EAS Update in the development build. The URL will look like the following:
 
 ```bash
 exp+[project-slug]://expo-development-client/?url=[https://u.expo.dev/project-id]?channel-name=[channel]
 
 # Example
-exp+form-duo://expo-development-client/?url=https://u.expo.dev/675cb1f0-fa3c-11e8-ac99-6374d9643cb2?channel-name=preview
+exp+my-app://expo-development-client/?url=https://u.expo.dev/675cb1f0-fa3c-11e8-ac99-6374d9643cb2?channel-name=development
 ```
 
-Let's break down the parts of this URL:
+Let's break this URL to understand what each part does:
 
-- `exp+`: The beginning of the URL.
-- `form-duo`: This is the project slug found in **app.json**/**app.config.js**.
-- `://expo-development-client/`: necessary for the deep link to work with the `expo-dev-client` library.
-- `?url=`: Defines a `url` query parameter.
-- `https://u.expo.dev/675cb1f0-fa3c-11e8-ac99-6374d9643cb2`: This is the updates URL, which is inside the project's app config (**app.json**/**app.config.js**) under `updates.url`.
-- `?channel-name=`: Defines a channel query parameter.
-- `preview`: The name of the channel to request.
+| Part of URL                                               | Description                                                                            |
+| --------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| `exp+`                                                    | The beginning of the URL.                                                              |
+| `form-duo`                                                | This is the project [slug](/versions/latest/config/app/#slug) found in the app config. |
+| `://expo-development-client/`                             | Necessary for the deep link to work with the `expo-dev-client` library.                |
+| `?url=`                                                   | Defines a `url` query parameter.                                                       |
+| `https://u.expo.dev/675cb1f0-fa3c-11e8-ac99-6374d9643cb2` | This is the updates URL, which is inside the project's app config under `updates.url`. |
+| `?channel-name=`                                          | Defines a channel query parameter.                                                     |
+| `development`                                             | The name of the channel to request.                                                    |
 
-</Step>
-
-<Step label="4">
+Once you've constructed the URL, copy and paste it directly into the development build's launcher screen under **Enter URL Manually**.
 
-Once we've constructed the URL, we can either copy/paste it directly into the `expo-dev-client`'s launcher screen. Alternatively, we could create a QR code of the URL, then scan it. Scanning this URL should open up the development build to the specified channel.
-
-</Step>
+Alternatively, you can create a QR code for the URL and scan it using your device's camera. When scanned, the URL will open up the development build to the specified channel.
 
-## More
+## Example
 
 <BoxLink
-  title="Working example"
-  description="See a working example on using expo-dev-client with EAS Update."
+  title="See a working example"
+  description={
+    <>
+      See a working example of using <CODE>expo-dev-client</CODE> with EAS Update.
+    </>
+  }
   Icon={GithubIcon}
   href="https://github.com/jonsamp/test-expo-dev-client-eas-update"
 />