Как я могу получить initData (startParams) в Telegram мини-приложении, созданном с использованием React?

Использование `initData` (или `startParams`) в Telegram мини-приложении позволяет получить данные, с которыми было запущено ваше приложение. В вашем примере вы используете библиотеку `@telegram-apps/sdk`, что является правильным подходом.

Давайте разберем шаги, как можно получить `initData` в React-приложении:

1. **Установка необходимых пакетов**: Если вы еще не установили библиотеку `@telegram-apps/sdk`, выполните команду:

    ```bash
    npm install @telegram-apps/sdk
    ```

2. **Инициализация SDK**: В вашем коде вы правильно инициализируете SDK, как в основном коде, так и в эмуляции. 

3. **Получение initData**: Вы можете получить `initData` из инициализации SDK. Ваша функция `initializeTelegramSDK` уже содержит необходимый код. Вам нужно её просто вызвать в компоненте.

4. **Создание компонента**: Вот пример компонента, который использует ваш код для инициализации:

    ```javascript
    import React, { useEffect } from 'react';
    import { initMiniApp, mockTelegramEnv, parseInitData } from '@telegram-apps/sdk';

    const TelegramApp = () => {
        useEffect(() => {
            const initializeTelegramSDK = async () => {
                try {
                    console.log("Инициализация среды Telegram");
                    const [miniApp] = initMiniApp();
                    await miniApp.ready();

                    // Получение initData здесь
                    const initData = miniApp.initData;
                    console.log('initData:', initData);
                } catch (error) {
                    console.error('Ошибка инициализации Telegram:', error);

                    const initDataRaw = new URLSearchParams([
                        ['user', JSON.stringify({
                            id: 99281932,
                            first_name: 'Andrew',
                            last_name: 'Rogue',
                            username: 'rogue',
                            language_code: 'en',
                            is_premium: true,
                            allows_write_to_pm: true,
                        })],
                        ['hash', '89d6079ad6762351f38c6dbbc41bb53048019256a9443988af7a48bcad16ba31'],
                        ['auth_date', '1716922846'],
                        ['start_param', 'debug'],
                        ['chat_type', 'sender'],
                        ['chat_instance', '8428209589180549439'],
                    ]).toString();

                    mockTelegramEnv({
                        themeParams: {
                            accentTextColor: '#6ab2f2',
                            bgColor: '#17212b',
                            buttonColor: '#5288c1',
                            buttonTextColor: '#ffffff',
                            destructiveTextColor: '#ec3942',
                            headerBgColor: '#fcb69f',
                            hintColor: '#708499',
                            linkColor: '#6ab3f3',
                            secondaryBgColor: '#232e3c',
                            sectionBgColor: '#17212b',
                            sectionHeaderTextColor: '#6ab3f3',
                            subtitleTextColor: '#708499',
                            textColor: '#f5f5f5',
                        },
                        initData: parseInitData(initDataRaw),
                        initDataRaw,
                        version: '7.2',
                        platform: 'tdesktop',
                    });

                    const initData = parseInitData(initDataRaw); // Получение initData из raw строк
                    console.log('Mock initData:', initData);
                }
            };

            initializeTelegramSDK();
        }, []);

        return (
            <div>
                <h1>ТЕЛЕГРАМ МИНИ-ПРИЛОЖЕНИЕ</h1>
                <p>Проверка консолей для получения initData.</p>
            </div>
        );
    }

    export default TelegramApp;
    ```

5. **Проверка данных**: Убедитесь, что вы открыли инструменты разработчика в вашей среде и проверили, что данные `initData` вывелись в консоль.

Этот код показывает, как выполнять инициализацию SDK и получать данные о пользователе, которые передаются через `initData`. Надеюсь, это поможет вам правильно интегрировать Telegram мини-приложение с React.

▎Шаги для получения initData 
 
 1. Подключите Telegram Web App SDK: 
 Убедитесь, что вы подключили скрипт SDK в вашем HTML-файле: 
 
 
<script src="https://telegram.org/js/telegram-web-app.js"></script>
 
 
 
 2. Инициализация в вашем React приложении: 
 В вашем компоненте React вы можете инициализировать Telegram SDK и получить данные следующим образом: 
 
import React, { useEffect, useState } from 'react';

   const MyTelegramApp = () => {
       const [userData, setUserData] = useState(null);

       useEffect(() => {
           // Проверяем, доступен ли объект Telegram Web App
           if (window.Telegram && window.Telegram.WebApp) {
               // Инициализируем Telegram Web App
               window.Telegram.WebApp.ready();

               // Получаем initData
               const initData = window.Telegram.WebApp.initData;

               // Парсим данные пользователя
               const user = parseInitData(initData);
               setUserData(user);
           } else {
               console.error('Telegram Web App is not available');
           }
       }, []);

       const parseInitData = (initData) => {
           const params = new URLSearchParams(initData);
           return {
               user: JSON.parse(params.get('user')),
               hash: params.get('hash'),
               auth_date: params.get('auth_date'),
               start_param: params.get('start_param'),
               chat_type: params.get('chat_type'),
               chat_instance: params.get('chat_instance'),
           };
       };

       return (
           <div>
               <h1>My Telegram Mini App</h1>
               {userData ? (
                   <div>
                       <h2>User Info:</h2>
                       <pre>{JSON.stringify(userData, null, 2)}</pre>
                   </div>
               ) : (
                   <p>Loading user data...</p>
               )}
           </div>
       );
   };

   export default MyTelegramApp;
 
 
 
 3. Обработка ошибок: 
 Убедитесь, что ваше приложение действительно запускается внутри Telegram. Если вы тестируете его в обычном браузере, объект window.Telegram не будет доступен, и вам нужно будет проверить это условие. 
 
 ▎Замечания 
 
 • Проверка окружения: Убедитесь, что вы тестируете приложение в самом Telegram, так как window.Telegram не будет доступен в обычном веб-браузере