ES6 امکان import کردن یک ماژول و استفاده از آن در فایل‌های دیگر را برای ما فراهم می‌کند. اگر بخواهیم با اصطلاحات دقیق React توضیح دهیم، می‌توان کامپوننت‌ها را در فایل‌های دیگر از طریق export کردن آن کامپوننت از ماژول مربوطه استفاده کنیم.

ES6 دو روش Export یک ماژول را از یک فایل فراهم می‌کند: Named Export و Default Export.

Named Export:

با استفاده از Named Export می‌توانیم چندین export با اسم‌های مختلف از یک فایل داشته باشیم. سپس exportهای معینی را که می‌خواهیم با استفاده از {}، import کنیم.

// imports
// ex. importing a single named export
import { MyComponent } from "./MyComponent";
// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";
// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";
// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}

Import تمام Named Export‌ ها داخل یک آبجکت:

import * as MainComponents from "./MyComponent";
// use MainComponents.MyComponent and MainComponents.MyComponent2
here

Default Export:

در این نوع به ازای هر فایل تنها یک Default Export می‌توانیم داشته‌ باشیم. هنگام import باید نام آن را مشخص کرده و به شکل زیر import کنیم:

// import
import MyDefaultComponent from "./MyDefaultExport";
// export
const MyComponent = () => {}
export default MyComponent;

نام import در Default Export کاملا مستقل از export است و می‌تواند هر اسمی را داشته باشد.