React ES6 Модулі

Модулі

Модулі JavaScript дозволяють розбити код на окремі файли.

Це полегшує підтримку кодової бази.

Модулі ES покладаються на інструкції import та export.

Експорт

Ви можете експортувати функцію або змінну з будь-якого файлу.

Давайте створимо файл під назвою person.js і заповнимо його речами, які ми хочемо експортувати.

Існує два типи експорту: іменований і за замовчуванням.

Іменовані експорти

Ви можете створити іменовані експорти двома способами. В рядку окремо або всі відразу внизу.

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

const name = "Jesse"
const age = 40

export { name, age }

Експорт за замовчуванням

Давайте створимо інший файл під назвою message.js і використаємо його для демонстрації експорту за замовчуванням.

Ви можете мати лише один експорт за замовчуванням у файлі.

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

export default message;

Імпорт

Ви можете імпортувати модулі у файл двома способами, залежно від того, чи називаються вони експортами чи експортами за замовчуванням.

Іменовані експорти мають бути деструктуровані за допомогою фігурних дужок. Експорт за замовчуванням не виконується.

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

import message from "./message.js";