Learn React
Describing the UI

Mengimport dan Mengeksport Komponen

Keajaiban komponen terletak pada kemampuannya yang dapat digunakan kembali: Anda dapat membuat komponan 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 mudah untuk dipindai dan digunakan kembali di banyak tempat.

You will learn

  • Apa itu file komponen root
  • Bagaimana cara import dan eksport komponen
  • Kapan menggunakan default dan named import dan eksport
  • Bagaimana cara mengimport dan mengeksport 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 merender:

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

export default function Gallery() {
  return (
    <section>
      <h1>Ilmuan Hebat</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Komponen tersebut saat ini berada pada file komponen root, yang bernama App.js pada contoh ini. Pada Create React App, aplikasi Anda berada di src/App.js. 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.

Mengeksport dan mengimport 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. Eksport function component Anda dari file tersebut (menggunakan baik default atau named exports).
  3. Import dimana Anda akan menggunakan komponen tersebut (menggunakan teknik yang sesuai untuk mengimport default atau named exports).

Di sini Profile dan Gallery sudah dipindahkan dari App.js ke dalam file baru bernama Gallery.js. Sekarang Anda dapat mengubah App.js untuk mengimport 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 dieksport.
    • Mengeksport Gallery komponen sebagai default export.
  2. App.js:
    • Mengimport Gallery sebagai default import dari Gallery.js.
    • Mengeksport root App komponen sebagai default export.

Note

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.

Deep Dive

Default vs named exports

Ada dua cara utama untuk mengeksport 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 exports

Bagaimana Anda mengeksport komponen Anda mendikte bagaimana Anda harus mengimportnya. Anda akan mendapatkan error jika Anda mencoba untuk mengimport default export dengan cara yang sama Anda menggunakan named export! Tabel ini akan membantu Anda untuk melacak:

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

Ketika Anda menulis default import, 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 dieksport hanya satu komponen, dan menggunakan named exports jika mengeksport 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 debugging lebih sulit.

Mengeksport dan mengimport beberapa komponen dari file yang sama

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

Note

Untuk menguragi 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, eksport Profile dari Gallery.js menggunakan named export (tanpa kata kunci default):

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

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

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

Akirnya, render <Profile /> dari komponen App:

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

Sekarang Gallery.js berisi dua eksport: default Gallery export, dan named Profile export. App.js mengimport 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:
    • Mengeksport komponen Profile sebagai named export bernama Profile.
    • Mengeksport komponen Gallery sebagai default export.
  • App.js:
    • Mengimport Profile as a named import called Profile dari Gallery.js.
    • Mengimport Gallery as a default import dari Gallery.js.
    • Mengeksport komponen root App sebagai default export.

Recap

Pada halaman ini Anda belajar:

  • Apa itu file komponen root
  • Bagaimana cara import dan eksport komponen
  • Kapan menggunakan default dan named import dan eksport
  • Bagaimana cara mengimport dan mengeksport beberapa komponen pada satu file

Try out some challenges

Challenge 1 of 1:
Memisahkan komponen lebih jauh

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

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

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

SintaksisPernyataan ExportPernyataan Import
Defaultexport default function Button() {}import Button from './Button.js';
Namedexport function Button() {}import { Button } from './Button.js';
// Pindahkan aku 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>Ilmuan Hebat</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

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

PreviousYour First ComponentNextWriting Markup with JSX

How do you like these docs?