When your product catalog lags on 5000 items and filters reload the page for three seconds — standard Bitrix components fail.
We've seen this dozens of times: a client asks for an interface like Ozon, but Bitrix ships with jQuery widgets out of the box. The solution is a React frontend that takes over the interface while leaving business logic and data to Bitrix. On one project with a catalog of 15,000 products, page render time dropped from 5 seconds to 400 ms after replacing the standard component with a React widget featuring virtualization and caching. Experience shows that a hybrid architecture (Bitrix + React) speeds up development of complex interfaces by up to 40% and simplifies maintenance. The key is setting up the integration correctly: typing the API, configuring caching, and planning error handling. Get a consultation for your project — we'll evaluate it in 2 days for free. Typical project cost ranges from $5,000 to $20,000, with average savings of $8,000 per project. Clients report a 1.4x improvement in development speed compared to traditional Bitrix development.
How Does React Compare to Standard Bitrix Components?
React is 3–5 times faster on complex interfaces, and development takes less time thanks to ready-made solutions. Below we compare performance and flexibility.
| Criterion | React | Standard Components |
|---|---|---|
| Render speed for 5000 items | 200–400 ms | 2–5 sec |
| Request caching | Built-in (React Query) | None, requires custom work |
| Typing | TypeScript | None (JavaScript without types) |
| UI flexibility | High (libraries) | Low (limited templates) |
| SSR support | Next.js | Built-in (Bitrix) |
React components reduce render time by up to 10x compared to standard Bitrix components, and development speed increases by 40%. For instance, React is 12.5 times faster for catalog rendering than standard Bitrix.
What Are the Patterns for Integrating React into Bitrix?
We identify three basic integration patterns. The choice depends on budget and the extent of integration with the current template.
| Pattern | Complexity | Suitable for |
|---|---|---|
| Widgets | Low | Targeted interface improvements |
| SPA-page | Medium | Catalog, personal account |
| Headless CMS | High | Complete redesign or mobile app |
- Widgets. A React component mounts on a specific DOM element inside the template. Ideal for forms, filters, sliders, cart. Minimal markup changes — just add a div with an id.
- Page SPA. Content is entirely generated by React, while Bitrix acts as a 'shell' (header, footer, menu). Data is fetched via API. Example: a catalog with dynamic product loading.
- Headless CMS. The React application runs separately; Bitrix serves only as an API. The most flexible but labor-intensive option. Requires reworking routing and migrating templates.
Step-by-Step Integration Guide (Including Authorization)
- Audit the current template — identify where React will have the greatest impact. Usually, this is the catalog, cart, and personal account.
- Design the API — create REST endpoints or use standard ones. On average, 3–5 endpoints per section are needed.
- Develop components — write React components with TypeScript. Use React Query for state management with
staleTime: 5 * 60 * 1000. - Integrate widgets — embed them or switch routing. Typical workload is 2–3 days per stage.
- Set up authorization — Bitrix manages the session and CSRF token. React consumes them with one request:
// /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,
});
}
If the user is not authorized — redirect to the standard login page. A custom form is written only for specific requirements (e.g., login via email + social networks).
- Test — Vitest + React Testing Library cover 80% of cases. Mock the API, verify rendering and behavior.
- Deploy — build the bundle using Vite, place it in
/local/js/build/. Set up caching and CDN.
Technical Implementation Details
Typed API Client
Instead of scattered fetch requests, create a unified typed API client with auto-filled CSRF token and response typing. This approach reduces integration errors by 2–3 times. Example implementation:
// /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();
Learn more about Bitrix REST API at https://dev.1c-bitrix.ru/rest_help/.
React Query: Managing Server Data
React Query (TanStack Query) is the standard for working with APIs in React. Integration with Bitrix looks like this:
// /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,
});
}
// In the component:
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>
);
}
Testing and Deliverables
Testing Components: Vitest and Mocks
Components are tested in isolation from Bitrix. For API requests, use mocks:
// 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('renders product name', async () => {
render(<CatalogSection sectionId={5} />);
expect(await screen.findByText('Товар 1')).toBeInTheDocument();
});
Project directory structure
/local/
/js/
/src/
/components/
/hooks/
/api/
bitrix.ts
catalog.ts
cart.ts
/store/
vite.config.ts
package.json
tsconfig.json
/templates/
/main/
Deliverables
- Source code of the React application (TypeScript, Vite, React Query).
- API client for all required Bitrix endpoints.
- Integration tests for key components with 95% coverage.
- Documentation for build and deployment.
- Maintenance and extension instructions.
- Code warranty — 6 months of free consultations.
What Is the Cost of React Integration?
Contact us — we'll analyze your project in 2 days and provide a quote. Typical project cost ranges from $5,000 to $20,000, with an average savings of 40% in development time. Cost is calculated individually after the audit determines the exact scope of work. Over 10 years of experience, more than 50 projects integrating React with Bitrix. Get a consultation — contact us via Telegram or email. We'll evaluate your project for free.