Skip to main content

JavaScript Modules

Before we start to create React projects, it is important to understand how JavaScript modules works.

Scripts can be split into several files using modules. A module can provide classes, library functions, and variables for other modules to use. There are several different JavaScript module systems. In React programming, we use ES6 modules. CommonJS modules are imported using require-function. It is the default in Node.js even though ES6 modules are supported too.

In brief:

  • A module is simply a JavaScript file.
  • A module exports the variables and functions that it offers to be used outside the file.
  • Another module that uses the services of another module imports them from the module.

Exporting and importing​

Named exports​

You can export an identifier by adding the keyword export in front of the declaration. This is so called named export, and module can have multiple named exports. Named exports are useful for exporting variables and functions.

// mylib.js

export const myPi = 3.14;

export function circleArea(r) {
  return myPi*r*r;
}

Alternatively, you can export all the items you want to export in a single export statement at the end of your module file.

export { myPi, circleArea };

The exported items can be imported into other files. The imported features can be used just like they were defined inside the same file.

import { myPi, circleArea } from './mylib.js';

console.log('The value of pi is', myPi);
console.log(circleArea(1.0));
note

Imported variables are always considered const, no matter how they were declared.

Import everything as a module object​

You can import everything from a module without listing the identifiers by importing the module as an object. The exported items are accessible as properties of the module object.

import * as c from './mylib.js';

console.log('The value of pi is', c.myPi);
console.log(c.circleArea(1.0));

Renaming exports and imports​

You can rename exports and imports using the as keyword.

// renaming exports
const myPi = 3.14;

function circleArea(r) {
  return myPi*r*r;
} 

export { myPi as piValue, circleArea as areaOfCircle };
// renaming imports
import { piValue as pi, areaOfCircle as area } from './mylib.js';
  
console.log('The value of pi is', pi);
console.log(area(1.0));

Default exports​

Another way of exporting is to define a default export in the module. You can have only one default export in a module. In React, components are exported using the default export.

// Hello.js

export default function Hello() {
  return <h1>Hello, world!</h1>;
}

You can import the default export like this:

import Hello from './Hello.js' // default export is assigned to Hello

Note that there are no curly braces around the default import.

You can also export other things as default, for example an object with multiple attributes:

// mydefault.js
function area(r) {
  return Math.PI * r * r;
}

function circumference(r) {
  return 2 * Math.PI * r;
}

export default { area, circumference }; // an object with two attributes

You can import the default like this:

import circle from './mydefault.js' // default export is assigned to circle

console.log(circle.area(4));
console.log(circle.circumference(4));
note

The default import syntax is actually shorthand for this:

import { default as circle } from './mydefault.js'

Further Reading​