クイックスタート
できるだけ早く始めたい場合、あなたは正しい場所にいます！このページでは、数分で動作するReact Flowアプリを作成する方法を説明します。そこから、React Flowの詳細を確認したり、サンプルを確認したり、APIドキュメントを参照したりすることができます。
60秒でReact Flow
オンラインでプレイ
ローカルに何も設定せずにReact Flowを試すには、CodeSandboxにあるスタータープロジェクトをご覧ください。
Viteテンプレート
すぐに始めたい場合は、Viteテンプレートを使用できます。
npx degit xyflow/vite-react-flow-template app-nameインストール
ローカルで始めるには、いくつかのものが必要です。
- Node.js がインストールされている必要があります。
- yarn や pnpm などのnpmまたはその他のパッケージマネージャーが必要です。
- React の基本的な知識が必要です。エキスパートである必要はありませんが、基本的な操作に慣れている必要があります。
まず、お好きな方法で新しいReactプロジェクトを作成します。 Vite を使用することをお勧めしますが、お好きなものをお選びください。
npm create vite@latest my-react-flow-app -- --template reactReact 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で作成されたグラフは完全にインタラクティブです。ノードの移動、接続、削除などができます…基本的な機能を得るには、3つのものが必要です。
- ノードが変更されたときに実行するコールバック。
- エッジが変更されたときに実行するコールバック。
- ノードが接続された時の処理に関するコールバックです。接続
ご安心ください。この処理を簡単にするためのフックを用意しています！
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>
);
}Voilà。最初のインタラクティブなフローを作成しました！次のステップについては、以下のリンクをご覧ください。