Keajaiban komponen terletak pada kemampuannya yang dapat digunakan kembali: Anda dapat membuat komponen yang disusun dengan komponen lain. Namun, ketika Anda menyusun komponen-komponen yang semakin banyak, seringkali lebih masuk akal untuk mulai membaginya ke dalam file-file yang berbeda. Dengan ini Anda menjaga file Anda agar tetap mudah dipindai dan digunakan kembali di banyak tempat.

Anda akan mempelajari

  • Apa itu file komponen root
  • Bagaimana cara impor dan ekspor komponen
  • Kapan menggunakan default dan named impor dan ekspor
  • Bagaimana cara mengimpor dan mengekspor beberapa komponen pada satu file
  • Bagaimana cara memisahkan komponen menjadi beberapa file

File komponen root

Pada Komponen Pertama Anda, Anda membuat komponen Profile dan komponen Gallery yang me-render:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Para ilmuwan hebat</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Komponen tersebut saat ini berada pada file komponen root, yang bernama App.js pada contoh ini. Tergantung pada persiapan Anda, komponen root Anda bisa saja berada di file lain. Jika Anda menggunakan framework dengan file-based routing, seperti Next.js, komponen root Anda akan berbeda di setiap halaman.

Mengekspor dan mengimpor sebuah komponen

Bagaimana jika Anda ingin mengubah landing screen di masa depan dan memasukkan daftar buku sains disana? Atau meletakkan semua profil di tempat lain? Masuk akal untuk memindahkan Gallery dan Profile dari file komponen root. Ini akan membuat lebih modular dan dapat digunakan kembali di file lain. Anda dapat memindahkan sebuah komponen dengan tiga langkah:

  1. Buat sebuah file JS baru untuk memasukkan komponen.
  2. Ekspor function component Anda dari file tersebut (menggunakan baik default atau named eskpor).
  3. Impor dimana Anda akan menggunakan komponen tersebut (menggunakan teknik yang sesuai untuk mengimpor default atau named ekspor).

Di sini Profile dan Gallery sudah dipindahkan dari App.js ke dalam file baru bernama Gallery.js. Sekarang Anda dapat mengubah App.js untuk mengimpor Gallery dari Gallery.js:

import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

Perhatikan bagaimana pada contoh ini dipecah menjadi dua file komponen sekarang:

  1. Gallery.js:
    • Mendefinisikan Profile komponen yang hanya digunakan dalam file yang sama dan tidak diekspor.
    • Mengekspor Gallery komponen sebagai default export.
  2. App.js:
    • Mengimpor Gallery sebagai default import dari Gallery.js.
    • Mengekspor root App komponen sebagai default export.

Catatan

Anda mungkin menemukan file yang meninggalkan ekstensi file .js seperti ini:

import Gallery from './Gallery';

Salah satu './Gallery.js' atau './Gallery' akan jalan dengan React, meskipun yang pertama lebih mirip dengan bagaimana native ES Modules bekerja.

Pendalaman

Default vs named ekspor

Ada dua cara utama untuk mengekspor nilai dengan JavaScript: default exports dan named exports. Sejauh ini, contoh kita hanya menggunakan default exports. Tapi Anda dapat menggunakan satu atau keduanya pada file yang sama. Sebuah file dapat menggunakan tidak lebih dari satu default export, tapi dapat menggunakan named exports sebanyak yang Anda suka.

Default dan named ekspor

Bagaimana Anda mengekspor komponen Anda mendikte bagaimana Anda harus mengimpornya. Anda akan mendapatkan error jika Anda mencoba untuk mengimpor default exports dengan cara yang sama Anda menggunakan named exports! Tabel ini akan membantu Anda untuk melacak:

SintaksisPernyataan ExporPernyataan Impor
Defaultexport default function Button() {}import Button from './Button.js';
Namedexport function Button() {}import { Button } from './Button.js';

Ketika Anda menulis default imports, Anda dapat memberi nama apa saja setelah import. Contoh, Anda dapat menulis import Banana from './Button.js' dan itu akan tetap memberi Anda export default yang sama. Sebaliknya, dengan named imports, nama harus sama di kedua sisi. Itulah mengapa disebut named imports!

Orang-orang seringkali menggunakan default exports jika file yang diekspor hanya satu komponen, dan menggunakan named exports jika mengekspor beberapa komponen dan nilai. Bagaimanapun gaya koding yang Anda gunakan, selalu beri nama yang berarti pada fungsi komponen Anda dan isi file tersebut. Komponen tanpa nama, seperti export default () => {}, tidak disarankan karena membuat proses debug lebih sulit.

Mengekspor dan mengimpor beberapa komponen dari file yang sama

Bagaimana jika Anda ingin menampilkan hanya satu Profile selain sebuah galeri? Anda dapat mengekspor komponen Profile juga. Tapi Gallery.js telah menggunakan default exports, dan Anda tidak dapat memiliki dua default exports. Anda dapat membuat file baru dengan default exports, atau Anda dapat menambahkan sebuah named exports untuk Profile. Sebuah file hanya dapat memiliki satu default exports, tapi dapat memiliki banyak named exports!

Catatan

Untuk mengurangi potensi kebingunan antara default dan named exports, beberapa tim memilih untuk berpegang pada satu gaya penulisan (default atau named), atau menghindari mencampurnya dalam satu file. Lakukan yang terbaik untuk Anda!

Pertama, ekspor Profile dari Gallery.js menggunakan named exports (tanpa kata kunci default):

export function Profile() {
  // ...
}

Selanjutnya, impor Profile dari Gallery.js ke App.js menggunakan named imports (dengan kurung kurawal):

import { Profile } from './Gallery.js';

Akhirnya, render <Profile /> dari komponen App:

export default function App() {
  return <Profile />;
}

Sekarang Gallery.js berisi dua ekspor: default exports Gallery, dan named exports Profile. App.js mengimpor keduanya. Coba mengedit <Profile /> ke <Gallery /> dan kembali pada contoh ini:

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

export default function App() {
  return (
    <Profile />
  );
}

Sekarang Anda menggunakan campuran default dan named exports:

  • Gallery.js:
    • Mengekspor komponen Profile sebagai named exports bernama Profile.
    • Mengekspor komponen Gallery sebagai default exports.
  • App.js:
    • Mengimpor Profile as a named imports called Profile dari Gallery.js.
    • Mengimpor Gallery as a default imports dari Gallery.js.
    • Mengekspor komponen root App sebagai default exports.

Rekap

Pada halaman ini Anda belajar:

  • Apa itu file komponen root
  • Bagaimana cara impor dan ekspor komponen
  • Kapan menggunakan default dan named impor dan ekspor
  • Bagaimana cara mengimpor dan mengekspor beberapa komponen pada satu file

Coba tantangan berikut

Tantangan 1 dari 1:
Memisahkan komponen lebih jauh

Saat ini, Gallery.js mengekspor kedua Profile dan Gallery, yang mana sedikit membingungkan.

Pindahkan komponen Profile pada miliknya sendiri Profile.js, dan ubah komponen App untuk me-render kedua <Profile /> dan <Gallery /> satu setelah lainnya.

Anda mungkin menggukanan salah satu dari default atau named eskpor untuk Profile, tetapi pastikan bahwa Anda menggunakan sintaksis impor pada kedua App.js dan Gallery.js. Anda dapat merujuk pada table dari bagian deep dive di atas:

SintaksisPernyataan ExporPernyataan Impor
Defaultexport default function Button() {}import Button from './Button.js';
Namedexport function Button() {}import { Button } from './Button.js';
// Pindahkan saya ke Profile.js!
export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Para ilmuwan hebat</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Setelah Anda berhasil menjalankan dengan salah satu ekspor, buat juga berjalan dengan jenis yang lain.

SebelumnyaKomponen Pertama Anda
SelanjutnyaMenulis Markup dengan JSX