學習快速開始

快速開始

如果您想盡快開始使用，那麼您來對地方了！本頁面將在幾分鐘內帶您從零開始建立一個可運作的 React Flow 應用程式。從那裡，您可以更深入地了解 React Flow 的全部內容、查看範例或深入研究 API 文件。

60 秒上手 React Flow

線上試玩

您可以透過查看我們在 CodeSandbox 上的入門專案，在不進行任何本地設定的情況下試用 React Flow。

JS
new.reactflow.dev/js
TS
new.reactflow.dev/ts

Vite 範本

如果您想立即開始，可以使用我們的 vite 範本。

npx degit xyflow/vite-react-flow-template app-name

安裝

若要在本機開始使用，您應該具備以下幾項

  • 已安裝 Node.js。
  • npm 或其他套件管理工具，如 yarn 或 pnpm。
  • 具備 React 的基本知識。您不需要是專家，但應該熟悉基本知識。

首先，以您喜歡的方式建立一個新的 React 專案；我們建議使用 Vite，但您可以自行選擇。

npm create vite@latest my-react-flow-app -- --template react

React Flow 以 @xyflow/react 的形式發佈在 npm 上，接下來請新增它。

npm install @xyflow/react

最後，啟動開發伺服器，我們就可以開始了！

npm run dev

建立您的第一個流程圖

reactflow 套件將 <ReactFlow /> 元件作為預設匯出。這些以及一些節點和邊緣是我們啟動流程圖所需的一切！移除 App.jsx 內的所有內容，並新增以下內容

import React from 'react';
import { ReactFlow } from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
 
export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow nodes={initialNodes} edges={initialEdges} />
    </div>
  );
}

這裡有幾點需要注意

  • 您必須匯入 React Flow 樣式表。
  • <ReactFlow /> 元件必須包裝在具有寬度和高度的元素中。

新增互動性

使用 React Flow 建立的圖表是完全互動式的。我們可以移動節點、將它們連接在一起、刪除它們… 為了獲得基本功能，我們需要新增三件事

幸運的是，我們提供了一些 Hook 來簡化此過程！

import React, { useCallback } from 'react';
import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  addEdge,
} from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
 
export default function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges],
  );
 
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
      />
    </div>
  );
}

一些額外的好東西

最後，React Flow 隨附一些現成的外掛，用於諸如 <Minimap /> 或視窗 <Controls /> 之類的功能。

import React, { useCallback } from 'react';
import {
  ReactFlow,
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
 
export default function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges],
  );
 
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
      >
        <Controls />
        <MiniMap />
        <Background variant="dots" gap={12} size={1} />
      </ReactFlow>
    </div>
  );
}

瞧。您已經建立了您的第一個互動式流程圖！查看下面的連結，了解下一步該往哪裡去。

下一步

概念客製化範例API 參考Discord範本專案
教學