Коли стандартні компоненти Бітрікса не справляються?
Ми стикалися з цим десятки разів: клієнт просить «як у 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. Найгнучкіший, але трудомісткий варіант. Вимагає перебудови маршрутизації та перенесення шаблонів.
| Патерн | Складність | Підходить для |
|---|---|---|
| Віджети | Низька | Точкові покращення інтерфейсу |
| SPA-сторінка | Середня | Каталог, особистий кабінет |
| Headless CMS | Висока | Повний редизайн або мобільний застосунок |
Чому React швидше та зручніше?
React в 3-5 разів швидший за стандартні компоненти Бітрікса, що підтверджено нашими проектами. Причини очевидні: динамічні форми, складні фільтри, кошик без перезавантаження — на чистому Бітріксі це писати довго та боляче. React з TypeScript та React Query дають типізацію, кешування та декларативність. Помилки на бекенді (наприклад, помилка в API) не «валять» сторінку — компонент показує fallback. Якщо ваша команда вже використовує React, тягнути jQuery-код у поточній версії не має сенсу. Середня економія на розробці становить 40%. Вартість типового проекту інтеграції визначається після аналізу, але зазвичай становить $500–2000. Впровадження фронтенду на React Бітрікс дозволяє досягти високої продуктивності.
Покрокова інструкція
- Аудит поточного шаблону — визначаємо місця, де React дасть максимальний ефект. Зазвичай це каталог, кошик, особистий кабінет.
- Проектування API — створюємо REST-ендпоінти або використовуємо стандартні. В середньому потрібно 3-5 ендпоінтів на розділ. Розробка під 1С-Бітрікс з React вимагає ретельної інтеграції.
- Розробка компонентів — пишемо React-компоненти з TypeScript. Для управління станом використовуємо React Query з staleTime: 5 хвилин.
- Інтеграція — вбудовуємо віджети або перемикаємо маршрутизацію. Типовий обсяг робіт — 2-3 дні на етап.
- Тестування — Vitest + React Testing Library покривають 80% кейсів. Мокуємо API, перевіряємо рендер та поведінку. Для тестування React компонентів Бітрікс ми використовуємо Vitest.
- Деплой — збираємо бандл через 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 | Стандартні компоненти |
|---|---|---|
| Швидкість рендеру 5000 товарів | 200-400 мс | 2-5 сек |
| Кешування запитів | Вбудоване (React Query) | Немає, потребує доробки |
| Типізація | TypeScript | Немає (JS без типів) |
| Гнучкість UI | Висока (бібліотеки) | Низька (обмежені шаблони) |
| Підтримка SSR | Next.js | Вбудована (Bitrix) |
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();
});
Структура директорій React-проекту
/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 робочих днів. Зв'яжіться з нами — оцінимо проект безкоштовно.