インストールと要件
このセットアップでは、node.jsとnpm、yarnまたはpnpmがすでにインストールされていることを前提としています。React Flowパッケージはnpmで@xyflow/reactとして公開されており、次の方法でインストールできます。
npm install @xyflow/reactこれで、React Flowコンポーネントとスタイルをアプリケーションにインポートできます。
import { ReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css';すぐに始めましょう
すぐに構築を始められるように、ViteとTypeScriptを使用するGitHubのテンプレートリポジトリを用意しました。これは、私たち自身のReact Flow作業すべてに使用しているセットアップです！テンプレートはこちらにあります。
これを使用するには、テンプレートから新しいリポジトリを作成するか、degitを使用してgit履歴なしでテンプレートのファイルを取得できます。
npx degit xyflow/vite-react-flow-template your-app-name必要な事前経験
React FlowはReactライブラリです。つまり、React開発者は快適に使用できます。状態、プロパティ、コンポーネント、フックなどのReactの基本的な用語と概念に慣れていない場合は、React Flowを完全に使いこなせるようになる前に、Reactについてさらに学習する必要があるかもしれません。これまでReactを使用したことがない場合は、まずCodecademyやReactjs.orgのようなチュートリアルでReactを始めることをお勧めします。