Skip to Content
Learn
Components Render Other Components
export

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

1.

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.

Folder Icon

Take this course for free

Already have an account?