Export dan Import Component agar Kode Lebih Modular

Dalam React, kita sering kali membagi aplikasi menjadi komponen-komponen kecil agar kode lebih terstruktur dan mudah dikelola. Untuk menggunakan komponen-komponen ini di berbagai bagian aplikasi, kita perlu memahami cara export dan import component dengan benar.

Artikel ini akan membahas cara menggunakan export dan import di React dengan optimal sehingga kode tetap modular, clean, dan mudah dipelihara.

1. Kenapa Perlu Export dan Import Component?

✅ Membantu keterbacaan kode – Dengan memisahkan komponen ke file terpisah, kode lebih mudah dipahami.
✅ Memudahkan reusability – Komponen dapat digunakan ulang di berbagai bagian aplikasi.
✅ Mempermudah debugging – Jika ada error dalam komponen, kita bisa langsung fokus pada file yang bermasalah.
✅ Struktur lebih rapi – Mengelompokkan komponen ke dalam folder membuat proyek lebih terorganisir.

Sebagai contoh, berikut adalah proyek React dengan struktur yang lebih modular:

my-app/
├── src/
│   ├── components/
│   │   ├── Header.js
│   │   ├── Footer.js
│   ├── App.js
│   ├── index.js

Dengan memisahkan file seperti ini, kita bisa mengelola komponen dengan lebih baik.

2. Cara Export Component di React

Ada dua cara utama untuk mengekspor komponen di React:

📌 A. Default Export

Default export digunakan ketika satu file hanya memiliki satu komponen utama.

Contoh Default Export di Header.js

import React from 'react';

function Header() {
  return <h1>Welcome to My App</h1>;
}

export default Header;

📌 B. Named Export

Named export digunakan ketika satu file memiliki lebih dari satu komponen.

Contoh Named Export di Layout.js

import React from 'react';

export function Header() {
  return <h1>Welcome to My App</h1>;
}

export function Footer() {
  return <p>&copy; 2024 My App</p>;
}

Perbedaan utama:
✅ Default Export → Hanya bisa satu per file, lebih simpel untuk impor.
✅ Named Export → Bisa lebih dari satu komponen dalam satu file, lebih fleksibel.

3. Cara Import Component di React

📌 A. Import Default Export

Jika komponen diekspor dengan export default, kita bisa mengimpornya tanpa {}.

Contoh Import di App.js

import React from 'react';
import Header from './components/Header';

function App() {
  return (
    <div>
      <Header />
      <p>Ini adalah konten utama.</p>
    </div>
  );
}

export default App;

📌 B. Import Named Export

Jika komponen diekspor dengan export, kita harus menggunakan {} saat mengimpor.

Contoh Import Named di App.js

import React from 'react';
import { Header, Footer } from './components/Layout';

function App() {
  return (
    <div>
      <Header />
      <p>Ini adalah konten utama.</p>
      <Footer />
    </div>
  );
}

export default App;

Jika hanya ingin mengimpor satu komponen saja dari named export:

import { Header } from './components/Layout';

4. Menggunakan index.js untuk Import yang Lebih Rapi

Jika banyak komponen dalam satu folder, kita bisa menggunakan index.js untuk merapikan import.

Misalnya, dalam folder components/ kita punya:

components/
├── Header.js
├── Footer.js
├── index.js

Di dalam components/index.js, kita bisa mengelompokkan ekspor:

export { default as Header } from './Header';
export { default as Footer } from './Footer';

Sekarang, di App.js, kita cukup menulis:

import { Header, Footer } from './components';

✅ Tidak perlu banyak path panjang saat import.
✅ Struktur proyek lebih terorganisir.
✅ Lebih mudah menambah atau menghapus komponen.

5. Kapan Harus Menggunakan Default Export vs Named Export?

✅ Gunakan Default Export jika:

• Hanya ada satu komponen utama dalam file.
• Ingin mengimpor komponen dengan nama yang berbeda.

✅ Gunakan Named Export jika:

• Ada lebih dari satu komponen dalam satu file.
• Ingin mengimpor beberapa komponen dalam satu perintah.

6. Kesimpulan

• Export dan import yang baik membantu membuat kode lebih modular dan clean.
• Gunakan default export jika hanya ada satu komponen per file, dan named export jika ada lebih dari satu.
• Gunakan index.js untuk mengelola import agar lebih terstruktur dan rapi.
• Struktur proyek yang baik mempermudah pengembangan dan pemeliharaan kode.

Dengan menerapkan cara ini, proyek React kamu akan lebih modular, bersih, dan mudah dikembangkan!