ReactJS - Fragments

Hai teman-teman pengembang berbakat! Hari ini, kita akan melihat salah satu fitur menarik React: Fragments. Sebagai guru ilmu komputer yang ramah di lingkungan Anda, saya sangat senang untuk mengajarkan Anda tentang topik ini. Pada akhir pelajaran ini, Anda akan dapat menggunakan Fragments seperti seorang ahli! Jadi, mari kita mulai.

Apa Itu Fragments?

Imaginasi Anda sedang mengemas untuk perjalanan, dan Anda ingin menjaga semua barang penting bersamaan tanpa menggunakan tas besar. Itu tepat apa yang Fragments lakukan di React! Mereka memungkinkan kita untuk mengelompokkan beberapa elemen tanpa menambahkan node ekstra ke DOM.

Dalam React, komponen hanya dapat mengembalikan satu elemen saja. Hal ini sering membuat pengembang menggunakan <div> yang tidak diperlukan untuk membungkus beberapa elemen. Fragments menyelesaikan masalah ini dengan elegan.

mari lihat contoh sederhana:

import React from 'react';

function WithoutFragment() {
return (
<div>
<h1>Hallo</h1>
<p>Dunia</p>
</div>
);
}

function WithFragment() {
return (
<React.Fragment>
<h1>Hallo</h1>
<p>Dunia</p>
</React.Fragment>
);
}

Dalam komponen WithoutFragment, kita terpaksa menggunakan <div> untuk membungkus elemen kita. Tetapi dalam WithFragment, kita menggunakan React.Fragment untuk mengelompokkan elemen kita tanpa menambahkan node DOM ekstra.

Sintaks Pendek

Sekarang, mengetik React.Fragment setiap kali bisa menjadi sesuatu yang membosankan. Itu seperti menulis nama lengkap Anda di setiap halaman ujian! Untungnya, React menyediakan sintaks yang lebih pendek:

function ShortSyntax() {
return (
<>
<h1>Hallo</h1>
<p>Dunia</p>
</>
);
}

Tag kosong <> dan </> adalah singkatan untuk <React.Fragment> dan </React.Fragment>. Itu seperti menggunakan nama panggilan instead dari nama lengkap - lebih pendek dan lebih manis!

Mengapa Menggunakan Fragments?

Anda mungkin berpikir, "Mengapa memusingkan Fragments? Apa yang salah dengan menggunakan divs?" Pertanyaan yang bagus! Biarkan saya menjelaskan dengan contoh:

function TableExample() {
return (
<table>
<tr>
<React.Fragment>
<td>Hallo</td>
<td>Dunia</td>
</React.Fragment>
</tr>
</table>
);
}

Dalam contoh ini, jika kita menggunakan <div> instead of Fragment, HTML kita akan menjadi tidak valid karena <div> tidak diijinkan sebagai anak <tr>. Fragments memungkinkan kita untuk mengelompokkan elemen <td> ini tanpa merusak struktur tabel.

Fragments dengan Keys

Sekarang, mari kita tingkatkan! Kadang-kadang, Anda perlu menambahkan key ke Fragment Anda, terutama saat merender daftar. Berikut cara Anda dapat melakukannya:

function Glossary(props) {
return (
<dl>
{props.items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}

Dalam contoh ini, kita menggunakan React.Fragment dengan prop key. Ini berguna saat Anda sedang memetakan sebuah array dan perlu menugaskan keys ke Fragments yang dihasilkan.

Catatan bahwa Anda tidak dapat menggunakan sintaks pendek <> saat Anda perlu melewati prop key. Itu seperti mencoba menggunakan nama panggilan di paspor Anda - itu hanya tidak akan bekerja!

Kapan Menggunakan Fragments

Berikut adalah tabel yang membantu Anda menentukan kapan menggunakan Fragments:

Skenario	Gunakan Fragment?	Penjelasan
Mengelompokkan elemen tanpa menambahkan node DOM ekstra	Ya	Fragments tidak membuat elemen DOM tambahan
Mengembalikan beberapa elemen dari komponen	Ya	Komponen harus mengembalikan satu elemen, dan Fragments memungkinkan ini tanpa pembungkus ekstra
Memetakan array dan perlu mengembalikan beberapa elemen untuk setiap item	Ya	Gunakan Fragments terenkripsi dalam kasus ini
Perlu menambahkan gaya atau penanganan peristiwa ke pembungkus	Tidak	Gunakan <div> atau elemen lain yang sesuai instead

Kesimpulan

Dan begitulah, teman-teman! Kita telah berpergian melalui dunia React Fragments. Dari memahami penggunaan dasar mereka hingga mengeksplorasi Fragments terenkripsi, Anda sekarang dilengkapi untuk menggunakan fitur kuat ini dalam aplikasi React Anda.

Ingat, Fragments adalah seperti lem tak terlihat yang menggabungkan komponen Anda. Mereka menjaga DOM Anda bersih dan kode Anda semantik. Jadi kali berikutnya Anda menemukan diri Anda mencari <div> yang tidak diperlukan, berpikir tentang Fragment!

Praktik menggunakan Fragments dalam proyek React Anda, dan Anda akan segera melihat bagaimana mereka dapat membuat kode Anda lebih bersih dan lebih efisien. Selamat berkoding, dan may the Fragment be with you!

Credits: Image by storyset