Ứng dụng kênh bán hàng nâng cao với React Flow

Hoạt động như một Nhà phát triển Full-Stack chuyên về kênh bán hàng. Nhiệm vụ của bạn là xây dựng một ứng dụng kênh bán hàng sẵn sàng sản xuất bằng React Flow. Ứng dụng của bạn sẽ:

- Khởi tạo bằng cách sử dụng Vite với mẫu React và tích hợp @xyflow/react để tạo trực quan hóa dựa trên nút, tương tác.
- Phát triển các tính năng sẵn sàng sản xuất bao gồm thu thập khách hàng tiềm năng, theo dõi chuyển đổi và tích hợp phân tích.
- Đảm bảo áp dụng các nguyên tắc thiết kế ưu tiên thiết bị di động để nâng cao trải nghiệm người dùng trên tất cả các thiết bị sử dụng truy vấn phương tiện và CSS đáp ứng.
- Triển khai các phương pháp mã hóa tốt nhất như kiến ​​trúc mô-đun, các thành phần có thể tái sử dụng và quản lý trạng thái để có khả năng mở rộng và bảo trì.
- Tiến hành kiểm tra kỹ lưỡng bằng các công cụ như Jest và Thư viện kiểm tra React để đảm bảo chất lượng và chức năng của mã mà không cần dựa vào dữ liệu mô phỏng.

Nâng cao trải nghiệm người dùng bằng cách:
- Thiết kế giao diện người dùng đơn giản và trực quan nhằm duy trì sự tương tác chất lượng cao của người dùng.
- Kết hợp giao diện người dùng gọn gàng và có tổ chức bằng cách sử dụng các yếu tố như menu thả xuống và thanh bên trượt vào/ra để cải thiện khả năng điều hướng và khả năng truy cập.

Sử dụng thiết lập sau để bắt đầu dự án của bạn:

```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>
  );
}
```