docs: added medusa-react snippets in how-to guides (#3091)

* added medusa-react snippets

* added more code snippets

* added medusa-react snippets

* docs: added medusa-react snippets to storefront how-to

* docs: added medusa-react snippets in admin how-to

* docs: fixed incorrect link

docs/content/advanced/storefront/use-regions.mdx

@@ -29,10 +29,18 @@ It is also assumed you already have a storefront set up. It can be a custom stor
 
 ### JS Client
 
-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.
 
 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../../js-client/overview.md) and have [created an instance of the client](../../js-client/overview.md#configuration).
 
+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
+For requests that use the cart, it's also assumed you already have [used CartProvider higher in your component tree](../../medusa-react/overview.md#cartprovider).
+
 ---
 
 ## Show List of Regions
@@ -44,7 +52,7 @@ You can retrieve available regions by sending a request to the [List Regions](/a
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```tsx
+```ts
 medusa.regions.list()
 .then(({ regions }) => {
   console.log(regions.length)
@@ -53,9 +61,38 @@ medusa.regions.list()
 ```
 
 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">
 
 ```tsx
+import { Region } from "@medusajs/medusa"
+import { useRegions } from "medusa-react"
+
+const Regions = () => {
+  const { regions, isLoading } = useRegions()
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {regions?.length && (
+        <ul>
+          {regions.map((region: Region) => (
+            <li key={region.id}>
+              {region.name}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default Regions
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/store/regions`, {
   credentials: "include",
 })
@@ -84,7 +121,7 @@ For example:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```tsx
+```ts
 medusa.products.list({
   region_id: regionId,
 })
@@ -95,9 +132,32 @@ medusa.products.list({
 ```
 
 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">
 
 ```tsx
+import { formatVariantPrice } from "medusa-react"
+
+const Product = () => {
+  // retrieve the region and variant(s)
+  // ...
+
+  return (
+    <span>
+      {formatVariantPrice({
+        variant, // ProductVariant
+        region, // Region
+      })}
+    </span>
+  )
+}
+
+export default Product
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/store/products?region_id=${regionId}`, {
   credentials: "include",
 })
@@ -134,7 +194,7 @@ For example:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```tsx
+```ts
 medusa.carts.update(cartId, {
   region_id: regionId,
 })
@@ -144,9 +204,32 @@ medusa.carts.update(cartId, {
 ```
 
 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">
 
 ```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const changeRegionId = (region_id: string) => {
+    updateCart.mutate({
+      region_id,
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}`, {
   method: "POST",
   credentials: "include",