Розробка фронтенду на React для 1С-Бітрікс

Коли стандартні компоненти Бітрікса не справляються?

Ми стикалися з цим десятки разів: клієнт просить «як у Ozon», а Бітрікс видає jQuery-віджети з коробки. Вихід — React-фронтенд, який бере на себе інтерфейс, залишаючи Бітріксу бізнес-логіку та дані. В одному з проектів з каталогом 15 000 товарів час рендеру сторінки скоротився з 5 секунд до 400 мс після заміни стандартного компонента на React-віджет з віртуалізацією (react-window) та кешуванням (React Query). Досвід показує: гібридна архітектура (Бітрікс + React) дає виграш у швидкості розробки складних інтерфейсів до 40% та спрощує підтримку. Головне — правильно налаштувати інтеграцію: типізувати API, налаштувати кешування та продумати обробку помилок. Отримайте консультацію щодо вашого проекту — оцінимо його за 2 дні. Ми спеціалізуємося на React 1С-Бітрікс інтеграції з 2015 року.

Три патерни впровадження React в Бітрікс

Ми виділяємо три базових патерни впровадження. Вибір залежить від бюджету та ступеня інтеграції з поточним шаблоном.

• Віджети. React-компонент монтується на конкретний DOM-елемент всередині шаблону. Ідеально для форм, фільтрів, слайдерів, кошика. Мінімальні зміни верстки — достатньо додати div з id.
• Сторінка-SPA. Контент повністю генерує React, а Бітрікс служить «оболонкою» (шапка, футер, меню). Дані підтягуються через API. Приклад: каталог з динамічним підвантаженням товарів. SPA на React Бітрікс є оптимальним рішенням для динамічних каталогів.
• Headless CMS. React-застосунок працює окремо, Бітрікс — тільки API. Найгнучкіший, але трудомісткий варіант. Вимагає перебудови маршрутизації та перенесення шаблонів.

Чому React швидше та зручніше?

React в 3-5 разів швидший за стандартні компоненти Бітрікса, що підтверджено нашими проектами. Причини очевидні: динамічні форми, складні фільтри, кошик без перезавантаження — на чистому Бітріксі це писати довго та боляче. React з TypeScript та React Query дають типізацію, кешування та декларативність. Помилки на бекенді (наприклад, помилка в API) не «валять» сторінку — компонент показує fallback. Якщо ваша команда вже використовує React, тягнути jQuery-код у поточній версії не має сенсу. Середня економія на розробці становить 40%. Вартість типового проекту інтеграції визначається після аналізу, але зазвичай становить $500–2000. Впровадження фронтенду на React Бітрікс дозволяє досягти високої продуктивності.

Покрокова інструкція

1. Аудит поточного шаблону — визначаємо місця, де React дасть максимальний ефект. Зазвичай це каталог, кошик, особистий кабінет.
2. Проектування API — створюємо REST-ендпоінти або використовуємо стандартні. В середньому потрібно 3-5 ендпоінтів на розділ. Розробка під 1С-Бітрікс з React вимагає ретельної інтеграції.
3. Розробка компонентів — пишемо React-компоненти з TypeScript. Для управління станом використовуємо React Query з staleTime: 5 хвилин.
4. Інтеграція — вбудовуємо віджети або перемикаємо маршрутизацію. Типовий обсяг робіт — 2-3 дні на етап.
5. Тестування — Vitest + React Testing Library покривають 80% кейсів. Мокуємо API, перевіряємо рендер та поведінку. Для тестування React компонентів Бітрікс ми використовуємо Vitest.
6. Деплой — збираємо бандл через Vite, розміщуємо в /local/js/build/. Налаштування кешування та CDN.

Технічна реалізація: API, авторизація, кешування

Налаштування авторизації

Бітрікс керує сесією та CSRF-токеном — React їх тільки використовує. Для перевірки авторизації — один запит:

// /local/js/src/hooks/useAuth.ts import { useQuery } from '@tanstack/react-query'; import { bitrixApi } from '../api/bitrix'; export function useAuth() { return useQuery({ queryKey: ['auth'], queryFn: () => bitrixApi.get<{ isAuthorized: boolean; userId?: number }>('user.current'), staleTime: Infinity, }); } 

Якщо користувач не авторизований — редирект на стандартну сторінку логіну. Кастомну форму пишемо тільки під специфічні вимоги (наприклад, вхід за Email + соцмережі). Авторизація React в Бітріксі реалізується через сесію та куки.

Порівняння React vs стандартні компоненти Бітрікса

React швидший за стандартні компоненти в 3-5 разів на складних інтерфейсах. А розробка займає менше часу завдяки готовим рішенням.

Типізований API-клієнт

Замість розрізнених fetch-запитів створюємо єдиний типізований API-клієнт з автозаповненням CSRF-токена та типізацією відповідей. Такий підхід знижує кількість помилок інтеграції у 2–3 рази. Приклад реалізації:

// /local/js/src/api/bitrix.ts interface BitrixResponse<T> { result: T; total?: number; error?: string; } class BitrixApiClient { private baseUrl: string; private sessionId: string; constructor() { this.baseUrl = '/local/ajax/api.php'; this.sessionId = (window as any).BX?.bitrix_sessid?.() || ''; } async get<T>(action: string, params: Record<string, unknown> = {}): Promise<T> { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set('action', action); Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, String(v))); const response = await fetch(url.toString(), { headers: { 'X-Bitrix-Csrf-Token': this.sessionId }, }); const data: BitrixResponse<T> = await response.json(); if (data.error) throw new Error(data.error); return data.result; } async post<T>(action: string, body: Record<string, unknown>): Promise<T> { const formData = new FormData(); formData.append('action', action); formData.append('sessid', this.sessionId); Object.entries(body).forEach(([k, v]) => formData.append(k, String(v))); const response = await fetch(this.baseUrl, { method: 'POST', body: formData, }); const data: BitrixResponse<T> = await response.json(); if (data.error) throw new Error(data.error); return data.result; } } export const bitrixApi = new BitrixApiClient(); 

Детальніше про REST API Бітрікс на офіційному порталі розробників.

React Query: управління серверними даними

React Query (TanStack Query) — стандарт для роботи з API в React. Інтеграція з Бітрікс виглядає так:

// /local/js/src/api/catalog.ts import { useQuery } from '@tanstack/react-query'; import { bitrixApi } from './bitrix'; interface CatalogItem { id: number; name: string; price: number; quantity: number; previewPicture: string; } export function useCatalogItems(sectionId: number, page: number) { return useQuery({ queryKey: ['catalog', sectionId, page], queryFn: () => bitrixApi.get<CatalogItem[]>('catalog.list', { section_id: sectionId, page, limit: 24, }), staleTime: 5 * 60 * 1000, }); } // В компоненті: function CatalogSection({ sectionId }: { sectionId: number }) { const [page, setPage] = useState(1); const { data, isLoading, error } = useCatalogItems(sectionId, page); if (isLoading) return <CatalogSkeleton />; if (error) return <ErrorMessage error={error} />; return ( <div className="catalog-grid"> {data?.map(item => <ProductCard key={item.id} item={item} />)} <Pagination page={page} onChange={setPage} /> </div> ); } 

Тестуємо компоненти: Vitest і моки

Компоненти тестуються ізольовано від Бітрікса. Для API-запитів використовуємо моки:

// catalog.test.tsx import { render, screen } from '@testing-library/react'; import { CatalogSection } from './CatalogSection'; vi.mock('../api/bitrix', () => ({ bitrixApi: { get: vi.fn().mockResolvedValue([ { id: 1, name: 'Товар 1', price: 1000, quantity: 10, previewPicture: '' }, ]), }, })); test('рендерить назву товару', async () => { render(<CatalogSection sectionId={5} />); expect(await screen.findByText('Товар 1')).toBeInTheDocument(); }); 

/local/ /js/ /src/ /components/ /hooks/ /api/ bitrix.ts catalog.ts cart.ts /store/ vite.config.ts package.json tsconfig.json /templates/ /main/ 

Вартість та як замовити

Що входить в роботу (deliverables)

• Вихідний код React-застосунку (TypeScript, Vite, React Query).
• API-клієнт для всіх необхідних ендпоінтів Бітрікса.
• Інтеграційні тести ключових компонентів.
• Документація по збірці та деплою.
• Інструкція по підтримці та доробкам.
• Гарантія на код — 6 місяців безкоштовних консультацій.

Оцінка масштабу робіт

Зв'яжіться з нами — ми проаналізуємо ваш проект за 2 дні та запропонуємо кошторис. Вартість типового проекту інтеграції становить від $500 до $2000 залежно від обсягу. Вартість розраховується індивідуально — після аудиту визначимо точний обсяг робіт. Досвід понад 10 років, більше 50 проектів з інтеграцією React та Бітрікс. Ми реалізуємо інтеграцію «під ключ» — типовий обсяг робіт займає 5–15 робочих днів. Зв'яжіться з нами — оцінимо проект безкоштовно.