Pada tutorial kali ini, kita akan belajar cara menggunakan react flow di proyek react. Tapi sebelum itu, kita harus tahu terlebih dahulu apa itu react flow?
React Flow sendiri adalah library React untuk membuat grafik interaktif dan editor berbasis node. React Flow dapat membuat alur kerja dengan pengambilan keputusan dan juga digunakan untuk presentasi. Dengan React Flow, Anda dapat membuat seluruh arsitektur proyek React secara terprogram dengan fleksibilitas untuk menyesuaikan setiap node secara diagram.
React Flow gratis untuk digunakan, memiliki pengaturan dan integrasi yang mudah, dan membutuhkan waktu kurang dari lima menit untuk bisa digunakan. React Flow memiliki fitur zoom dan panning, multi-seleksi, dan beberapa event handler yang terintegrasi di luar kotak.
Kedua, library React Flow sangat fleksibel dan dapat disesuaikan. Pengguna dapat menata node dan elemen sesuai dengan preferensi mereka. Library ini juga dilengkapi dengan beberapa dukungan plugin untuk kustomisasi seperti:
- MiniMap: Plugin ini memberikan gambaran umum dari seluruh flow dalam bagian miniatur kecil, sehingga memberikan pengguna kemampuan navigasi dan gambaran umum yang cepat. Hal ini menjadi sangat berguna ketika alurnya besar dan tidak dapat dilihat dalam satu halaman
- Kontrol: Bilah kontrol yang dapat disesuaikan ini dilengkapi dengan pustaka React Flow. Terdiri dari sekumpulan tombol-tombol berharga yang digunakan untuk mengontrol zoom-in dan zoom-out, menyesuaikan dengan layar, dan fitur interaktivitas dari flow
- Latar Belakang: Plugin ini membantu dengan visualisasi grafis Canvas. Ketika ditambahkan ke komponen React Flow, ini akan memberikan latar belakang yang bertitik-titik secara seragam
- Untuk memahami keandalan aplikasi kami, kami menjalankan pengujian untuk menghilangkan keraguan kami. React Flow diuji dengan Cypress. Menurut dokumen, komponen ini juga mendukung pengujian dengan Playwright dan Jest.
React Flow sangat populer di kalangan developer. Untuk lebih memahami cara menggunakan React Flow, mari kita buat custom flow kita.
Membuat Custom React Flow
Mari kita mulai dengan membuat aplikasi React kita. Jalankan perintah di bawah ini untuk membuat aplikasi React di direktori pilihan Anda:
npx create react-app working-with-reactflow
Setelah kita menginstal paket dan library yang diperlukan, ubah direktori ke dalam proyek yang baru dibuat dan jalankan perintah ini untuk menginstal React Flow.
cd working-with-reactflow npm install reactflow
Sebelum kita membuat aplikasi React Flow, mari kita membuat gaya khusus untuk aplikasi kita. Salin dan tempelkan kode di bawah ini ke dalam file src/index.css:
html,
body,
#root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}Baca Juga
Membuat Node React Flow
Node adalah fitur penting dari React Flow yang memungkinkan Anda untuk me-render apa pun yang Anda suka.
Menurut dokumentasi React Flow, node adalah sebuah kontainer atau komponen individual yang berisi informasi singkat tentang kontainer tersebut berdasarkan type default, input, atau output. Setiap node dapat ditempatkan di lokasi yang tepat di Canvas menggunakan properti x dan y untuk mengatur posisi awalnya.
Sekarang, mari kita mulai dengan membuat node pertama kita. Buat file nodes.js di dalam folder src dan tempelkan kode di bawah ini ke dalamnya:
export default [
{
id: "1",
type: "input",
data: { label: "User's Input" },
position: { x: 500, y: 100 },
},
{
id: "2",
data: { label: "Process Input" },
type: "default",
position: { x: 500, y: 200 },
},
{
id: "3",
data: { label: "Print yes" },
position: { x: 200, y: 350 },
},
{ id: "4", data: { label: "Print No" }, position: { x: 500, y: 350 } },
{ id: "5", data: { label: "Retake test" }, position: { x: 850, y: 350 } },
{
id: "6",
data: { label: "Retake Test Yes" },
position: { x: 1050, y: 450 },
},
{ id: "7", data: { label: "Retake Test No" }, position: { x: 700, y: 450 } },
{
id: "8",
type: "output",
data: { label: "User's Output / End application" },
position: { x: 500, y: 650 },
},
];Pada blok kode di atas, kita membuat sebuah array objek. Setiap objek berisi id unik, tipe (default jika tidak ditentukan), dan data, yang berisi objek dengan properti label dan, terakhir, properti posisi untuk menentukan posisi viewport node.
Merancang edge dalam React Flow
Edges React Flow adalah garis yang menghubungkan antar node. Edge dapat terhubung ke beberapa node untuk membentuk sebuah flow dan dapat digambar dan dihapus secara manual.
Untuk membuat edge pada node kita, buat file edge.js di dalam folder src dan tempelkan kode di bawah ini ke dalamnya:
export default [
{ id: "el1-2", source: "1", target: "2" },
{ id: "el2-3", source: "2", target: "3", animated: true },
{ id: "el2-4", source: "2", target: "4", animated: true },
{ id: "el2-5", source: "2", target: "5", animated: true },
{ id: "el6-1", source: "1", target: "6", label: "Back to Input" },
];Pada blok kode di atas, kita membuat sebuah array objek, di mana setiap objek berisi id unik, sumber di mana edge dimulai, lokasi target, label untuk identifikasi, dan nilai Boolean animasi.
Membangun UI React Flow
Dengan node dan edge yang telah kita buat, mari kita gunakan dalam aplikasi React Flow. Salin dan tempel kode di bawah ini ke dalam file Flow.jsx yang baru dibuat:
import { useCallback, useState } from "react";
import ReactFlow, {
applyEdgeChanges,
applyNodeChanges,
addEdge,
MiniMap,
Controls,
Background,
} from "reactflow";
import "reactflow/dist/style.css";
import initialNodes from "./nodes.js";
import initialEdges from "./edges.js";
function Flow() {
const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);
const onNodeChange = useCallback(
(x) => setNodes((newNode) => applyNodeChanges(x, newNode)),
[setNodes]
);
const onEdgeChange = useCallback(
(x) => setEdges((eds) => applyEdgeChanges(x, eds)),
[setEdges]
);
const onEdgeConnect = useCallback(
(x) => setEdges((eds) => addEdge({ ...x, animated: true }, eds)),
[setEdges]
);
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodeChange}
onEdgesChange={onEdgeChange}
onConnect={onEdgeConnect}
>
<MiniMap />
<Controls />
<Background />
</ReactFlow>
);
}
export default Flow;Pada blok kode di atas, kita telah membuat state untuk initalNodes dan initialEdges, yang nantinya digunakan dalam komponen ReactFlow. Kita juga mengamati perubahan pada node dan edge setiap kali posisinya berubah pada Canvas.
Kita membuat edge dapat terhubung dari mana pun mereka digambar dari satu node ke node lainnya dengan mendengarkan dan memperbarui perubahan yang diterapkan pada state menggunakan properti onConnect.
Kita juga menggunakan plugin React Flow untuk menampilkan MiniMap, yang memberikan gambaran umum tentang keseluruhan flow, Controls untuk panel kontrol, dan Background untuk meningkatkan representasi grafis dari kanvas.
Mengapa harus menggunakan React Flow untuk proyek React ?
Dengan banyaknya pilihan di pasar pengembangan, memilih library yang sesuai dengan kebutuhan Anda dapat membuat Anda stres. Namun, dengan React Flow, membuat proyek Anda direncanakan dan diarsiteki dapat disederhanakan, sehingga Anda tidak perlu khawatir.
Pustaka React Flow memiliki nilai yang sangat baik untuk perencanaan proyek karena kesederhanaan dan fleksibilitasnya. React Flow dipercaya oleh ribuan pengguna, termasuk tim pengembangan open-source kecil dan organisasi seperti Stripe dan Typeform. Library ini telah digunakan untuk membuat pembuat chatbot, synthesizer musik, alat pembelajaran mesin, dan banyak lagi.
Meskipun ada banyak saingan di pasar, React Flow menonjol sebagai salah satu library terbaik untuk perencanaan dan alur proyek dan tetap bermanfaat bagi pengguna di seluruh fase pengembangan proyek-proyek besar.