### Initialize Zalo Mini App Development Kit

Source: https://github.com/zalo-miniapp/zaui-mmenu/blob/main/index.html

This snippet demonstrates how to initialize the Zalo Mini App Development Kit (ZMPDevKit) using a specific Zalo App ID. It includes a success callback to store the obtained access token for further use within the application.

```JavaScript
ZMPDevKit.init({
  zAppId: '2079338322749127278', // Zalo App ID
  onSuccess: ({ accessToken }) => {
    window.ZMP_DEV_ACCESS_TOKEN = accessToken
  }
})
```

--------------------------------

### Define Jotai Atom for Asynchronous Data Fetching

Source: https://github.com/zalo-miniapp/zaui-mmenu/blob/main/README.md

Defines a Jotai atom (`newsState`) to asynchronously fetch news data. It handles dependencies like language, table ID, authorization, restaurant ID, and user ID. The `request` utility is used for API calls, supporting URL parameter interpolation, query parameters, custom headers, and JSON request bodies. The response is typed as `NewsResponse`.

```TypeScript
export const newsState = atom(async (get) => {
  const lang = get(languageState)
  const tableId = get(tableIdState)
  const authorization = await get(bearerTokenState)
  const restaurantId = await get(restaurantIdState)
  const userId = await get(userIdState)
  const res = (await request('/endpoint/:param1/:param2/news', {
    method: "POST",
    params: { param1, param2 }, // params are interpolated into the URL
    queries: { query1, query2 }, // queries are sent as query params
    headers: { lang, authorization }, // headers are sent as request headers
    body: { data1, data2 } // sent as JSON via request body
  })) as NewsResponse // use https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype to quickly generate types from JSON
  return res
})
```

--------------------------------

### Consume Jotai Atom Value in React Component

Source: https://github.com/zalo-miniapp/zaui-mmenu/blob/main/README.md

Demonstrates how to consume the `newsState` atom in a React functional component using the `useAtomValue` hook from Jotai. It iterates over the fetched news items and displays their titles within a `div` element.

```TSX
function NewList() {
  const news = useAtomValue(newsState)
  return (
    <div>
      {news.map((item) => (
        <div>{item.title}</div>
      ))}
    </div>
  )
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.