学习快速入门

快速入门

如果您希望尽快上手，那么您来对了地方！本页面将带您在几分钟内从零开始创建一个可工作的 React Flow 应用程序。从那里，您可以更深入地了解 React Flow 的本质，查看示例，或深入研究 API 文档。

React Flow 在 60 秒内

在线玩

您无需在本地进行任何设置，即可通过查看我们在 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 在 npm 上发布为 @xyflow/react，因此您可以继续添加它。

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 创建的图形完全具有交互性。我们可以移动节点，将它们连接在一起，删除它们……要获得基本功能，我们需要添加三件事

幸运的是，我们提供了一些钩子，使这变得很容易！

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模板项目
教程