React flow- Getting Started

Overview

Reactflow 정리 문서 원문은 이곳<ref>https://reactflow.dev/learn/getting-started/installation-and-requirements</ref>에서 확인할 수 있다.

Installation

Installation and Requirements

The React Flow package is published under reactflow on npm and installable via:

$ npm install reactflow

Now you can import the React Flow component and the styles in your application:

import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';

Prior Experience Needed

React Flow is a React library. That means React developers will feel comfortable using it. If basic React terms and concepts like states, props, components, and hooks are unfamiliar to you, you might need to learn more about React before being able to use React Flow fully.

Building a Flow

Getting Started

Let's create an empty flow with a controls panel and a background. For this we need to import the components from the reactflow package:

import ReactFlow, { Background, Controls } from 'reactflow';

We can now use the components to render an empty flow:

import ReactFlow, { Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';

function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;

There are three important things to keep in mind here:

• You need to import the styles. Otherwise, React Flow won't work.
• The parent container needs a width and height, because React Flow uses its parent dimensions.
• If you have multiple flows on one page, you need to pass a unique id prop to each component to make React Flow work properly.

Adding Nodes

Now that the flow is set up, let's add some nodes. To do this, you need to create an array with node objects like this:

const nodes = [
  {
    id: '1',  // required
    position: { x: 0, y: 0}, // required
  },
];

These nodes can now be added to the flow:

import ReactFlow, {Controls, Background} from 'reactflow';
import 'reactflow/dist/style.css';

const nodes = [
  {
    id: '1',
    position: {x: 0, y: 0},
  },
];

function Flow() {
  return(
    <div style={{ height: '100%' }}>
      <ReactFlow nodex={nodes}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;

Let's add another node, configure labels and use the node type input for the first node.

const nodes = [
  {
    id: '1',
    position: {x: 0, y: 0},
    data: {label: 'Hello'},
    type: 'input',
  },
  {
    id: '2',
    position: {x: 100, y: 100},
    data: { label: 'World' },
  },
];