Modul React ES6

Modul

Modul JavaScript memungkinkan Anda untuk memecah kode Anda menjadi file terpisah.

Ini membuatnya lebih mudah untuk mempertahankan basis kode.

Modul ES bergantung pada pernyataan importdan export.

Ekspor

Anda dapat mengekspor fungsi atau variabel dari file apa pun.

Mari kita membuat file bernama person.js, dan mengisinya dengan hal-hal yang ingin kita ekspor.

Ada dua jenis ekspor: Bernama dan Default.

Ekspor Bernama

Anda dapat membuat ekspor bernama dengan dua cara. Sebaris satu per satu, atau sekaligus di bagian bawah.

export const name = "Jesse"
export const age = "40"

const name = "Jesse"
const age = "40"

export { name, age }

Ekspor Bawaan

Mari kita buat file lain, bernama message.js, dan gunakan untuk mendemonstrasikan ekspor default.

Anda hanya dapat memiliki satu ekspor default dalam sebuah file.

const message = () => {
  const name = "Jesse";
  const age = "40";
  return name + ' is ' + age + 'years old.';
};

export default message;

Impor

Anda dapat mengimpor modul ke dalam file dengan dua cara, berdasarkan apakah modul tersebut diberi nama ekspor atau ekspor default.

Ekspor bernama harus didestruktur menggunakan kurung kurawal. Ekspor default tidak.

import { name, age } from "./person.js";

import message from "./message.js";