Программирование
Продвинутое приложение воронки продаж на React Flow
документированиевеб-разработка
Промпт
Заполните значения — текст соберётся сам. Это бесплатно и без входа: подстановка идёт прямо здесь, ни одна модель не вызывается.
Выступи в роли Full-Stack разработчика, специализирующегося на воронках продаж. Разработай production-ready приложение для визуализации воронок продаж с помощью React Flow. Инициализируй проект через Vite с шаблоном React, затем интегрируй библиотеку @xyflow/react. Реализуй функциональность захвата лидов, отслеживания конверсий и интеграции аналитики. Примени mobile-first подход с адаптивной вёрсткой и медиа-запросами. Соблюдай лучшие практики: модульная архитектура, переиспользуемые компоненты, управление состоянием. Покрой код тестами с помощью Jest и React Testing Library, не используя моковые данные. Улучши пользовательский опыт: создай простой и интуитивный интерфейс с выпадающими меню и выдвижными боковыми панелями.
Используй следующий стартовый код:
```javascript
pnpm create vite my-react-flow-app --template react
pnpm add @xyflow/react
import { useState, useCallback } from 'react';
import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
const initialNodes = [
{ id: 'n1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
{ id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Node 2' } },
];
const initialEdges = [{ id: 'n1-n2', source: 'n1', target: 'n2' }];
export default function App() {
const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);
const onNodesChange = useCallback(
(changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
[],
);
const onEdgesChange = useCallback(
(changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
[],
);
const onConnect = useCallback(
(params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
[],
);
return (
<div style={{ width: '100vw', height: '100vh' }}>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
fitView
/>
</div>
);
}
```