Проект на React

import type { B24Frame, ISODate } from '@bitrix24/b24jssdk';
import type { DateTime } from 'luxon';
import { useEffect, useRef } from 'react';
import { initializeB24Frame, LoggerFactory, EnumCrmEntityTypeId, Text } from '@bitrix24/b24jssdk';

const devMode = typeof import.meta !== 'undefined' && (import.meta.env?.DEV ?? false);
const $logger = LoggerFactory.createForBrowser('MyApp', devMode);

type CompanyResponse = { id: number; title: string; createdTime: ISODate };
type Company = Omit<CompanyResponse, 'createdTime'> & { createdTime: DateTime };

async function loadCompanyList(b24: B24Frame): Promise<Company[]> {
  const result: Company[] = [];

  const response = await b24.actions.v2.call.make<{ items: CompanyResponse[] }>({
    method: 'crm.item.list',
    params: {
      entityTypeId: EnumCrmEntityTypeId.company,
      order: { id: 'DESC' },
      select: ['id', 'title', 'createdTime'],
    },
  });

  if (!response.isSuccess) {
    throw new Error(`API Error: ${response.getErrorMessages().join('; ')}`);
  }

  const responseData = response.getData()!.result as { items: CompanyResponse[] };
  responseData.items.forEach((entity) => {
    result.push({
      id: entity.id,
      title: entity.title,
      createdTime: Text.toDateTime(entity.createdTime),
    });
  });

  return result;
}

function App() {
  const b24Ref = useRef<B24Frame | null>(null);

  useEffect(() => {
    let isMounted = true;

    async function init() {
      try {
        const b24 = await initializeB24Frame();
        if (!isMounted) {
          b24.destroy();
          return;
        }
        b24Ref.current = b24;

        const companies = await loadCompanyList(b24);
        $logger.notice('Companies loaded successfully', { companies });
      } catch (error) {
        $logger.error('Some problems', { error });
      }
    }

    init();

    return () => {
      isMounted = false;
      b24Ref.current?.destroy();
    };
  }, []);

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>B24 JS SDK - React Demo</h1>
      <p>See the result in the developer console</p>
      <p style={{ color: '#666', fontSize: '14px' }}>
        Note: This app must be opened inside Bitrix24 as a frame application.
      </p>
    </div>
  );
}

export default App;