Moduły React ES6

Moduły

Moduły JavaScript umożliwiają rozbicie kodu na osobne pliki.

Ułatwia to utrzymanie bazy kodu.

Moduły ES opierają się na instrukcjach importi export.

Możesz wyeksportować funkcję lub zmienną z dowolnego pliku.

Stwórzmy plik o nazwie person.jsi wypełnijmy go rzeczami, które chcemy wyeksportować.

Istnieją dwa rodzaje eksportu: nazwany i domyślny.

Nazwane eksporty można tworzyć na dwa sposoby. In-line pojedynczo lub wszystkie naraz na dole.

person.js

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

person.js

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

export { name, age }

Uzupełnij moduły React, wykonaj ćwiczenia, podejdź do egzaminu i uzyskaj certyfikat w3schools!!

Utwórzmy inny plik o nazwie message.jsi użyjmy go do zademonstrowania domyślnego eksportu.

Możesz mieć tylko jeden domyślny eksport w pliku.

message.js

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

export default message;

Moduły można importować do pliku na dwa sposoby, w zależności od tego, czy są nazwane eksportami, czy eksportami domyślnymi.

Nazwane eksporty muszą być zdestrukturyzowane za pomocą nawiasów klamrowych. Eksporty domyślne nie.

Importuj nazwane eksporty z pliku person.js:

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

Zaimportuj domyślny eksport z pliku message.js:

import message from "./message.js";