Sign in Subscribe
ReactJs

Cara Import React Component agar Kode Lebih Tertata

Cara Import React Component agar Kode Lebih Tertata
Photo by Rahul Mishra / Unsplash

Ketika membangun aplikasi React, kita sering kali memecah kode menjadi beberapa komponen terpisah untuk menjaga struktur yang rapi dan mudah dikelola. Namun, jika tidak dikelola dengan baik, import komponen bisa menjadi berantakan, terutama ketika jumlahnya semakin banyak.

Artikel ini akan membahas cara mengimpor komponen di React dengan struktur yang lebih bersih, terorganisir, dan mudah dipahami.

1. Kenapa Perlu Mengelola Import React dengan Baik?

✅ Memudahkan pembacaan kode – Struktur import yang rapi membuat kode lebih mudah dipahami oleh tim pengembang lain.
✅ Mencegah kesalahan – Import yang teratur membantu menghindari kesalahan seperti import duplikat atau jalur file yang membingungkan.
✅ Meningkatkan skalabilitas – Ketika proyek bertambah besar, struktur yang baik akan membuat pengelolaan lebih efisien.
✅ Mempercepat debugging – Dengan struktur import yang jelas, lebih mudah menemukan file yang perlu diperbaiki.

Misalnya, tanpa pengelolaan yang baik, kode import bisa terlihat berantakan seperti ini:

import Header from './components/Header';
import Footer from './components/Footer';
import Sidebar from '../layout/Sidebar';
import Button from '../../ui/Button';

Jika proyek semakin besar, akan sulit mencari file yang diimpor. Oleh karena itu, kita perlu cara mengimpor komponen dengan lebih tertata.

2. Cara Dasar Mengimpor Komponen di React

Ada beberapa cara untuk mengimpor komponen React dengan lebih baik.

📌 A. Import Satu Komponen per File

Metode standar dalam React adalah mengimpor satu komponen per file.

Misalnya, kita punya komponen Header.js:

import React from 'react';

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

export default Header;

Kemudian di App.js, kita bisa mengimpornya seperti ini:

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. Menggunakan Default Export vs Named Export

React mendukung dua cara utama dalam mengimpor komponen: default export dan named export.

1️⃣ Default Export

Default export digunakan ketika hanya ada satu komponen utama dalam file.

export default function Header() {
  return <h1>Header Utama</h1>;
}

Lalu di file lain, cukup import seperti ini:

import Header from './Header';

2️⃣ Named Export

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

export function Header() {
  return <h1>Header Utama</h1>;
}

export function Footer() {
  return <p>Footer Halaman</p>;
}

Saat mengimpornya, kita harus menggunakan {}:

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

Kapan Menggunakan Default vs Named Export?
✅ Gunakan default export jika komponen hanya satu dalam file.
✅ Gunakan named export jika ada beberapa komponen dalam satu file.

3. Menggunakan Index.js untuk Import yang Lebih Rapi

Daripada mengimpor komponen satu per satu dengan jalur yang panjang, kita bisa menggunakan index.js untuk mengelola import.

Misalnya, kita punya beberapa komponen di folder components/:

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

Di dalam components/index.js, kita bisa mengumpulkan semua komponen dalam satu file:

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

Sekarang, di App.js, kita bisa mengimpornya dengan lebih rapi:

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

Dengan cara ini: ✅ Tidak perlu menulis path panjang saat import.
✅ Mudah mengelola dan menambah komponen baru.
✅ Struktur proyek menjadi lebih terorganisir.

4. Mengelola Import dengan Absolute Path

Secara default, kita harus menulis jalur relatif seperti:

import Button from '../../ui/Button';

Ini bisa membingungkan jika proyek besar. Solusinya adalah menggunakan absolute path dengan mengedit file jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

Setelah itu, kita bisa menulis import seperti ini:

import Button from 'ui/Button';

✅ Tidak perlu banyak ../ dalam jalur import.
✅ Mudah dipahami dan lebih bersih.

5. Kapan Harus Menggunakan Struktur Import yang Lebih Rapi?

✅ Gunakan struktur import yang lebih rapi jika:

  • Proyek memiliki banyak komponen yang perlu dikelola.
  • Ingin menghindari jalur import yang panjang dan membingungkan.
  • Proyek akan terus berkembang dan membutuhkan struktur yang modular.

❌ Tidak perlu terlalu kompleks jika:

  • Proyek masih sangat kecil dan hanya memiliki sedikit komponen.
  • Tidak ingin menggunakan index.js karena lebih nyaman dengan import langsung.

6. Kesimpulan

  • Mengelola import di React sangat penting untuk menjaga kode tetap bersih dan rapi.
  • Gunakan default export jika hanya ada satu komponen, dan named export jika ada banyak komponen dalam satu file.
  • Gunakan index.js untuk mengelola import dalam satu tempat agar lebih efisien.
  • Gunakan absolute path jika proyek mulai besar dan struktur folder semakin dalam.

Dengan mengikuti teknik ini, kode React kamu akan lebih terstruktur, mudah dibaca, dan lebih scalable!

Read next