React Personal Account for 1C-Bitrix Development

We know firsthand: the standard personal account in 1C-Bitrix is a set of PHP components bitrix:sale.personal.* that render on the server, deliver a full HTML page, and on any user action (changing delivery address, viewing order status) perform a full page reload. In small stores, this is tolerable. When the account has an order history of 200+ items, a loyalty system, multiple delivery addresses, documents, and integration with external services — the standard approach becomes a bottleneck in terms of UX and performance. Developing a personal account on React solves this problem: the server only provides data via REST, the interface lives in the browser. This gives instant transitions between sections, data updates without reloads, and the ability to build complex interactive forms without page recompilation. According to our case study, a React account reduces load time by 70% and lowers operational support costs.

How a React Account Increases Performance

With server-side rendering, every navigation is a new request that builds the entire page again. A React account only loads data: order list, profile, history. The browser updates only the necessary part of the interface. For example, switching between 'Orders' and 'Addresses' tabs takes 50–100 ms instead of 1–2 seconds for a full reload. This is confirmed by our case studies: order page load time decreased from 4.2 to 0.9 seconds (see table below).

Integration Architecture

There are two fundamentally different ways to embed a React account into Bitrix.

Option 1: React inside a Bitrix template. On the PHP page /personal/, a React application is mounted in a container <div id="personal-root"></div>. Bitrix handles authorization, SEO (title, meta), and the overall layout (header, footer). React manages only the account content. Routing is via React Router with BrowserRouter, browser history is synced with URL. This option is simpler to integrate: authorization through standard $USER->Login(), Bitrix session is passed automatically, CSRF token taken from BX.bitrix_sessid().

Option 2: SPA with JWT authorization. The React application lives separately (separate domain or subdomain) and communicates with Bitrix exclusively via REST API with JWT tokens. Authorization is through a custom endpoint, token stored in httpOnly cookie or localStorage. This option is justified when the account must work with both a mobile app and a web version through the same API. For most projects, Option 1 is optimal—it's easier to maintain and doesn't require separate deployment; authorization is already solved.

API Layer on the Bitrix Side

React components interact with data via AJAX requests to Bitrix. For this, a controller is created in /local/php_interface/include/api/personal/:

// Example: endpoint for order list class PersonalOrdersController extends \Bitrix\Main\Engine\Controller { public function getListAction(int $page = 1, int $limit = 20): array { $userId = \Bitrix\Main\Engine\CurrentUser::get()->getId(); $orderList = \Bitrix\Sale\Order::getList([ 'filter' => ['USER_ID' => $userId], 'select' => ['ID', 'DATE_INSERT', 'PRICE', 'STATUS_ID', 'CURRENCY'], 'order' => ['DATE_INSERT' => 'DESC'], 'limit' => $limit, 'offset' => ($page - 1) * $limit, ]); $orders = []; while ($order = $orderList->fetch()) { $orders[] = $order; } return [ 'orders' => $orders, 'total' => \Bitrix\Sale\Internals\OrderTable::getCount(['USER_ID' => $userId]), ]; } } 

Routing in Bitrix via local/ajax/personal.php with a dispatcher or through \Bitrix\Main\Engine\Router. For CSRF protection, all POST requests from React send the header BX-Ajax: true and the session token.

React Application Structure

src/ personal/ api/ # axios instance, request types components/ # reusable UI elements pages/ Orders/ # order history OrderDetail/ # order detail page Profile/ # profile data Addresses/ # delivery addresses Loyalty/ # loyalty program store/ # state (Zustand or Redux Toolkit) App.tsx router.tsx 

State management: for simple accounts, React Query (request cache + synchronization) is sufficient without a global store. For complex ones, Zustand as a lighter alternative to Redux.

Case Study: B2B Distributor Account

A wholesale supplier of electronics, ~1,500 active client accounts. Task: a personal account for client managers — ability to view purchase history, reorder from history, manage multiple legal entities in one account, download closing documents. The standard Bitrix account did not support multi-legal entities at all, and order history with 3,000+ lines rendered on the server in 4–6 seconds.

Reducing support tickets by 80% cuts maintenance costs. This saves budget for support and allows resources to be directed to development.

What's Included in Turnkey Account Development?

• API design: endpoints, data structure, pagination, filtering.
• Server-side development: controllers, authorization, access rights.
• React application development: routing, components, state management.
• Integration with Bitrix modules: sale, catalog, crm as needed.
• Build, deployment, API response caching setup.
• API and component structure documentation.
• Administrator training: how to add new sections or modify data.
• Warranty: we maintain build and API functionality for 3 months after delivery.

Timeline Estimates

Basic account (profile + orders + addresses) — 3–4 weeks. Full-featured B2B account with multi-legal entities, 1C integration, and document workflow — 2–4 months. We specify timelines after auditing your requirements during a free consultation.

Why Choose React for a Personal Account?

A React account is 3–5 times faster than standard on pages with large amounts of data. It allows building interfaces impossible with standard components — for example, multi-legal entities, dynamic filters, real-time editing. Moreover, a React application is easier to maintain and extend due to its modular architecture. If you have a complex account with unique logic, this is the right choice.

Order a free consultation: we will evaluate your project and offer the optimal solution. We work turnkey: from API design to deployment and training. Get a consultation — we will explain how React will speed up your account and reduce support costs.