Flash cards
Review the key moves
What is the main idea behind React ES6 Modules?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
export ___ name = "Tobias"Put the learning moves in the order that makes the concept easiest to apply.
Modules
JavaScript modules allow you to break up your code into separate files.
This makes it easier to maintain the code-base.
ES Modules rely on the import and export statements.
Export
You can export a function or variable from any file.
Let us create a file named person.js , and fill it with the things we want to export.
There are two types of exports: Named and Default.
Named Exports
You can create named exports two ways:
In-line individually
export const name = "Tobias"
export const age = 18All at once at the bottom
const name = "Tobias"
const age = 18
export { name, age }Default Exports
Let us create another file, named message.js , and use it for demonstrating default export.
You can only have one default export in a file.
Example
Insert the following code into the newly created file:
const message = () => {
const name = "Tobias";
const age = 18;
return name + ' is ' + age + 'years old.';
};
export default message;Import
You can import modules into a file in two ways, based on if they are named exports or default exports.
Named exports must be destructured using curly braces. Default exports do not.
import { name, age } from "./person.js";import message from "./message.js";