Alright! You’ve learned how to use import
to grab a variable from a file other than the file that is currently executing.
When you import a variable from a file that is not the current file, then an import
statement isn’t quite enough. You also need an export
statement, written in the other file, exporting the variable that you hope to grab.
export
comes from ES6’s module system, just like import
does. export
and import
are meant to be used together, and you rarely see one without the other.
There are a few different ways to use export
. In this course, we will be using a style called “named exports.” Here’s how named exports works:
In one file, place the keyword export
immediately before something that you want to export. That something can be any top-level var
, let
, const
, function
, or class
:
// Manifestos.js: export const faveManifestos = { futurist: 'http://www.artype.de/Sammlung/pdf/russolo_noise.pdf', agile: 'https://agilemanifesto.org/iso/en/manifesto.html', cyborg: 'http://faculty.georgetown.edu/irvinem/theory/Haraway-CyborgManifesto-1.pdf' };
You can export multiple things from the same file:
// Manifestos.js: export const faveManifestos = { futurist: 'http://www.artype.de/Sammlung/pdf/russolo_noise.pdf', agile: 'https://agilemanifesto.org/iso/en/manifesto.html', cyborg: 'http://faculty.georgetown.edu/irvinem/theory/Haraway-CyborgManifesto-1.pdf' }; export const alsoRan = 'TimeCube';
In a different file, import
the name of the var
, let
, const
, function
, or class
from the first file:
// App.js: // Import faveManifestos and alsoRan from ./Manifestos.js: import { faveManifestos, alsoRan } from './Manifestos'; // Use faveManifestos: console.log(`A Cyborg Manifesto: ${faveManifestos.cyborg}`);
This style of importing and exporting in JavaScript is known as “named exports.” When you use named exports, you always need to wrap your imported names in curly braces, such as:
import { faveManifestos, alsoRan } from './Manifestos';`
JavaScript’s ES6 module system goes beyond named exports and has several advanced syntax features.
Instructions
Select NavBar.js.
On line 3, add the word export
before the word class
. This will export the class NavBar
.
Now, when ProfilePage.js uses import
to grab the variable NavBar
from NavBar.js, it will get back exactly what it wants: the NavBar
component class.